media archive

ベンダープレフィックスとは?から簡単便利な初学者向けのAutoprefixerの使い方まで

本記事は、ベンダープレフィックスってなに?という方や、ベンダープレフィックスを自動的に付けてくれるAutoprefixerをまだ導入していない方など、初学者向けにそれらの基本的な知識や簡単な導入方法を解説しています。

本記事の内容
非表示

そのCSS、実は適用されていないかも!?

ベンダープレフィックスの解説の前に、まず必要な予備知識の話をしていきます。

CSSが適用されない場合がある理由

Webの技術の移り変わりにより、HTMLやCSSなどの言語には旧バージョンや新バージョンが存在しています。
また、ブラウザにもいろいろな種類があり、それぞれのブラウザで旧バージョンや新バージョンが存在しているのが現状です。
そのため、ここではCSSに話を絞りますが、

  • 同じCSSでも、そのCSSが適用されるブラウザと適用されないブラウザがある
  • 最新版のブラウザでは問題なく適用されるが、旧バージョンのブラウザでは適用されない

などの問題が発生してしまいます。

なので、使いたいCSSに対して各ブラウザが対応しているかいないか、その対応状況を調べる必要がありますが、それを調べるには「Can I use」というサイトが便利です。

Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com

Can I useのTOP画面
Can I useのTOP画面

Can I useで各ブラウザのCSSの対応状況を調べる方法

Can I useで各ブラウザのCSSの対応状況を調べるには、Can I useの検索窓に、

Can I useの検索窓
Can I useの検索窓

CSSのプロパティや値など調べたいキーワードを入力します。
ここでは例としてflexという値を入力しています。

Can I useの検索窓に入力した様子
Can I useの検索窓に入力した例

すると、各ブラウザの対応状況を一覧表で表示してくれます。

Can I useの各ブラウザの対応状況一覧表部分
各ブラウザの対応状況一覧表

この対応状況の見方ですが、一番上の行が各ブラウザ名です。

Can I useの各ブラウザの対応状況一覧表-各ブラウザ名
各ブラウザ名の表示箇所

また、各ブラウザ名の列の数字が、ブラウザのバージョンを表していて、過去のバージョン、現在のバージョン、将来のバージョンに分かれています。

Can I useの各ブラウザの対応状況一覧表-過去、現在、将来のバージョン
各ブラウザバージョンの表示箇所

表の下部には補足情報が表示されます。

Can I useの補足情報欄
補足情報の表示箇所

検索した内容に対して、各ブラウザが対応しているかどうかは、ブラウザのバージョン部分の色で表されています。

【緑の場合】

Can I useの対応ブラウザの表示

対応していることを表します。

【オリーブ色の場合】

Can I useの一部対応ブラウザの表示

一部対応など条件付きで対応していることを表します。

【赤の場合】

Can I useの非対応ブラウザの表示

対応していないことを表します。

【灰色の場合】

Can I useの対応不明の表示

対応状況不明なことを表します。

【右上に黄色のマークがある場合】

Can I useのベンダープレフィックス付きで対応ブラウザの表示

ベンダープレフィックスを付けることで対応可能なことを表します。

ブラウザのバージョン部分にマウスカーソルを持っていくと、より詳しい情報が表示されます。

Can I useのブラウザのバージョン部分の詳細情報
詳細情報が表示された様子

以上のような手順で、使いたいCSSに対する各ブラウザの対応状況を調べることができます。

最新版のブラウザだけでなく、過去バージョンのブラウザへの対応や、複数ブラウザへの対応には、ベンダープレフィックスというものが必要になる場合がありますので、次に、そのベンダープレフィックスについてみていきましょう。

ベンダープレフィックスってなに?

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

最初に述べましたように、Webの技術は常に移り変わっており、CSSも、より便利なものへとバージョンアップされてきました。

CSS自体の開発の中で、便利な新機能が開発されても、それが正式に採用される(仕様確定)までには時間がかかります。

そこで、新機能は早く使えた方が便利なので、それぞれのブラウザの開発・提供元(ベンダー)が、仕様確定までの間に、自分たちが開発しているブラウザでその新機能を先行して使えるようにすることがあります。
また、ブラウザの開発・提供元(ベンダー)が、自分たちが開発しているブラウザで使える独自の拡張機能を開発することもあります。

