3/3 古いブラウザ用のCSSを先に書くレガシーファースト [ホームページ作成] All About

Media Queriesを使って、レガシーファーストなCSSを記述する概要

先ほどご紹介した手順でCSSソースを記述すると、以下のようなソースになります。

/* --------------------------------------------- */
/* ▼レガシーファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */
　：　：　：
　：　：　：
/* ------------------------------------------ */
/* ▼モバイル用デザインとして付け足すデザイン */
/* ------------------------------------------ */
@media all and (min-width: 1px) {
　　：　：　：
　　：　：　：
}
/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media all and (min-width: 768px) {
　　：　：　：
　　：　：　：
}
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media all and (min-width: 920px) {
　　：　：　：
　　：　：　：
}

レガシー向けの共通部分には、古いブラウザでも問題なく表示可能な記述だけを使って、シンプルな装飾を作っておきます。これを共通デザインとします。

上記のソースでは、モバイル用に追加するCSSを記述している箇所で、Media Queriesを使って以下のように記述しています。この記述は、「画面の横幅が1px以上の場合に適用する」という指示です。

@media all and (min-width: 1px) { ～～～ }

実際には画面の横幅が1px以下になるようなことはあり得ないので、ここに記述した内容は、すべての環境で表示されます。ただし、Media Queriesに非対応の古いブラウザは、この中身を読みません。そこで、この部分に、古いブラウザでは崩れてしまう原因になるCSSを書くようにします。

レガシー版としてデザインを分離する方が良い(かもしれない)例

■box-sizingプロパティ
例えば、古いブラウザでレイアウトが崩れやすいプロパティとして、「横幅」の解釈を変更できる「box-sizing」プロパティがあります。このbox-sizingプロパティに関して詳しくは、記事「横幅を100%にした際、親ボックスからはみ出すのを防ぐ」をご参照下さい。box-sizingプロパティが解釈可能なことを前提にしてレイアウトを作ると、古いブラウザ(IE7以下など)ではレイアウトが崩れる可能性が高いでしょう。

※box-sizingプロパティは、IE7以下では非対応です。Firefox28以下・Chrome9以下・Safari5以下では、ベンダープレフィックスを付加しないと使えません。

したがって、レガシー版デザイン(共通デザイン)の段階では、box-sizingを使わずに済ませるような簡素なデザインに留めておき、モバイル版デザイン(以降)でbox-sizingを使って望み通りにデザインしておくと良いでしょう。

■RGBAカラーモデル
ウェブ上での色指定では主に、赤・緑・青の各成分を数値で示したRGB値が使われます。このRGBに「アルファチャンネル(透明度)」を付加したRGBA値での色指定方法もあります。しかし、古いブラウザではRGBA値での指定は解釈できず、黒色で表示してしまいます。

※RGBAカラーモデルでの色指定は、IE8以下では非対応です。

したがって、レガシー版デザイン(共通デザイン)の段階では、RGB値だけを使って妥協しておき、モバイル版デザイン(以降)でRGBA値を使って望みの半透明な色を指定しておくと良いでしょう。

CSS3で追加された(古いブラウザでは表示できない)プロパティや値は他にも多数あります。それらの記述方法を使ってデザインしたい場合は、それらの記述はMedia Queriesを使って表示対象を限定した部分にだけ記述することにします。すると、「モバイルファースト」のメリットを享受しつつ、古いブラウザでも崩れずに済む書き方がしやすくなるでしょう。

モバイルファースト設計でも古いブラウザを考慮する「レガシーファースト」

今回は、CSSの記述労力を低く抑えておきつつも、(IE8以下などの)古いブラウザでもそれなりに表示できるような簡素なスタイルを追加する、「レガシーファースト」なCSSの書き方をご紹介致しました。モバイルファーストで設計する際に、古いブラウザでの表示も考慮したい場合には、ぜひ、試してみて下さい。

【関連記事】