モバイル環境に余計なCSSを読ませない：大画面向けCSSをmedia属性で分離する方法
前のページでご紹介したCSSソースの書き方では、あらゆる環境向けのCSSソースを一括して読ませることになります。小規模なデザインでCSSソースの分量が少ないなら、それでも特に問題はないでしょう。しかし、下記のようにCSSファイルを分割しておき、必要なCSSファイルだけを読み込む仕様にする方が望ましいこともあります。- ベースのデザイン(＝スマートフォン用デザイン)だけを記述したCSSファイル
- タブレット以上サイズ向けの差分デザインを記述したCSSファイル
上記のようにCSSファイルを2つに分割しておき、HTMLのmedia属性を使って下記のように読み込まれる環境を限定します。
- スマートフォンサイズの環境で閲覧された場合は(1)のCSSだけを読み込む
- タブレット以上サイズの環境で閲覧された場合は(2)のCSSも追加で読み込む
このようにしておくと、スマートフォンで閲覧された場合には余計な(2)のCSSを読み込まずに済むため、早くページの表示を完了できます。タブレット以上サイズの端末で閲覧された場合には2つのCSSを読み込むことになりますが、モバイル端末ユーザの方が多くなった現在では、全体としては無駄な通信を減らせるでしょう。
■media属性を使って、閲覧環境に応じて読み込むCSSファイルを分ける書き方
上記のような、閲覧環境の条件によって読み込むCSSファイルを選択させたい場合には、CSSを読み込むHTMLソースを以下のように書きます。
<link href="base.css" rel="stylesheet" media="all"> <link href="wide.css" rel="stylesheet" media="screen and (min-width: 768px)">上記のソースでは、link要素を使って2つのCSSファイルを読み込もうとしていますが、閲覧者の環境に応じて以下のように動作します。
- base.cssは、すべての環境で読み込まれる。
- wide.cssは、画面の横幅が768px以上の場合でのみ読み込まれる。
これによって、スマートフォンや小型タブレットなどのように、画面の横幅が768px未満の環境では base.css だけしか読み込まれなくなります。1行目に書いた「media="all"」の記述は省略しても問題ありません。ここでは2行を比較して話を分かりやすくするために、あえて加えただけです。
■あまり細かくCSSファイルを分割しすぎないように
あまり細かくCSSファイルを分けすぎると、最も多数のCSSファイルを読むことになるPC環境では表示完了までにかかる時間が長くなってしまいます。せいぜい「ベースのモバイル版CSS」と「それ以外の差分全て」のように、2つ程度に留めておく方が良いでしょう。その方が、管理や編集作業が煩雑にならずに済みます。
閲覧者の画面サイズに応じて、表示/非表示を切り替える方法
例えば「モバイル版デザインでは表示したくないが、PC版デザインでは表示したい」というように、特定の閲覧環境だけで表示したい内容もあるでしょう。その際は、displayプロパティを活用すると簡単です。以下のようなHTMLがあるとします。
<p class="forpc"> PCでのみ見せたい内容 </p>上記の部分を、PC(＝広い画面)だけで見せたい場合は、以下のようにdisplayプロパティを記述します。
/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */
p.forpc {
display: none;
}
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media (min-width: 1024px) {
p.forpc {
display: block;
}
}
最初に全環境の共通デザインとして「display: none;」を書いておくことでブロックを非表示にし、PC用デザインにだけ「display: block;」を記述することで表示を復活させています。逆に、モバイル環境でのみ表示させてPC環境では非表示にしたい場合は、上記の「none」と「block」の値を逆にすれば良いだけです。備考：メディアクエリに非対応な古いブラウザ
本記事でご紹介したメディアクエリの記述方法は、CSS3で追加された仕様です。したがって、CSS3に対応していないような古いブラウザで閲覧された場合には、無条件で「モバイル用デザイン」が表示されることになります。ここでの「古いブラウザ」とは、下記の通りです。
- IE8以下 (IE9から対応)
- Firefox3以下 (Firefox3.5から対応)
- Safari3.2以下 (Safari4から対応)
- Opera6以下 (Opera7から対応)
- (ChromeとEdgeは最初のバージョンから対応)
上記の未対応ブラウザは既にどれも利用者数が少ないので、もはやこれらのブラウザに対しては画面サイズに関係なく「モバイル用デザインを見せる」と割切ってしまうのが最も楽です。古いブラウザでの表示方法にもう少し気を遣ったCSSソースの記述方法は、記事「古いブラウザ用のCSSを先に書くレガシーファースト」で解説していますが、今となってはそこまで気を遣う必要性はほとんどないでしょう。
モバイルファーストでページデザインを作る際のCSSソースの書き方
今回は、スマートフォンに最適化したシンプルなCSSを「共通デザイン」としてソースの最初に記述しておき、後から「タブレット向けの差分デザイン」や「PC向けの差分デザイン」を付け足していくモバイルファーストなCSSソースの書き方をご紹介いたしました。全体としてはCSSソースの記述量を削減しやすく、管理や更新がしやすくなります。ぜひ、試してみて下さい。【関連記事】
