CSSレイアウト入門（社内ワークショップ用資料）

本記事では、CSSレイアウトの基礎とレスポンシブレイアウトについて学ぶ事ができます。

利用方法と対象読者層

この記事は社内CSSワークショップのために書かれた記事ですが、教育用途などにご自由にご利用ください。説明に1～1.5時間要します。

対象はHTML, CSSの基礎を知っている方です。div等代表的な要素を知っている、CSSセレクタがわかるレベルを想定しています。

基本的にはMDNの下記の記事を下敷きにしています。内容はなるべく噛み砕き、利用頻度の低い手法は省略しましたが、記載に食い違いがある場合はMDN側を正と考えてください。

developer.mozilla.org

通常フロー

ブラウザはレイアウトの関するCSSが未指定の場合でも、要素を順に並べていく「通常フロー」を行います。 このデフォルトの挙動を理解して活用するようにすると、無駄の少ないCSSを書くことに繋がります。

通常フローは、基本的に文字を書く方向に要素を詰めていきます。日本では上から下、左から右です。

並べ方には、要素の種別が重要になります。代表的な3つを紹介します。

block要素

block要素は、div要素やp要素にデフォルトで設定されている種別です。

inline-block要素

block要素にdisplay: inline-blockを設定することで、この挙動をさせることができます。 また、img要素はこのinline-block要素相当の挙動をするとみなせます（歴史的経緯によりこの言い方になります）。

inline要素

サンプルで試してみる

サンプルを開く

サンプルを開いて、displayオプションのコメントアウト部分を切り替えて、説明通りの挙動になっているか確認してみてください。

flexbox

flexboxは、伸縮するレイアウトを作る際によく使われるレイアウト方法です。

通常フローで作れないレイアウトは、大抵これで作ることができます（テーブルのような特殊なレイアウトを除く）。 （より高度なレイアウトをスマートに作るには「gridレイアウト」を使うこともできます）

例題

例題を開く

上記のコードを編集して、下記の画像のようなレイアウトを作ってみてください。

ヒント：下記の３行を使います。

display: flex;
width: 200px;
flex: 1;

position: absolute

上記のレイアウトから少し外れたようなレイアウトは「position: absolute」で作ることができます。

基準指定した要素から相対位置でボックスを配置することができます。大抵のケースでは親要素を基準にします。親要素に「position: relative」を指定してください。

例えば、下記のように左上にタグを貼り付けたようなレイアウトを作ることができます。

サンプルを開く

なお、absolute指定した要素に続く要素は下に潜りこむことに注意してください。

レスポンシブレイアウト

レスポンシブレイアウトは、画面サイズに応じてレイアウトを切り替える手法です。例えば下記のようにスマホとデスクトップで段組みを切り替えるのがよくある例です。

これはメディアクエリを使うことでCSSのみで実現可能です。 試しに、下記のようなレイアウトを作ってみましょう。

例題を開く

例題はスマホレイアウトのみ実装してありますので、600px以上はレイアウトを変更するようにしてください。メディアクエリは下記のように書きます。

@media screen and (min-width: 600px) {
  <!-- ここに上書きしたいCSSを書く -->
}

メディアクエリのmin-widthを使うことで、閾値以上の画面幅の場合に上書き適用するCSSを設定します。CSSは基本的に後勝ちになりますので、メディアクエリはCSSの末尾に書くようにしてください。

• .parentに display: flex; を適用
• .boxの背景色を変更し、flex: 1とmargin: 5px;を指定する

回答例

上記の方針はモバイルファーストアプローチと呼びます。まずスマホ向けの画面を作り、デスクトップ向けの段組み等を使った複雑なレイアウトをメディアクエリで後付します。

スマホ向けレイアウトは通常フローで済むケースも多いため、デスクトップ向けの画面を特殊扱いしたほうが、デフォルト値を活用したクリーンなコードになりやすいです。

まとめ

上記までで、基本的なレイアウトとレスポンシブレイアウト実装の基礎を学びました。より詳しいことを知りたい場合はMDNの記事を参照してください。