完成イメージ
📁 作成ファイル・保存場所
css-practice フォルダを作成し、以下のファイルを用意してください。
| ファイル名 | 内容 |
|---|---|
hamburger-menu.html | ハンバーガーメニュー用のHTMLファイル |
hamburger-menu.css | CSSアニメーション用のスタイルシートファイル |
HTMLは下記からコピーして使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ハンバーガーメニュー（CSS）</title>
<link rel="stylesheet" href="hamburger-menu.css" />
</head>
<body>
<div class="hamburger">
<span class="bar bar-top"></span>
<span class="bar bar-middle"></span>
<span class="bar bar-bottom"></span>
</div>
</body>
</html>
解説（補足）
.hamburgerがメニュー全体の親要素です。.barは横線1本を表す要素。3本を.bar-top/.bar-middle/.bar-bottomとして分けています。
👉 HTMLファイルとCSSファイルは <link> タグで連携させましょう。
目的
- CSSのみでハンバーガーメニューのアニメーション変形を実現する
transform,transition,hoverを用いた動きの基礎を理解する- HTMLの構造とCSSの設計を連携して動きを作る練習をする
チェックポイント
- 三本線を
divやspanで構成できているか hoverや:checkedを使って「×（バツ）」に変形できているかtransitionを使ってなめらかな変化になっているかtransform: rotate()などで線を回転・非表示にできているか- クラス設計が整理されていて再利用しやすいスタイルになっているか
トレーニングスタート！
次は hamburger-menu.css を作成し、三本線が hover で × に変形するCSSアニメーションを書いてみましょう。以下の手順に沿ってCSSを書いていくと、なめらかで分かりやすい動きになります。
CSSの内容
まずは .hamburger の中にある .bar 3本を基本形で横並びに表示します
.hamburger {
width: 40px;
height: 30px;
position: relative;
cursor: pointer;
}
.bar {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #333;
transition: all 0.4s ease;
}
/* 各バーの位置 */
.bar-top {
top: 0;
}
.bar-middle {
top: 13px;
}
.bar-bottom {
bottom: 0;
}
次に、.hamburger:hover 時に各バーを回転・非表示にして「×」に見せます
.hamburger:hover .bar-top {
transform: rotate(45deg);
top: 13px;
}
.hamburger:hover .bar-middle {
opacity: 0;
}
.hamburger:hover .bar-bottom {
transform: rotate(-45deg);
bottom: 13px;
}
| プロパティ | 内容 |
|---|---|
transform: rotate() | 要素を回転させます。プラスは時計回り、マイナスは反時計回りです。 |
opacity: 0 | 要素を透明にして見えなくします（非表示とは異なり、スペースは保持されます）。 |
transition | アニメーションの時間や変化の仕方を指定します。ここでは「すべてを0.4秒で、なめらかに変化（ease）」にしています。 |
クリック動作について
今回は、マウスを乗せたとき（hover）にハンバーガーメニューが × に変形する動きを CSSだけで実装しています。よくある「ハンバーガーをクリックしてメニューを表示・非表示する動き」は、
JavaScript を使って状態（開閉）を切り替える必要があります。
👉 このページでは CSSでできる部分の理解を深めることが目的です。
「クリックして状態を保持するメニュー」は、JavaScriptの学習時に扱いますので、今は安心してCSSアニメーションの基本を身につけましょう！