レスポンシブデザイン基礎2
レスポンシブWebデザイン(RWD)の制作
レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。
レスポンシブWebデザインは、主に「フルードグリッド(Fluid Grid)」「フルードイメージ(Fluid Image)」「メディアクエリー(Media Query)」の3つの技術的な要素で構成されます。
●フルードグリッド
フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン(Fluid Design)」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を%に変換してフルードデザインに変更します。
●フルードイメージ
フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。イギリスのコンサルティングファームClearleftのリチャード・ルター(Richard Rutter)氏によって提唱されました。
●メディアクエリー
メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。
●ブレイクポイント
ブレイクポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。
メディアクエリーを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント(Break Point)」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。
ブレイクポイントは決まった数や値がある訳ではありません。
例えばBootstrap3ではブレイクポインが4つあり、
1200px以上がPC(大画面)用
1199px~992pxがPC用
991px~768pxがタブレット用
767px以下がスマホ用
に分かれていましたが、
バージョンアップしたBootstrap4ではブレイクポイントが5つあり、
1200px以上がPC(大画面)用
1199px~992pxがPC用
991px~768pxがタブレット用
767px~544pxがスマホ用
543px以下がスマホ(小さいサイズ)用
に分かれました。これによって例えばiPhone 5, 6のポートレート/ランドスケープ時に、表示を切り替えることができるようになり、より柔軟にモバイル最適化が行えるようになりました。
今回のブレイクポイントは
PCサイズ 960px以上
タブレットサイズ 768px~959px
スマートフォンサイズ 767px以下
ブレイクポイントは絶対的に決まった数値ではなく、その時々の要件や主要のデバイスサイズによって変わっていくので、数字を暗記するのではなく、意味を理解する必要があります。