そのような背景の中で、ベンダープレフィックスとはすごく簡単に言うと、

  • 仕様確定までの間に、各ブラウザで先行して使えるようにされた新機能を使いたい
  • ブラウザの開発・提供元(ベンダー)が開発した、独自の拡張機能を使いたい

というときに必要なものです。以下でもう少し具体的に見てみます。

ベンダープレフィックスの書き方

ベンダープレフィックスとは、具体的には下図のように、CSSのプロパティまたは値の前に書く記述のことです。

ベンダープレフィックス
ベンダープレフィックスの記述例

ベンダープレフィックスはブラウザの種類によって変わります。

ベンダープレフィックスブラウザ
-webkit-Google Chrome、Safari
-moz-Firefox
-ms-Internet Explorer
主なベンダープレフィックスの記述と対応する各ブラウザ

また、現在もしくは当時、ベンダープレフィックスが必要だとしても、将来的に新機能の仕様の策定が進むとベンダープレフィックスは不要になるため、それに備えてベンダープレフィックスなしの記述も一番最後に書いておくようにします。

CSS

.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

以上がベンダープレフィックスについてでした。

しかし、CSSの機能について一つ一つ調べ、ベンダープレフィックスを手入力していくのは大変です。
また、中には単にベンダープレフィックスを付けるだけではなく、構文(書き方)の変更が必要なプロパティや値も存在します。

そこで、ベンダープレフィックスを付けたり、構文の変更を自動で行うツールがあります。それがAutoprefixerです。

Autoprefixerってなに?

Autoprefixerとは

Autoprefixerとは、サポート対象にしたいブラウザを設定すると、自動的にベンダープレフィックスを付け、必要であれば構文の変更もしてくれるツールです。

補足

サポート対象にしたいブラウザの設定は、Browserslistという設定ファイルや設定項目にて設定します。

Autoprefixerの導入方法には、

  1. オンラインツールを利用する
  2. エディタの拡張機能を利用する
  3. タスクランナーやモジュールバンドラを利用する

の3つの方法があります。

3.のgulpなどのタスクランナー、webpackなどのモジュールバンドラを利用する方法は、ターミナルから環境構築を行う必要がありますので、ここでは初学者向けに導入しやすい1.と2.の方法を解説します。

注意点

エディタの拡張機能のAutoprefixerについて

記事執筆時点(2020年4月)において、エディタの拡張機能のAutoprefixerでは、display: grid;などといった一部のプロパティや値には対応してない場合がありますのでご注意ください。

オンラインツールでAutoprefixerを導入する方法

まず最初に、最も簡単なオンラインツールを利用する方法です。
オンラインツールを利用するには、下記のサイトへアクセスします。

Autoprefixer CSS online
https://autoprefixer.github.io

すると、下記の画面になりますので、

Autoprefixer CSS onlineの画面
Autoprefixer CSS onlineの画面

ベンダープレフィックスをまだ付けていないCSSを左側の欄にコピーアンドペーストします。

Autoprefixer CSS onlineの左側の欄
入力欄

すると自動的に右側の欄に、ベンダープレフィックスの付与と必要であれば構文が変更されたCSSが出力されます。

Autoprefixer CSS onlineの右側の欄
出力欄

あとはその出力されたCSSを、元のファイルにコピーアンドペーストするだけです。画面右下の[Select result]ボタンでワンクリックでコピーできます。

サポート対象ブラウザの設定は、左下の[Browserslist]のところで設定します。

Autoprefixer CSS onlineのBrowserslistの設定
Browserslistの設定

Browserslistの設定の値について詳しくは、「Browserslist 設定」などで検索してみてください。
ここでは例として[last 2 version]としていますが、これは「最後の2つのバージョン」なので、「最新版とその1つ前のバージョンまで」という意味です。

サポート対象ブラウザの設定を変更したときは、[Apply]ボタンをクリックしましょう。

Autoprefixer CSS onlineのBrowserslist設定のApplyボタン

[add the comment with 〜]のところのチェックを外すと、

