1. Web ページの構造を示す要素

これまでに HTML の要素は、

<html>
、
<head>
、
<body>
などの Web ページの基本となる要素や、
<h1>
、
<p>
、
<a>
、
<img>
などの Web ページの内容を表す要素を紹介してきました。

今回は、ヘッダーやフッターなど Web ページの構造を詳しく示す要素について紹介していきます。多くの Web サイトの構造は以下のような領域に分かれており、それぞれの領域を表す HTML 要素があります。

main

<header>
要素
ページやセクションのヘッダーとなる領域。Web サイトのロゴやナビゲーション、検索フォームなどが入る。

<nav>
要素
メニューや目次など、Web ページのナビゲーションになる部分を囲う。

<main>
要素
そのページのメインコンテンツとなる領域を囲う。1 ページで 1 回だけ使用する。

<article>
要素
「article = 記事」なので、その部分のみで 1 つの記事として完結している部分を囲う。

<section>
要素
見出しと本文でできているまとまった内容の部分を囲う。章、節、項など。

<aside>
要素
サイドバーや広告など、メインコンテンツと関係がない部分を囲う。

<footer>
要素
ページやセクションのフッターとなる領域を囲う。サイトマップや、カテゴリーやタグの一覧、コピーライトなどが入る。

演習

以下のような HTML と CSS がある状態から始めます。

index.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <title>タイトル</title>
    <link href="style.css" rel="stylesheet" />
</head>

<body>
    <!-- ここにページの内容を書く -->
</body>

</html>

style.css

@charset "utf-8";

/* ここにページのスタイルを書く */

Step1 全ての要素に box-sizing: border-box;

デフォルトでは

width
と
height
に
padding
と
border
が含まれない設定になっているので、全称セレクタ
*
で全ての要素の設定を変更しておきます。

style.css

* {
    /* 全称セレクタで全ての要素に適用する */
    /* width, height の大きさに border まで含める */
    box-sizing: border-box;
}

info

大きさと余白の関係

デフォルトの状態では、大きさと余白は以下のような関係になっています。実際の要素の横幅は

width
+
padding
+
border
となってしまい、少々扱いづらいです。

box-sizing
プロパティを
border-box
に設定すると、
padding
や
border
を指定していても、要素の横幅は
width
で指定した数値になるので扱いやすくなります。
width
と
padding
や
border
を一緒に指定するときは、この設定も追加しておきましょう。

セレクタ {
  box-sizing: border-box;
}

Step2. デフォルトの余白を消す

デフォルトでは

body
の周りに 8px の余白がついているので、消しておきます。

style.css

body {
    /* デフォルトの余白を消す */
    margin: 0;
}

この時点ではまだ白紙のページです。

Step3 ページの領域を分割する

body
の高さを、最小でもウィンドウと同じ高さにして、
display: flex;
の伸縮機能を使って画面を埋めることができます。Flexboxについてはこの後紹介します。

index.html

<body>
    <header class="header">ヘッダー</header>
    <main class="main">メイン</main>
    <footer class="footer">フッター</footer>
</body>

style.css

body {
    /* デフォルトの余白を消す */
    margin: 0;

    /* 最小でもウィンドウの高さになるように */
    min-height: 100vh;

    /* Flexコンテナ(縦) */
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #ffeeee;
}

.main {
    background-color: #eeffee;

    /* Flexコンテナに余白があれば伸ばす */
    flex-grow: 1;
}

.footer {
    background-color: #eeeeff;
}

01

Step4. 横幅を決めて margin を auto で中央寄せ

ボックスの幅を

100%
にして最大の大きさを設定することで、ウィンドウの横幅が小さいときはウィンドウに合わせて、大きいときは一定の幅以上は広がらないようにします。また、横幅を設定して左右の
margin
を
auto
にすると、要素を中央寄せできます。

index.html

<body>
    <header class="header">
        <div class="header-container">
            ヘッダー
        </div>
    </header>
    <main class="main">
        <div class="main-container">
            メイン
        </div>
    </main>
    <footer class="footer">
        <div class="footer-container">
            フッター
        </div>
    </footer>
</body>

style.css

.header-container {
    /* 中央寄せ */
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem;
}

02

最終的なコード

index.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <title>タイトル</title>
    <link href="style.css" rel="stylesheet" />
</head>

<body>
    <header class="header">
        <div class="header-container">
            ヘッダー
        </div>
    </header>
    <main class="main">
        <div class="main-container">
            メイン
        </div>
    </main>
    <footer class="footer">
        <div class="footer-container">
            フッター
        </div>
    </footer>
</body>

</html>

style.css

@charset "utf-8";

* {
    /* 全称セレクタで全ての要素に適用する */
    /* width, height の大きさに border まで含める */
    box-sizing: border-box;
}

body {
    /* デフォルトの余白を消す */
    margin: 0;

    /* 最小でもウィンドウの高さになるように */
    min-height: 100vh;

    /* Flexコンテナ(縦) */
    display: flex;
    flex-direction: column;
}

/* ヘッダー ------------------------------ */

.header {
    background-color: #eeeeee;
}

.header-container {
    /* 中央寄せ */
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem;
}

/* メイン ------------------------------ */

.main {
    background-color: #ffffff;

    /* Flexコンテナに余白があれば伸ばす */
    flex-grow: 1;
}

.main-container {
    /* 中央寄せ */
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem;
}

/* フッター ------------------------------ */

.footer {
    background-color: #eeeeee;
}

.footer-container {
    /* 中央寄せ */
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem;
}

00

2. display プロパティ

HTML の要素は、基本的に2種類の並び方のどちらかになっています。

