レスポンシブデザイン

bootstrapが2.0で対応したレスポンシブデザイン。どの様なものか、調べてみた。

最近のウェブサイトのデザインは、PC、タブレットPC、スマートフォン、ガラケー、と数多くのデバイスで表示されることを想定する必要がある。

昔はユーザーエイジェントでサイトデザインを切り分けたり、そもそもURLが別だったりするのが一般的だったけど、今はじょじょに画面解像度を見てレイアウトを変更する手法が主流になりつつあるらしい。ただしメリットもデメリットもある様なので全面的にレスポンシブデザインに移行するとは考えにくい。

仕組みの簡単な説明

一昔前から目にすることのあった、Media typesの拡張。Media typesでは「モニター出力用スタイルシート」「印刷用スタイルシート」といった切り替えが行われていた。

 
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

@media screen {
  * { font-family: sans-serif }
}

@media print {
  * { font-family: serif }
}

CSS3ではタイプでは無く解像度などで細かく指定できるようになっていて、Media Queriesという名称に変わった。

例）400ピクセル以上700ピクセル以下の幅を持つPCモニター出力の場合この設定

@media screen and (min-width: 400px) and (max-width: 700px) {
    background-color: #ff8888;
}

条件は複数マッチさせることも出来るけど、多少の重複は許してきっちり分けちゃった方が管理し易そう。

@media screen and (min-width: 400px) { 
    background-color: #ff8888;
}
@media screen and (min-width: 700px) {
    font-size: 1.2em;
}

InternetExplorer

respond.jsというスクリプトを使うとIE8以下のCSS3に対応していないブラウザでもメディアクエリーが使えるようになります。headタグの一番最後にscriptタグで読み込み指定しましょう。

メリットとデメリット

理想論だけど、仕様をある程度理解した上で感じた印象。

• メリット
• 見た目の切り替えを全てCSSの中で行うので、サーバーサイドの処理の切り替えが必要ない。つまりサーバーサイドスクリプトのメンテナンスコストが下がる
• デバイスの解像度を見て自動的に切り替わるので、未知のデバイスにも対応できる。
• デメリット
• PC向けもガラケー向けも同じだけの通信量が発生する。むしろ両方のデータが渡される訳だから増える傾向にある。
• CSS自体のメンテナンスコストは上がると思う。

今後はスマートフォンでも高解像度化は進むし、通信回線はwi-fiになるから通信料なんて気にしなくていいでしょ！みたいな軽いノリを感じる。

サンプル

一つのhtmlで、PC、タブレットPC、スマートフォンの対応を行うサンプルをgistに上げた。test.htmlをブラウザで開き、ウインドウサイズをじょじょに小さくしていくとレイアウトが変わって行く様子を確認できます。見た目悪いけど、分かり易さ重視で。

• iPad横向き（768px）以上はPCと同じ扱い。タイトルとメニューは位置固定。
  
• iPad横向き(768px)未満まではちょっとだけ画面が狭いのでメニューを画面上部に移動。ただし位置は固定。
  
• iPhone横向き(480px)までは縦に羅列。フォントはやや小さく。
  

最後にソースをベタッと。CSSはlessで書いてます。