世の中、パソコンからスマホやタブレットに移行している。
従って、WEBサイトもそれに対応しなければならない。
そこで、登場したのがレスポンシブWEBデザインだ。
では、「レスポンシブwebデザイン」とはどういう手法かというと、ブラウザの横幅サイズをwebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調整できる手法だと、とりあえずは言える。
デバイス毎のレイアウトが違うHTMLファイルを複数用意するのではなく、1つのHTMLファイルを、CSS3（Media Queries）で制御し、ブラウザの横幅サイズに応じてページのレイアウトデザインを調整できるようにする技法だ。
いわゆる「リキッドデザイン」と似たような感じだが、違いは、
リキッドデザインはブラウザ横幅サイズに応じて長さは可変するが、レイアウトは同一で要素の表示・非表示ができない。
それに対しレスポンシブwebデザインではブラウザ横幅サイズに応じて、要素の表示・非表示も含めてレイアウトが可変できると言うわけだ。
グーグルでもレスポンシブ化を推奨している。
そこで既存のサイトをレスポンシブ化するにはどうしたらよいか。
これがなかなか大変だ。（簡単に移行できるサイトもある。これは既存のサイトのレイアウトによる。）
実際にやってみたので以下報告する。
１．現在のサイトの修正
まず、スマホ用に作り変える（ここが第一のポイント）。始めから作成するならスマホベースでサイトを作ることだ。
ただ、これは意外と簡単。要するに全て全画面で表示できるようにすればいい。
複雑なレイアウトを避けて、コンテンツが順番に並んでいるサイトを作ればいいのだ。
既存のサイトを修正する場合もすべて全画面で展開する形にする。
これをPCのブラウザで見るとまったくおかしな形に思えるが、ブラウザの横幅を狭めてみればわかりやすくなっていることがわかる。
具体的には２段組や画像の配置との工夫を一切やめる。
もちろん幅は％指定にする。100%指定でかまわない。
メニューはPC用に作っておくが、スマホ用に切り替えることのできる
slicknav
というJqueryのプラグインを使う。（これについては別項で）
２．レスポンシブ化１
次に考えなくてはいけないのは、いわゆるブレイクポイントだ。
これはどの幅で表示を変えるかだ。あまり細かくする必要はない。
ここではいわゆるパッド用とパソコン用を用意する。
いずれにしても先ずはhtmlのヘッダに以下の記述を挿入する。
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
このviewportについてはいろいろと議論があるようだが、こう書いておけば無難なようだ。
width=device-width
はサイトのサイズをデバイスの横幅にフィットさせて表示すると言う設定で、横スクロールが表示されない程度にフィットしてくれる。
initial-scale=1.0
は拡大率のことでデフォルトの要素の拡大率が100%であることを意味している。
その上でcssに以下の記述を追加する。
|
|
@media all and (min-width: 667px) { パッド用の表示設定 } |
|
|
@media all and (min-width: 1024px) { PC用の表示設定 } |
ここの表示設定では追加や変更のみを書けばいい。
３．レスポンシブ化２
ただ、こう書くと簡単なようだが、実際はサイトの表示を確認しながら進めるほかはない。
パッド用の設定では、パッドはある程度幅があるので、画像の配置を変更できる。今回実際に行ったのも、画像の配置と文章の幅の設定変更のみだった。
PC用はかなりの変更をすることになる。実はこれはもともとある形に戻せばいいので、しっかりcssが書かれていれば問題はない。
ただ、ここで面白い現象があった。メディアクエリ内でfloatがうまく動作しないという点だ。一方向的なfloatはいいのだが、左右のfloatが効かないという現象だ。
これについても別項で。
とりあえず。
