模写修行メディア

Polyfillを使ってIEでもカスタムプロパティを使う方法

webサイトやwebサービスは公開後も改善や拡張を繰り返すため、保守性はとても大切です。保守性の高いサイトを制作することで、後のコストを下げる事が出来ます。

コーディングでは、カスタムプロパティ(CSS 変数)を利用する事で保守性を上げる事が出来ます。しかし、カスタムプロパティはIEでは使えません。

この記事では、Polyfillを使ってカスタムプロパティをIEでも使う方法を紹介します。

コーディング教材作りました 🎉

こんな方におすすめです。

  • コーダー・フロントエンドエンジニアを目指している
  • 基礎学習を終えて実践的な"練習"がしたい
  • XDのデータを見ながらコーディングの練習をしたい
  • プロのコードを見たい
  • CSS設計やSCSSの勉強もしたい

無料の教材もあるので、ぜひ学習にご活用ください。

模写修行を見る

この記事の目次

カスタムプロパティとは

カスタムプロパティとは、繰り返し利用される特定の値を管理するための機能です。プログラミング言語の変数と同じような機能です。

<h1 class="title">タイトル</h1>
<p class="text">テキストです。テキストです。テキストです。</p>
:root {
    --color-primary: #4072B3;
    --color-secondary: #AEC4E5;
    ...
}

.title{
    color: var(--color-primary);
}

.text{
    background-color: var(--color-secondary);
}

仮にサイト内に100箇所--color-primaryがあり、カラーが変更になった場合でも、#4072B3を修正するだけで100箇所全てに反映されます。

この記事では紹介しませんが、カスタムプロパティには色々と便利な特徴があるので、まだ何が出来るか理解していない方は勉強してみてください。

Polyfillとは

Polyfillとは、特定のブラウザがサポートしていない機能を動かすための、代わりのコードです。ほとんどはJavaScriptで作られています。

今回も、本来IEでカスタムプロパティは使えませんが、Polyfill(jsのコード)がIEの時もうまく補ってくれていることになります。

Polyfillを使ってIEでもカスタムプロパティを使う方法

前述した通り、カスタムプロパティはIE非対応です。

『カスタムプロパティをどうしても使いたいけど、IEも対応したい...』なんて時は、Polyfillを使えば簡単に対応できます。

例えば、ダークモードの実装をする場合は、カスタムプロパティはとても便利です。IE対応も必要であれば、今回紹介する方法で対応します。

Polyfillを使って、カスタムプロパティをIE対応する方法は、2通りあります。

CDN を使う方法

ie11-custom-properties サイト画面

今回は、jsDelivrという CDN サービスを使います。サイト内で『ie11-custom-properties』と検索すると、ie11-custom-propertiesのリンクが表示されます。

画像赤枠内のCopy HTMLを選択し、コピーします。あとは HTML内で読み込めば完了です。

<script src="https://cdn.jsdelivr.net/npm/ie11-custom-properties@4.1.0/ie11CustomProperties.min.js"></script>

たったこれだけで、IEでもカスタムプロパティが使えるようになります。

自分のサーバーに置く方法

[ie11-custom-properties サイト画面

ファイルをダウンロードし、読み込む方法でも対応出来ます。CDN同様、ie11-custom-propertiesから取得出来ます。

赤枠内のアイコンをクリックするとie11-custom-properties-4.1.0.tgzがダウンロードされます。ファイルを解凍し、ファイル内にあるie11CustomProperties.jsを自身のプロジェクトに配置します。

<script src="js/libs/ie11CustomProperties.js"></script>

HTML内で読み込めば完了です。

IEは2022年6月でサポート終了

Microsoftは2022年6月16日にIEのサポートを終了すると発表しています。2022年6月16日以降にユーザーがアクセスした場合、Edgeにリダイレクトされるようです。

サポートが終了したら、特別な理由がない限り、今回のPolyfillは消してしまって良いです。1行消すだけなので、楽で良いですね。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • 何を考えながらコードを書くのか知りたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードでさらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。

参考:コーディング教材の【模写修行】は他の教材と何が違うのか?

無料教材もあります!👍

模写修行を見る

脱初心者!模写修行でプロになるための練習を!

この記事を書いた人

Jyuのアイコン

Jyu

空間コーディネーターから独学でプログラミングを学びwebの世界へ。とにかくコーディングが好き。普段は【HTML・CSS / JavaScript / React】を主に書いています。

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材