中級

ハンバーガーメニューのしくみ

スマートフォンの右上によくある三本線のボタン。押すとメニューが出てくる「ハンバーガーメニュー」のしくみと、作り方の全体像を学びます。

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

チェックボックスとlabelを使って、押すと「×」に変わる三本線のボタンをCSSだけで作ります。:checked と ~（兄弟セレクタ）がポイントです。

ボタンでメニューを開閉する（CSSのみ）

前回作った三本線のボタンに、右からスライドして出てくるメニューを組み合わせます。CSSだけで完成するハンバーガーメニューです。

JavaScriptでメニューを開閉する

チェックボックスの代わりにbutton要素とJavaScriptを使って、ハンバーガーメニューを開閉します。実際のサイトで使うならこの方法です。

PCでは横並びにする（レスポンシブメニューの完成）

メディアクエリを使って、スマホではハンバーガーメニュー、PCでは横並びのメニューに切り替えます。この単元の完成版です。