レスポンシブデザインのコーディングが難しくて、基本的なところはおさえておこうと思ったエンジニアの北畠です。
まず、レスポンシブデザインとは？
単一のWebページ（HTML）を使い、スクリーンサイズを基準にCSSを切り替えてレイアウトを調整する技術を使ったデザインです。
いつから始まったか？
2010年に イーサンマルコッテさんが記事を書いて広まったらしいです。
概要としては、
- 多様なデバイスが登場している。
それぞれのデバイスに合わせてコンテンツを作っていくのはかなり大変。
デバイスの仕様に合わせてレイアウトを調整する技術がある。
- CSS2でもあったけど、CSS3から実用レベルで使えるようになっている。
CSS2のmedia typeは、デバイスの対応状況が悪かったりで、実用できるレベルではなかったようです。
レスポンシブ周りの技術として、
- CSS3から使えるようになった media query
- 画像の取扱（fruid, responsive）
- グリッドレイアウト
あたりが重要な所とされています。 それぞれ見ていきましょう。
media query
CSS3から実装された、デバイスの表示幅などに応じて、読み込むスタイルシートを切り替えるものです。
linkタグにも書けるし、cssにも直接書けます。
linkタグに書くケース
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
CSSに直接書くケース
@media (min-width: 700px) { ... } @media (min-width: 700px) and (orientation: landscape) { ... }
詳しくは、
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN
にかなり細かく説明されています。
画像の扱いについて
fruid image
画像をコンテンツ幅に応じて収縮させたい場合に使う技術.
imageにwidth: 100% を指定すれば実現できます。
そのままですね。
responsive image
スクリーンサイズに応じた、適切なサイズの画像を読み込む技術.
media queryとbackgroundイメージの組み合わせで実現できます。
例えば、PC用、スマホ用の画像をそれぞれ用意して、768px以下のデバイス幅の場合スマホ用の画像を読み込ませたい場合は下記のような指定をすれば実現できます。
div { background: url(background.png) top center no-repeat gray; } @media screen and (max-width: 768px) { div { background: url(background_mobile.png) top center no-repeat gray; } }
また、background-sizeプロパティを使うことで、背景画像の表示方法を調整できます。
background-size - CSS: カスケーディングスタイルシート | MDN
各デバイス幅ごとに細かく指定すると、少ない画像でもいい感じに調整できそうですね。
グリッドレイアウト
間隔や幅に規則性を持たせることができるもので、 おなじみのBootstrapでは、全体を12列に分割して、各デバイス幅ごとに要素に何列分割り当てるか指定することで、レスポンシブなグリッドレイアウトが実現できます。
デバイス幅の一定の間隔でいくつかブレークポイントが用意されていて、それぞれのブレークポイントごとに応じた指定を、
col-{ブレークポイント名}-{列数} という書き方で指定できます。
詳しくは、
Bootstrapのバージョン4では、flexboxを採用していて、グリッドレイアウトの仕様もかなり変わっているようです。 指定方法がかなりシンプルになっています。
おわりに
レスポンシブデザイン周りの技術、全然キャッチアップできていなくてかなり苦手意識があったのですが、調べてみると技術的に重要な要素はそれほど多くなくて、割りとシンプルな気がしました。
ただ1つのhtmlで複数デバイスに最適化したデザインを実現すること自体は、以前のようなPC向けの幅決め打ちのデザインと比べてかなり複雑で、しっかり作り込もうとするとかなり大変になるなぁという印象は変わりません。がんばっていきましょう。