縦に積み重なっていく要素はブロック、文章のように横に並んでいく要素はインラインと呼ばれます。

初期設定では、見出しの

h1
や段落の
p
はブロック、リンクの
a
や画像の
img
はインラインです。

CSS で

display
プロパティを設定することで、変更できます。

ブロック

セレクタ {
  /* 縦に積み重なる */
  display: block;
}

インライン

セレクタ {
  /* 文章のように横並びになる */
  display: inline;
}

ブロックとインラインを切り替えることで、並ぶ方向を設定できますが、柔軟にレイアウトするのはなかなか難しいです。自由にレイアウトできるようにフレックスボックス（Flexbox）という機能を紹介します。

3. フレックスボックス（Flexbox）

フレックスボックス（Flexbox）とは、レイアウトを設定するための CSS の機能です。要素を横方向または縦方向に並べるレイアウト方法です。

以下の記事によくまとまっているので、まずはできることを見てみましょう。

日本語対応！CSS Flexbox のチートシートを作ったので配布します | Web クリエイターボックス

フレックスボックス（Flexbox）を使ってみる

Flexbox は 外側の Flexコンテナ と その中身の Flexアイテム でできています。

HTML の要素は基本的に縦に積み重なっていきますが、

display
プロパティに
flex
を指定すると、その要素は Flex コンテナ になり、その要素の中身は Flex アイテム になって横並びになります。

index.html

<div class="container">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
</div>

style.css

.container {
    background-color: #eeeeff;
    padding: 1rem;
    margin-top: 2rem;

    /* Flexコンテナにする */
    display: flex;
}

.item {
    background-color: #0066cc;
    color: #ffffff;
    padding: 1rem;
}

Flexコンテナに設定すること

Flex アイテムが並ぶ方向を変更する

flex-direction
プロパティで、Flex アイテムが並ぶ方向を変更することができます。

row
： 横並び（デフォルト）
column
：縦並び

.container {
    display: flex;

    /* Flexアイテムが並ぶ方向 */
    flex-direction: column;
}

参考）https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

flex

主軸方向と交差軸方向

flex-direction
プロパティで指定した方向は主軸といいます。

flex-direction
プロパティで指定しなかった方向は交差軸といいます。

主軸方向の揃え方を変更する

justify-content
プロパティで、Flex アイテムの主軸方向をどのように整列させるか変更できます。

flex-start
： 始まりに寄せる（デフォルト）
flex-end
： 終わりに寄せる
center
： 中央に寄せる
space-between
： 広がって等間隔で並べる

.container {
  display: flex;

  /* 主軸方向の揃え方 */
  justify-content: space-between; 
}

参考）https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

justify

交差軸方向の揃え方を変更する

align-items
プロパティで、Flex アイテムの交差軸方向をどのように整列させるか変更できます。

stretch
： 親要素の幅いっぱいに伸びる（デフォルト）
flex-start
： 始まりに寄せる
flex-end
： 終わりに寄せる
center
： 中央に寄せる

.container {
  display: flex;

  /* 交差軸方向の揃え方 */
  align-items: center;

  /* 高さ */
  height: 20rem;
}

参考）https://developer.mozilla.org/ja/docs/Web/CSS/align-items

Flex アイテムの間隔を設定する

gap
プロパティで、Flexアイテムの間隔を設定することができます。

.container {
  display: flex;

  /* Flexアイテムの間隔 */
  gap: 2rem;
}

Flex アイテムの折り返しを設定する

flex-wrap
プロパティで、FlexアイテムがFlexコンテナに収まらない場合、折り返すか折り返さないかを設定することができます。Flex アイテムに
flex-basis
プロパティなどで幅や高さが決まっている場合に有効です（後述）。

no-wrap
： 折り返さない（デフォルト）
wrap
：折り返す

.container {
  display: flex;

  /* 折り返しの設定 */
  flex-wrap: wrap;
}

flex2

Flexアイテムに設定すること

Flex アイテムの基本となる大きさ

Flex アイテムは Flex コンテナの大きさによって伸び縮みさせることができますが、

flex-basis
プロパティで基本となる大きさを設定することができます。

デフォルトではコンテンツの大きさに合わせる

auto
が設定されていますが、
px
や
rem
などの単位を使って、基本となる大きさを決めることができます。（基本的には
width
や
height
と同様です。）

.item {
  /* 基本となる大きさ */
  flex-basis: 10rem;
}

参考）https://developer.mozilla.org/ja/docs/Web/CSS/flex-basis

Flex アイテムの伸び縮み

flex-grow
プロパティで、Flex コンテナの余ったスペースに対して、Flex アイテムをどの程度伸ばすか決めることができます。

0
： 伸ばさない（デフォルト）
1
：伸ばす
2以上
： 伸びる要素が複数あったとき、どの程度伸ばすかの比を決める

.item {
    /* 伸ばすかどうか */
    flex-grow: 1;
}

参考）https://developer.mozilla.org/ja/docs/Web/CSS/flex-grow

flex-shrink
プロパティで、Flex コンテナに Flex アイテムが収まらないとき、Flex アイテムをどの程度縮めるか決めることができます。

0
： 縮めない
1
： 縮める（デフォルト）
2以上
： 縮める要素が複数あったとき、どの程度縮めるかの比を決める

.item {
    /* 縮めるかどうか */
    flex-shrink: 0;
}

参考）https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink

参考

flex-grow
と
flex-shrink
、
flex-basis
をまとめて設定する
flex
というプロパティがあります。

.item {
  flex: 1 0 10rem;
}

参考）https://developer.mozilla.org/ja/docs/Web/CSS/flex

発展

以下のようなタイル状のレイアウトも作ることができます。

flex3