レスポンシブウェブデザインとやらをやってみると、色々気をつけなければならない事が出てきたので、少し紹介。
今回、デルタ浜松支部さんのサイトをレスポンシブウェブデザインで構築した。
●デスクトップ表示
●タブレット表示
●スマートフォン表示
ウェブサイト：総合探偵社デルタ浜松支部
●ポイント１ UAで切り替えるのではなく、画面サイズで切り替える
JSやPHPでUAを調べCSSを切り替えたり表示するhtmlを切り替えてたりするのではなく、CSSのメディアタイプを使って表示を切り替えると、よりスマートなサイトになる。
@media screen and (max-width: 768px) { タブレット専用のスタイル }
@media screen and (max-width:640px) { スマートフォン専用のスタイル }
スクリーンサイズが768px以下の場合タブレット表示。640px以下の場合スマートフォン表示にする。
デザインする際に、そこまで考えて作る必要があるが、まあ最悪なんとかなる。
まず、タブレット、スマートフォンを意識しつつ、デスクトップ表示をCSSでデザインすることから始まる。
次に、プレビューブラウザを768px以下に縮めて、上記のメディアタイプをデスクトップ用CSSの下に書き加えていく。
●ポイント２ 幅は％表示に書き換えていくと美しく出来上がる。
タブレットやスマートフォンは機種によって解像度（幅）は様々である。
常に％で作ることで、機種によって見え方が違うことはなく、美しく出来上がる。
また、タブレット、スマートフォン向けにmeta要素に name=”viewport” を追加し、文書の表示領域を設定する必要があるので忘れずに。
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, ">
●ポイント３ IE対応のコツ
なんといっても厄介なIE。
今ではおなじみの方法で、これらを回避しよう。
<!--[if lt IE 7]> <html lang="ja" class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html lang="ja" class="lt-ie9> <![endif]--> <!--[if IE 8]> <html lang="ja" class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="ja"> <!--<![endif]-->
今回使ったのは、ナビ周りのアイコン達。通常サイズでは、解像度の高いタブレットやスマートフォンでは、ぼけてしまうので、2倍のサイズのアイコンを用意した。すると、IE8以下ではCSSのbackground-sizeが無視され、2倍のサイズで表示されてしまう。そこで、IE8以下用に通常サイズのアイコンを用意してCSSで切り替える。
.lt-ie9 #home a {background-image: url(IE用の通常サイズアイコン画像);}
#home a {background-image: url(2倍サイズのアイコン画像); background-size:50% auto;}
といった感じ。
お試しあれ。
