Media Queriesを使用して1ソースでレスポンシブ対応をする
今や特に珍しくも無いレスポンシブデザイン。PC・タブレット・スマホ、いろいろなデバイスでネットができるので、各デバイスで最適化させたサイトを見せたいというのは当然なところでもありますね。
ちょっと前に1ソースでレスポンシブ対応をする業務があったので、復習をかねてのメモ。
スポンサーリンク
CSS3のMedia Queriesで読み込む条件が指定できるようになったのはとても便利だと思います。
可能になっていなければ、今でもjavascriptかPHPでユーザーエージェントを見て切り替えをしていたのでしょうかね?本来ならばそっちが正しい?のかもしれませんが…
例として、最大・中間・最小となる3つを設置。
PCサイズ・タブレットサイズ・スマホサイズと思っていただければよいです。
1.HTML内にMedia Queriesの記述をする方法
HTML内で行う場合は、読み込むCSSファイルをブラウザサイズによって切り替えます。
CSSを記述する時のmediaの部分にmax-widthやmin-widthを使用して、読み込む条件を切り分けます。
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 961px)" href="pc.css"> <link type="text/css" rel="stylesheet" media="only screen and (max-width: 960px)" href="tablet.css"> <link type="text/css" rel="stylesheet" media="only screen and (max-width: 480px)" href="sp.css">
PCは最大表示になるので、min-widthで条件を追加。
タブレットはPCとの境目になるので、max-widthで条件を追加。
スマホはタブレットとの境目になるので、max-widthで条件を追加。
自分が考えるこの場合における記述のメリット・デメリット
メリット | 各ブラウザサイズごとにCSSが分けられるので、可読性が保たれる |
---|---|
デメリット | 変更があった際、編集するファイルがMedia Queriesを設定した数だけ増える |
2.CSS内にMedia Queriesを記述する方法
CSS内で行う場合は、@media screen and ()を使用してブラウザサイズによって切り替えます。
()の中にmax-widthやmin-widthを使用して、読み込む条件を切り分けます。
.responsible { border: solid 1px #333; background-color: #666; color: #FFF; padding: 24px; } @media screen and (max-width: 960px) { .responsible { border: solid 1px #FF9B2D; background-color: #FFB96D; } } @media screen and (max-width: 480px) { .responsible { border: solid 1px #2D5CFF; background-color: #6C8DFF; } }
条件の追加などは1.であげたものと同じです。
自分が考えるこの場合における記述のメリット・デメリット
メリット | 変更があっても、編集するファイルが1つですむ |
---|---|
デメリット | 1つにまとめているので、CSSがビックリするくらい長くなる |
あと、共通して言えることとしたら記述の優先順位でしょうか。
PCサイズから読み込み、タブレットサイズ→スマホサイズと、サイズを狭くしていくのか、逆にスマホサイズ→タブレットサイズ→PCサイズと、サイズを広げていくのかですかね。
経験談的に言うのであれば、最大か最小のサイズをきっちり仕上げてから、徐々にサイズ違いをCSSの上書きで作っていくほうがやりやすいかなと思います。
個人としては1ソースよりも、各ブラウザ(デバイス)ごとのソースが合ったほうが、それぞれに最適なデザインやソースにできるのでやりやすいんですけどね。
[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html
Media Queriesで、画面サイズ別にCSSを切り替える方法
http://allabout.co.jp/gm/gc/396404/