上下の空きスペースを調整する

コンテナに適用する基本的な CSS を追加した

コンテナの上下にスペースを設ける場合の CSS を追加する

コンテナの上下にスペースを作る

デザインによっては、コンテナの上下にスペースを作る必要がある

メインコンテナの上下スペース設定

• 背景画像を除くとメインコンテナに含まれる最初のコンテンツは、そのページの見出しになる
• 見出しの位置は、PC レイアウト、モバイルレイアウト共に、メインコンテナの一番上から 80px 下がったところにある
• コンテナ上部にスペースを作ることになる

• 60px のスペースが空いている
• コンテナの下部にスペースを作る
• 中身のコンテンツにスペースを作る
• どちらにスペースを入れるかは随意
• メインコンテナに含まれる他のコンテンツを見て考えるのも方法

コンテンツとコンテンツの間が 60px になっている

コンテナに含まれるコンテンツはモジュール単位で作成・管理する

モジュールの上下に統一的に 60px のスペースを設ける

使い回しの効くソースコードになると考えられる

コンテナの上下スペースは子要素のパディングを設定

コンテナの上下にスペースを作る時は、コンテナ HTML セットの子要素に、上下パディングを設定する

既に設定している左右パディングと合わせて設定することになる

ほかのコンテナの上下スペースも設定

コンテナの上下にスペースを作る時には、コンテナ HTML セットの子要素の方に、上下パディングを設定する

コンテナの上下パディング

• ヘッダーコンテナ 上: 0、下: 0
• パンくずリストコンテナ 上: 12px、下: 12px
• メインコンテナ 上: 80px、下: 0px
• ページ下部コンテナ 上: 60px、下: 0px
• フッターコンテナ 上: 60px、下: 60px

Column

何もないところが重要

HTML/CSS コーディングをする際に軽視されたちなのが「スペースの空き具合」

• 行と行の間の空いているスペース（行間）
• 見出しの前後に空いているスペース
• 線で囲まれたボックスの上下左右に空いているスペース
• 背景画像と次のコンテンツとの間に空いているスペース

このようなスペースは、なにもない空白地帯に見えるが、重要な役割を持っている

スペースがあることで、読みやすくなったり、写真が際立ったり、ページ全体の統一感が生まれたりといった効果がある

Web デザインの場合は、コンテンツの上下のマージンやパディングが重要になる

コンテナやモジュールに分割する齋彌、分割後にコーディングする際は空きスペースに注意を払うことが肝要

テンプレートファイル