このエントリーをはてなブックマークに追加このエントリをつぶやく

デバイスサイズによるcss切替の効率化

こんにちは。デザイナー兼コーダーのよこです
入社半年目にして初のブログ投稿です

今回のネタは複数デバイス対応のためのcss記述の入門編です
PC,iPhone,Android,各種タブレット端末など,Webサイトの閲覧環境は多様化しています。

Webサイト・アプリをhtml/cssベースで構築する際は,常に同じ画面を見せておくだけでは済まされないことが増えていることと思います。
このためデバイスサイズによって異なるcssを切り替える手法が各方面で紹介されています。

と言ってもデバイスサイズごとにcssを用意する場合,htmlの<head>要素内に<link>要素がズラリと並ぶと、ソースは重くなり更新もページごとに行う必要があり非効率です。

これを解消するために,import.css内にてデバイスサイズによるスタイル切り替えを全て一括して行う方法をご紹介します。
まずは下記のデモソースをDLしてご覧下さい。

demo_20111213.zip

ファイルを解凍したらトップ階層のindex.htmlをブラウザで開いて、ウインドウの横幅を変えてみてください。

ウインドウサイズに応じて背景画像が変わるのがわかると思います。

この原理を使って、背景色以外のプロパティでも画面サイズに応じて異なるスタイル指定を行い、各画面サイズごとに最適化したスタイルを適用させることができます。

以下、デモのソースをご覧いただきながらお読みください。

ポイント

1.css読み込みのためにhtmlに記述するのは import.cssの1行のみ
まずは下記のソースをhtmlの<head>要素内部に記述

<link rel=”stylesheet” type=”text/css” media=”all” href=”css/import.css”>

※最後のhref属性は必要に応じてimport.cssへの任意のパスに書き直してください。

2.import.css内にデバイスサイズごとのcss切替を記述

Internet explore 9 , firefox , Safari , Opera , Google Chromeでは,css内部からのimport規則についてメディア指定の一環でサイズ指定をできます。

import.cssのソースは下記の通りです。

————————————————————–

1.@charset “utf-8”;
2.@import url(“base.css”);

3-1.@import “pc.css” only screen and (min-width:1024px);
3-2.@import “pad.css” only screen and (min-width:768px) and (max-width:1023px);
3-3.@import “smart_l.css” only screen and (min-width:480px) and (max-width:767px);
3-4.@import “smart_s.css” only screen and (max-width:479px);

4-1.@media only screen and (min-width:1024px) {#wrapper{width:1024px;}}
4-2.@media only screen and (min-width:768px) and (max-width:1023px) {#wrapper{width:768px;}}
4-3.@media only screen and (min-width:480px) and (max-width:767px) {#wrapper{width:480px;}}
4-4.@media only screen and (max-width:479px) {#wrapper{width:320px;}}

※行の最初の通し番号はこの記事を読みやすくする目印です。css上では消去して下さい。

————————————————————–

解説
1.文字コードの宣言
2.全てのデバイスサイズで適用させるcss読み込み

3-1~3-4 デバイスサイズによって異なるcssを読ませる記述
たとえば3-3行は 「画面サイズが480px以上767px以下だった場合にsmart_l.css を読み込む」の意味です。

4-1~4-4
スタイル直接記述でも画面サイズによる指定が可能です。
たとえば4-2は「画面サイズが768px以上1023px以下の場合に,#wrapper の横幅を768pxにする」の意味です

4-1~4-4の記述プロパティ内容を3-1~3-4で参照させているcssに記述しても同じ動きをしますが,このimport.cssに記述しておくことで,サイト(またはアプリ)全体の画面サイズの基本前提をimport.css内だけで管理できるという利点があります。

※IEのバージョン8以下にも対応したい場合,PC向けcssを読み込ませるために下記を追記

<!–[if IE]>
<link rel=”stylesheet” href=”css/pc.css” type=”text/css” />
<style>#wrapper{width:1024px;}</style>
<![endif]–>

→IEを使っているという時点でスマートフォンではないと考えられるのでPC向けスタイルを適用させれば最低限の動作は保証されると思います。

 

3.画面拡大を指定

各デバイスでのbody / wrapperサイズを振り分けて,それぞれのデバイスで最適な表示を実現できたらもう画面の拡大・縮小は不要なので,ピッチ固定をするために,下記を記述します。

<meta name=”viewport” content=”initial-scale=1.0, width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>

 

(まとめ)

サンプルのソース(demo_20111213.zip)

今回紹介した方法であれば仮に対応するデバイスが増えて本番サーバーに適用する際に、cssだけを更新すればOKにできるという利点があります。
スタイル変更はプログラムとは分断して完全にcssの変更のみで済むようにしていきたいですね。

カテゴリー: プログラミング   パーマリンク

コメントは受け付けていません。