出力CSSへのコメントの自動挿入のチェックボックス

出力されたCSSに自動的に付くコメントの部分を消すことができます。

自動挿入されたコメント部分

また、[You can also see 〜]のリンク先の

Autoprefixer CSS onlineからbrowserl.istへのリンク部分

browserl.ist
https://browserl.ist

にアクセスすると、現在の設定しているサポート対象ブラウザを一覧で見ることができます。

browserl.istの画面
browserl.istの画面

注意点

記事更新時点(2021年3月13日)において、上記browserl.istのWebサイトは一時的に使えなくなっています。

以上がオンラインツールでAutoprefixerを導入する方法です。

エディタの拡張機能でAutoprefixerを導入する方法

様々なエディタの拡張機能としてAutoprefixerが公開されていますが、ここではVisual Studio CodeとBracketsを例にします。

注意点

エディタの拡張機能のAutoprefixerについて

記事執筆時点(2020年4月)において、エディタの拡張機能のAutoprefixerでは、display: grid;などといった一部のプロパティや値には対応してない場合がありますのでご注意ください。

Visual Studio Codeでの導入方法

「Autoprefixer」で拡張機能を検索すると、検索結果に出てきますので、それをインストールします。

Visual Studio CodeでのAutoprefixerのインストール

バージョン3.0.0以前はこのままで使用可能でしたが、バージョン3.0.1で動作させるには、settings.jsonに、autoprefixer.optionsとしてBrowserslistの設定を記述する必要があります。詳しくは、下記の開発者のGitHubをご覧ください。

https://github.com/mrmlnc/vscode-autoprefixer/issues/122

あとは、[表示]メニューから[コマンドパレット]を表示させ、コマンドパレットに

Autoprefixer: Run

と入力すると、自動的にベンダープレフィックスが付与されます。

コマンドパレットにAutoprefixer: Runと入力

Bracketsでの導入方法

「Autoprefixer」で拡張機能を検索すると、検索結果に出てきますので、それをインストールします。

Bracketsの拡張機能管理画面
拡張機能のAutoprefixer

AutoprefixerをインストールするとBracketsの[編集]メニューにAutoprefixerに関する項目が追加されます。

Bracketsの[編集]メニューに追加されたAutoprefixerに関する項目
追加されたAutoprefixerに関する項目

ここで、[Auto prefix on save]にチェックを入れた状態にすると、保存するたびに自動的にベンダープレフィックスを付け、必要であれば構文の変更をしてくれます。

Autoprefixerで保存の都度自動的にベンダープレフィックスを付ける設定

また、サポート対象ブラウザの設定は[Autoprefixer Settings…]から可能です。

Autoprefixerの設定メニュー

[Autoprefixer Settings…]を選択すると、下記のような設定画面になります。

Autoprefixerの設定画面
Autoprefixer Settingsの画面

[Visual cascade]にチェックを入れると、ベンダープレフィックスの自動付与箇所に対して、見やすいようにインデント調整してくれます。

ベンダープレフィックスの自動付与箇所へのインデント調整のチェックボックス

[Browsers]のところでサポート対象ブラウザの設定をします。

Browserlistの設定

[−]ボタンで設定の削除、[+]ボタンで設定の追加ができます。

Browserlistの追加や削除ボタン

設定を変更したときは[OK]で設定画面を閉じましょう。

以上がエディタの拡張機能でAutoprefixerを導入する方法です。

最後に

記事執筆時点(2020年4月)において、最新版のモダンブラウザだけを対象とした場合は、ベンダープレフィックスを付ける機会は少ないですが、旧バージョンのブラウザやInternet Explorerをサポート対象のブラウザとした場合、まだ必要となってきます。

ベンダープレフィックスを手動で付けるのは非常に効率が悪く、またミスの原因にもなるので、ぜひAutoprefixerを導入してみてください!

ホームページの制作、Webデザインから、
パンフレットやチラシなど紙媒体の制作、グラフィックデザインまで、
制作のご相談やお見積もりなど、まずはお気軽にお問い合わせください。

制作のご依頼・ご相談はこちら
TOP
ホームページ(Webサイト)制作、パンフレット・チラシ等制作の
ご依頼、ご相談はこちら