Tsumiki

コース目次 / 第4章

レイアウト

ヘッダーを付けて、「好きなもの」をカード3枚の横並びにします。

目安 約60分この章のゴール: ヘッダーとカード3枚横並びの、いまどきの見た目になる

この章はコース1でいちばん難しい章です。 書く量も多いです。ぜんぶ理解できなくてかまいません。並べば合格だと思って進めてください。分からないまま先に進んでも、あとの章で困ることはありません。

今日のゴール

いまは、すべての要素がページの左端から縦一列に並んでいます。この章が終わると、上に緑のヘッダーが乗り、「好きなもの」がカード3枚の横並びになり、いちばん下にフッターが付きます。

ミニ解説その1: 箱で囲む

いままでは見出しや段落を、そのまま順番に置いていました。並べ方を変えるには、まず 箱で囲んでグループにする 必要があります。

箱に使うタグは2種類です。

タグ 意味
<div> 意味のない箱。ただグループにしたいときに使う
<header> / <main> / <footer> 意味のある箱。「ここは見出し部分」「ここが本体」「ここは末尾」

今回作る箱の形はこうです。文章より図のほうが分かりやすいので、まずこれを眺めてください。

body
├── header .site-header        ← 緑の帯。サイト名とナビ
├── main .container            ← 本体。横幅を制限する箱
│   ├── section .about         ← アイコンと自己紹介
│   ├── section #likes
│   │   └── div .cards         ← ★この箱が「横に並べる」係
│   │       ├── div .card
│   │       ├── div .card
│   │       └── div .card
│   ├── section #hobby
│   └── section #links
└── footer .site-footer        ← 下の帯

section(セクション) は「ここからここまでが1つのまとまり」という箱です。div とほぼ同じですが、意味のあるまとまりに使います。

ミニ解説その2: 横に並べる(Flexbox)

箱で囲んだら、横に並べます。使うのは Flexbox(フレックスボックス) という仕組みです。

やることは1つだけ。並べたい子たちの「親」に display: flex; と書く。 それだけで、中身が横一列になります。

.cards {
  display: flex;   /* 中身を横に並べる */
  gap: 16px;       /* 並んだもののあいだの隙間 */
}

gap(ギャップ)は隙間の幅です。あわせて、ヘッダーでは justify-content(ジャスティファイコンテント)も使います。これは「横方向のどこに寄せるか」の指定で、space-between にすると 左端と右端に離して置く という意味になります。サイト名を左、ナビを右に置きたいので、これを使います。

カードの flex: 1; は「余ったぶんを等しく分け合う」という意味です。3枚が同じ幅になります。

書き写すその1: HTML を箱で囲みなおす

いちばん量が多いところです。上から順に、あわてず書き写してください。 中身の文章はいままでと同じで、まわりに箱が増えただけです。

