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

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

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年01月21日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

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

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

ベンダープレフィックスとは英語で「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の疑似クラスnth-childとnth-of-type……

2024年11月07日
疑似クラスnth-childとnth-of-typeについて CSSの疑似クラス「:nth-child」と「:nth-of-type」はどちらも何番目の要素とい […]
サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。