webサイトやwebサービスは公開後も改善や拡張を繰り返すため、保守性はとても大切です。保守性の高いサイトを制作することで、後のコストを下げる事が出来ます。
コーディングでは、カスタムプロパティ(CSS 変数)を利用する事で、保守性を上げる事が出来ます。しかし、カスタムプロパティはIEでは使えません。
この記事では、Polyfillを使ってカスタムプロパティをIEでも使う方法を紹介します。
💡 コーディングの練習なら模写修行！
この記事の目次
カスタムプロパティとは
カスタムプロパティとは、繰り返し利用される特定の値を管理するための機能です。プログラミング言語の変数と同じような機能です。
<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対応も必要であれば、今回紹介する方法で対応します。
ここでは2つの方法を紹介します。
CDNを使う方法
今回は、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でもカスタムプロパティが使えるようになります。
自分のサーバーに置く方法
ファイルをダウンロードし、読み込む方法でも対応出来ます。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にリダイレクトされます。
従って、今は特別な理由がない限り、今回の方法は必要ありません。
超実務向け！コーディングの練習が出来るサービス作りました 🎉
模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。
こんな方におすすめ！
- 実務のレベル感を知りたい
- プロの制作フローを学びたい
- 何を考えながらコードを書くのか知りたい
- 基礎学習中、もしくは終えたばかり
- CSS設計やSCSSを使った書き方を学びたい
模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。
他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか？嬉しい声もいただいています！
自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet
この記事を書いた人
Tatsuki
空間コーディネーターから独学でプログラミングを学びwebの世界へ。とにかくコーディングが好き。普段は【HTML・CSS / JavaScript / React】を主に書いています。