index.html+49 / -17
   <body>-  <h1>こんにちは、はるとです</h1>-  <img class="icon" src="images/icon.png" alt="はるとのアイコン" />-  <p class="intro">カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>+  <header class="site-header">+    <p class="site-name">はるとの記録</p>+    <nav class="nav">+      <a href="#likes">好きなもの</a>+      <a href="#hobby">趣味</a>+      <a href="#links">リンク</a>+    </nav>+  </header>  -  <!-- 好きなものを3つならべる -->-  <h2>好きなもの</h2>-  <ul>-    <li>カメラ</li>-    <li>旅行</li>-    <li>コーヒー</li>-  </ul>+  <main class="container">+    <section class="about">+      <img class="icon" src="images/icon.png" alt="はるとのアイコン" />+      <h1>こんにちは、はるとです</h1>+      <p class="intro">カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>+    </section>  -  <h2>趣味</h2>-  <p>休みの日はカメラを持って歩いています。朝いちばんの光がいちばん好きで、そのために早起きするようになりました。去年は瀬戸内の島を何日かかけてまわりました。</p>+    <!-- 好きなものを3つならべる -->+    <section id="likes">+      <h2>好きなもの</h2>+      <div class="cards">+        <div class="card">+          <h3>カメラ</h3>+          <p>古いフィルムのカメラを1台だけ使っています。</p>+        </div>+        <div class="card">+          <h3>旅行</h3>+          <p>電車で行ける小さな町を歩くのが好きです。</p>+        </div>+        <div class="card">+          <h3>コーヒー</h3>+          <p>旅先で豆を買って帰るのが習慣になりました。</p>+        </div>+      </div>+    </section>  -  <h2>リンク</h2>-  <ul>-    <li><a href="https://www.flickr.com/">写真を見るのに使っているサイト</a></li>-    <li><a href="https://www.jnto.go.jp/">旅行の下調べに使っているサイト</a></li>-  </ul>+    <section id="hobby">+      <h2>趣味</h2>+      <p>休みの日はカメラを持って歩いています。朝いちばんの光がいちばん好きで、そのために早起きするようになりました。去年は瀬戸内の島を何日かかけてまわりました。</p>+    </section>+ +    <section id="links">+      <h2>リンク</h2>+      <ul>+        <li><a href="https://www.flickr.com/">写真を見るのに使っているサイト</a></li>+        <li><a href="https://www.jnto.go.jp/">旅行の下調べに使っているサイト</a></li>+      </ul>+    </section>+  </main>+ +  <footer class="site-footer">+    <p>はるとの記録</p>+  </footer> </body>

書き終わったファイル全体です。迷ったらこちらと見比べてください。

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>はるとの記録</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="site-header">
      <p class="site-name">はるとの記録</p>
      <nav class="nav">
        <a href="#likes">好きなもの</a>
        <a href="#hobby">趣味</a>
        <a href="#links">リンク</a>
      </nav>
    </header>

    <main class="container">
      <section class="about">
        <img class="icon" src="images/icon.png" alt="はるとのアイコン" />
        <h1>こんにちは、はるとです</h1>
        <p class="intro">カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>
      </section>

      <!-- 好きなものを3つならべる -->
      <section id="likes">
        <h2>好きなもの</h2>
        <div class="cards">
          <div class="card">
            <h3>カメラ</h3>
            <p>古いフィルムのカメラを1台だけ使っています。</p>
          </div>
          <div class="card">
            <h3>旅行</h3>
            <p>電車で行ける小さな町を歩くのが好きです。</p>
          </div>
          <div class="card">
            <h3>コーヒー</h3>
            <p>旅先で豆を買って帰るのが習慣になりました。</p>
          </div>
        </div>
      </section>

      <section id="hobby">
        <h2>趣味</h2>
        <p>休みの日はカメラを持って歩いています。朝いちばんの光がいちばん好きで、そのために早起きするようになりました。去年は瀬戸内の島を何日かかけてまわりました。</p>
      </section>

      <section id="links">
        <h2>リンク</h2>
        <ul>
          <li><a href="https://www.flickr.com/">写真を見るのに使っているサイト</a></li>
          <li><a href="https://www.jnto.go.jp/">旅行の下調べに使っているサイト</a></li>
        </ul>
      </section>
    </main>

    <footer class="site-footer">
      <p>はるとの記録</p>
    </footer>
  </body>
</html>

ここで一度保存してリロードしてみてください。まだ横には並びません。 見た目もいったん崩れます。箱で囲んだだけで、並べる指示はまだ書いていないからです。次でCSSを書けば直ります。

書き写すその2: CSS で並べる

style.css の body の padding を 0 に変えてから、ファイルの末尾に追加します。

style.css+1 / -1
   line-height: 1.8; margin: 0;-padding: 24px;+padding: 0; }
