三本線のボタンを作る（CSSのみ）

このレッスンでは、押すと「×」に変わる三本線のボタンをCSSだけで作ります。まだメニューは出てきません。ボタンの形と動きだけに集中しましょう。

しくみ：チェックボックスを「スイッチ」にする

CSSには「クリックされたら」という命令がありません。そこでチェックボックスを使います。チェックボックスは、押すたびにチェックが入ったり外れたりしますね。このチェックが入っているかどうかを合図（トリガー）にして、見た目を切り替えます。

手順1：チェックボックスとlabelを用意する

まず、チェックボックスと、その「ラベル」を作ります。input の id と、label の for に同じ名前を付けるのがポイントです。こうすると、ラベルを押してもチェックボックスのON・OFFが切り替わります。

<header class="header">
  <a class="logo" href="#">Sample Cafe</a>
  <input type="checkbox" id="menu-btn">
  <label for="menu-btn" class="menu-toggle">ボタン</label>
</header>

ブラウザで「ボタン」の文字を押してみましょう。チェックボックスにチェックが入ったり外れたりすれば成功です。

手順2：ラベルの中身を三本線にする

「ボタン」の文字の代わりに、span を3つ入れます。この3つの span を、CSSで横線にしていきます。

  <header class="header">
    <a class="logo" href="#">Sample Cafe</a>
    <input type="checkbox" id="menu-btn">
    <label for="menu-btn" class="menu-toggle">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </header>

/* ---- 三本線のボタン ---- */
.menu-toggle {
  display: flex;
  flex-direction: column;     /* spanを縦に並べる */
  gap: 8px;                   /* 線と線の間隔 */
  padding: 10px;
  cursor: pointer;            /* 指のカーソルにする */
}
.menu-toggle span {
  display: block;
  width: 32px;
  height: 4px;
  background: #333;
  border-radius: 4px;         /* 線の端を丸める */
  transition: transform .3s, opacity .3s;
}

span は、そのままでは幅も高さもありません。display: block にして幅と高さ、背景色を付けると、1本の横線になります。親の .menu-toggle を display: flex と flex-direction: column にして、3本を縦に並べます。

手順3：チェックボックス本体を隠す

チェックボックスが見えていると邪魔なので、display: none で隠します。

#menu-btn {
  display: none;              /* チェックボックス本体は隠す */
}

【ポイント】見えなくても、ちゃんと動いています
チェックボックスは隠しただけです。ラベル（三本線）を押せば、見えないところでチェックが入ったり外れたりしています。

手順4：チェックが入ったら「×」にする

最後に、チェックが入ったときの見た目を書きます。1本目と3本目を45度ずつ傾けて交差させ、2本目は消します。

/* ---- チェックが入ったら「×」にする ---- */
#menu-btn:checked ~ .menu-toggle span:nth-of-type(1) {
  transform: translateY(12px) rotate(45deg);    /* 下へ12px動かして45度回す */
}
#menu-btn:checked ~ .menu-toggle span:nth-of-type(2) {
  opacity: 0;                                   /* まん中の線は消す */
}
#menu-btn:checked ~ .menu-toggle span:nth-of-type(3) {
  transform: translateY(-12px) rotate(-45deg);  /* 上へ12px動かして-45度回す */
}

#menu-btn:checked ～ .menu-toggle の読み方

:checked … チェックボックスやラジオボタンにチェックが入っている状態を表す疑似クラスです。
~（チルダ）… 後ろにある兄弟要素を指定します。

つまり #menu-btn:checked ~ .menu-toggle は、「#menu-btn にチェックが入ったら、その後ろにある兄弟の .menu-toggle にスタイルを当てる」という意味になります。

12pxの理由

線の高さは4px、線と線の間隔は8pxなので、1本目と2本目の中心は 4px + 8px = 12px 離れています。1本目を12px下げ、3本目を12px上げると、3本がまん中の位置で重なります。そこで回転させると、きれいな「×」になります。線の太さや間隔を変えたら、この数字も合わせて変えましょう。

【つまずきやすいところ】input は label より前に書く
~ は「後ろにある」兄弟にしか届きません。input を label より後ろに書くと、チェックを入れても何も起きません。

【ひとこと】transition で動きをなめらかに
span に transition: transform .3s, opacity .3s を書いておくと、三本線から×へ0.3秒かけて変わります。数字を変えて、ちょうどよい速さを探してみましょう。

まとめ

CSSだけで切り替えを作るときは、チェックボックスのON・OFFを合図にする
input の id と label の for を同じ名前にする
:checked ~ で「チェックが入ったら、後ろの兄弟に」スタイルを当てる
transform で線を移動・回転させて「×」を作る

次のレッスンでは、このボタンでメニューを出したり隠したりします。