レスポンシブデザインのやり方(基本その1)

2017.1.4 (水)

難しい話はさておいて、cssでviewポートと呼ばれる解像度の出力ができるようになったことから、スマホやPCのデザインを一枚のCSSで書くことができるようになりました。現実問題として2012年現在では普通にスマホ用とPC用のHTMLをかき分けた方が開発としても安定しているし工数も節約できます。が、時代の流れかどうかはわかりませんがアホな人々はこういう派手なアクションを好むというのもあって仕方なくやっている感じです。今一度いいますが、特にこれが優れたかっちょいい技術でもなんでもないんですよ。皆さん。
まずはHTMLのmetaタグにこれを入れます。

<meta name="viewport" content="width=device-width,initial-scale=1">

viewportの幅をデバイスによって読み分けるという動作の宣言です。
次にCSSでそれぞれのviewportをかき分けます。

@import url("http://www.example.com/blog/common/css/pc.css") screen and (min-width:769px);
@import url("http://www.example.com/blog/common/css/pad.css") screen and (min-width:681px) and (max-width: 768px);
@import url("http://www.example.com/blog/common/css/sp.css") screen and (min-width:320px) and (max-width: 680px);

人それぞれ設定が違うと思うのですが、僕の周りの優秀なデザイナーさんはスマホのデザインを680px幅でやります。その方が解像度がいいし安定しています。上記はスマホ、タブレット、PCというようにわけています。それぞれの3枚のCSSにそれぞれのデザインを組み込んでゆくだけで終わりです。
私の場合は、base.cssをおいて全体に共通のデザインを施します。

@import url("http://www.example.com/blog/common/css/base.css");
@import url("http://www.example.com/blog/common/css/pc.css") screen and (min-width:769px);
@import url("http://www.example.com/blog/common/css/pad.css") screen and (min-width:681px) and (max-width: 768px);
@import url("http://www.example.com/blog/common/css/sp.css") screen and (min-width:320px) and (max-width: 680px);

リキッドデザイン

基本的にレスポンシブデザインは、pxではなく%ですべてを設定します。で、厄介なのが画像です。画像は本来pxで大きさが決まっているので%表示させるとむかしのブラウザー何かは画像の解像度が落ちます。そのこと覚悟で%表示をするのですが、基本的には、

#alpha img {
    width:100%;
    max-width: 450px;
}

というような設定でもって、画像の最大幅を設定してあげます。これでviewportに対応してくれる感じになります。凝ったやり方はたくさんあって、それぞれのディバイス向けにそれぞれの画像の大きさを作って設定するとか、jQueryで画像の幅をレスポンシブに調整してやるとか、そんなところででしょうか。たったこれだけといえばこれだけ。