style.css+72 / -0
   width: 120px; }+ +.site-header {+display: flex;+justify-content: space-between;+align-items: center;+gap: 16px;+background-color: #4a6b57;+color: #fbfaf7;+padding: 16px 24px;+}+ +.site-name {+margin: 0;+font-weight: 700;+}+ +.nav {+display: flex;+gap: 16px;+}+ +.nav a {+color: #fbfaf7;+}+ +.container {+max-width: 720px;+margin: 0 auto;+padding: 0 24px 48px;+}+ +.about {+text-align: center;+padding-top: 32px;+}+ +.cards {+display: flex;+gap: 16px;+}+ +.card {+flex: 1;+background-color: #ffffff;+border-radius: 12px;+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);+padding: 16px 20px;+}+ +.card h3 {+margin: 0 0 4px;+color: #4a6b57;+font-size: 16px;+}+ +.card p {+margin: 0;+color: #6b665f;+font-size: 14px;+}+ +.site-footer {+background-color: #e8e4db;+text-align: center;+padding: 24px;+}+ +.site-footer p {+margin: 0;+color: #6b665f;+font-size: 14px;+}

書き終わった style.css の全体です。

style.css
body {
  background-color: #fbfaf7;
  color: #33312e;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  padding: 0;
}

h1 {
  color: #4a6b57;
  font-size: 28px;
  margin-bottom: 8px;
}

h2 {
  color: #4a6b57;
  font-size: 20px;
  margin-top: 40px;
}

a {
  color: #b4703a;
}

.intro {
  color: #6b665f;
}

.icon {
  width: 120px;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background-color: #4a6b57;
  color: #fbfaf7;
  padding: 16px 24px;
}

.site-name {
  margin: 0;
  font-weight: 700;
}

.nav {
  display: flex;
  gap: 16px;
}

.nav a {
  color: #fbfaf7;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.about {
  text-align: center;
  padding-top: 32px;
}

.cards {
  display: flex;
  gap: 16px;
}

.card {
  flex: 1;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px 20px;
}

.card h3 {
  margin: 0 0 4px;
  color: #4a6b57;
  font-size: 16px;
}

.card p {
  margin: 0;
  color: #6b665f;
  font-size: 14px;
}

.site-footer {
  background-color: #e8e4db;
  text-align: center;
  padding: 24px;
}

.site-footer p {
  margin: 0;
  color: #6b665f;
  font-size: 14px;
}

保存してリロードしてください。カードが3枚、横に並んでいれば成功です。並んだ時点でこの章は合格です。

あなたの番

  • カード3枚の中身 を、自分の好きなもの3つに書き換えてください。<h3> が名前、<p> が一言説明です。
  • 影と角丸 の数字をいじってみてください。.card の border-radius: 12px; を 24px にすると丸くなり、0 にすると四角くなります。box-shadow の3つ目の数字(8px)を大きくすると影がぼんやり広がります。壊れても数字を戻せば元どおりなので、遠慮なく試してください。
  • ヘッダーのサイト名 を自分のサイト名にしてください。

カードを4枚にしたい人は、<div class="card"> から </div> までをまるごとコピーして貼り付ければ増えます。

うまくいかないときは

カードが横に並ばない

.cards(複数形)と .card(単数形)を取り違えていることがほとんどです。display: flex; を書くのは、外側の .cards のほうです。1文字違いなので、よく見てください。

div の閉じタグが分からなくなった

箱が入れ子になると、どの </div> がどれと対応しているか分からなくなります。2つの小技があります。

  1. VS Code で開きタグをクリックすると、対応する閉じタグがうっすら光ります。
  2. 字下げ(インデント)をそろえる。同じ深さの箱は、同じ位置から始まるようにします。ずれていたら、それが迷子のサインです。

どうしても直らないときは、このページの下のZIPをダウンロードして index.html を丸ごと置き換えてください。5分試してダメなら、それが正解の進め方です。

ヘッダーが緑にならない

HTML 側が class="site-header"、CSS 側が .site-header になっているか確認してください。site_header(アンダースコア)ではなく、site-header(ハイフン)です。

こうなっていればOK

うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。

この章はまだ完了していません。