• HOME > 
  • CSS > 
  • CSSのベンダープレフィックスとは?【初心者にもわかりやすく...

CSSのベンダープレフィックスとは?【初心者にもわかりやすく解説】

投稿日:

ベンダープレフィックスとは?

直訳すると「供給者の接頭語」

ベンダープレフィックスとは英語で「vender prefix」と表記し、「vender」(供給事業者)の「prefix」(接頭辞)という意味になります。

ベンダープレフィックスの役割

数多くあるCSSのプロパティの中には、ベンダー(ブラウザーの開発元)によって新しく開発されたプロパティと機能が存在します。

それらのプロパティは、試験的に先行導入されている段階のものもあり、他のブラウザでは機能しないので注意が必要です。

ベンダープレフィックスをプロパティの接頭辞として付与して記述することで、各ブラウザのベンダー(開発元)が開発した拡張機能のCSSを先行実装できるようになります。

ベンダープレフィックスの種類

ベンダープレフィックスにはブラウザごとの接頭辞が存在し、ハイフォンとともに記述します。

インターネットエクスプローラーの場合

インターネットエクスプローラーのベンダープレフィックスは「-ms-」です。

Google Chrome と Safariの場合

Google Chrome と Safariのベンダープレフィックスは「-webkit-」です。

Firefoxの場合

Firefoxのベンダープレフィックスは「-moz-」です。

記述の方法

前述の通り、該当するプロパティの先頭に記載します。

ベンダープレフィックスを記述する際は、「ベンダープレフィックスなしのもの」+「ベンダープレフィックス付きのもの」の両方を記述します。

CSS

.sample{
	writing-mode:vertical-rl;
	-webkit-writing-mode:vertical-rl;
	-ms-writing-mode:tb-rl;
}

なぜベンダープレフィックスを付けない状態のものも必要なのか?

ブラウザは定期的にバージョンアップを行うことで、随時ベンダープレフィックスなしでも対応できるようになっていきます。

そのため現時点ではベンダープレフィックスが必要でも、将来的には必要なくなるということがあります。

はじめに両方を記述しておき、ブラウザの対応が完了したら、ベンダープレフィックスは削除するようにしましょう。

まとめ

WEBサイトを制作する際は、訪問者がどのブラウザを使っていたとしても問題無く閲覧できるようにしなくてはなりません。便利なプロパティでもブラウザによっては使えないものもあります。中でもインターネットエクスプローラーは非対応のプロパティが多いため注意が必要です。

関連する記事

サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。
サムネイル

CSSのletter-spacingで文字間隔を設定【中央寄……

2023年01月16日
最終更新日:2023年03月10日
letter-spacingは、テキストの文字と文字との間隔を設定するためのプロパティです。文字と文字の間を狭めたり、広げたりしてバランスを整えることができます。
サムネイル

CSSのtext-emphasisの使い方【圏点(けんてん)……

2023年01月16日
最終更新日:2023年03月10日
text-emphasisは、文字を強調したいときに付け加える圏点(けんてん)を表示するプロパティです。圏点のスタイル(形状)と色を自由に設定することが可能です。
サムネイル

CSSで中国語フォントを表示させる方法【font-famil……

2022年10月28日
最終更新日:2023年03月10日
簡体字を使用するにはサイトにGoogle FontsなどのWebフォントを導入して、CSSのfont-familyプロパティでそのフォントを指定します。
サムネイル

CSSだけで斜線を引く方法【transformとlinear……

2022年08月09日
最終更新日:2023年03月10日
CSSだけで斜線を引くには、「transformプロパティのrotateを使う」と「backgroundプロパティのlinear-gradient」という2通りの方法があります。