レスポンシブWebデザイン

メディアクエリを活用し、画面サイズに応じてレイアウトを変化させる手法のことをレスポンシブWebデザインといいます。メディアクエリは、簡単に説明すると「条件付きのCSS」と考えることができます。レスポンシブWebデザインでは、「画面の幅」を条件にした書式指定でレイウアトを変化させるのが一般的です。

グリッドシステム

ページ内を縦方向に等分割した「グリッド線」を基準にして、コンテンツを配置していく手法のことをグリッドシステムといいます。グリッドシステムでは、各コンテンツを「何列分の幅で配置するか？」を指定するのが一般的です。今回の例では、2等分、3等分、4等分の幅でコンテンツを配置する簡易的なグリッドシステムを自作しています。

2段組のレイアウト

こちらは2段組のレイアウトで配置した本文です。グリッドシステムを活用すると、多段組のレイアウトを簡単に作成できます。もちろん、レスポンシブWebデザインのレイアウト指定にもグリッドシステムを活用できます。

4段組と2段組のレイアウト

以下の画像は、画面サイズに応じて段数が変化します。大画面または中画面で見た場合は4段組、小画面で見た場合は2段組で画像が表示されます。