コピペで使えるハンバーガーメニュー20個まとめ（スマホ用の三本線メニュー）

コピペで使えるハンバーガーメニュー20個まとめ（スマホ用の三本線メニュー）

2026.10.03

スマホでサイトを見た時に、画面の右上によくある「三」の形のボタン。これがハンバーガーメニューです。

この記事では、コピペするだけで使えるハンバーガーメニューを20個まとめました。
定番の3本線から「×」に変わるタイプ、左右からスライドするドロワー、全面に広がるメニュー、縦の三点メニューまで、場面ごとに使い分けられる種類を用意しています。

どれもHTMLとCSSだけで動くので、JavaScriptは必要ありません。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

あの三本線、ハンバーガーって名前だったんだ！

パンに具がはさまっているように見えるからなんだって。見えないチェックボックスを使うと、CSSだけで開閉できるんだよ。アイコンを押して試してみてね。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、ヘッダー部分に貼り付けます。

「LOGO」の部分はサイト名やロゴ画像に、メニューの項目はaタグの文字とリンク先（href）を書き換えてください。
サンプルは確認しやすいように枠の中で動かしています。実際のヘッダーに組み込む時は、外側の枠線（border）や高さ（height）を外して調整してください。

01. シンプルな3本線

3本線を押すと「×」に変わり、下にメニューが開く、もっとも定番のタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu01">
  <input type="checkbox" id="kts-menu01-toggle" class="kts-menu01-check">
  <div class="kts-menu01-bar">
    <span class="kts-menu01-logo">LOGO</span>
    <label for="kts-menu01-toggle" class="kts-menu01-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu01-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu01 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu01-check { display: none; }
.kts-menu01-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu01-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu01-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu01-icon span { display: block; width: 100%; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu01-check:checked ~ .kts-menu01-bar .kts-menu01-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu01-check:checked ~ .kts-menu01-bar .kts-menu01-icon span:nth-child(2) { opacity: 0; }
.kts-menu01-check:checked ~ .kts-menu01-bar .kts-menu01-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu01-menu { display: none; background: #fff; border-top: 1px solid #E5E7EB; }
.kts-menu01-check:checked ~ .kts-menu01-menu { display: block; }
.kts-menu01-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }

02. 丸い背景付きのアイコン

アイコンを色付きの丸で囲んだ、押しやすさが伝わるタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu02">
  <input type="checkbox" id="kts-menu02-toggle" class="kts-menu02-check">
  <div class="kts-menu02-bar">
    <span class="kts-menu02-logo">LOGO</span>
    <label for="kts-menu02-toggle" class="kts-menu02-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu02-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu02 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu02-check { display: none; }
.kts-menu02-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu02-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu02-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 44px; height: 44px; padding: 0 12px; box-sizing: border-box; border-radius: 50%; background: #2563EB; }
.kts-menu02-icon span { display: block; width: 100%; height: 3px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu02-check:checked ~ .kts-menu02-bar .kts-menu02-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu02-check:checked ~ .kts-menu02-bar .kts-menu02-icon span:nth-child(2) { opacity: 0; }
.kts-menu02-check:checked ~ .kts-menu02-bar .kts-menu02-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu02-menu { display: none; background: #EFF6FF; }
.kts-menu02-check:checked ~ .kts-menu02-menu { display: block; }
.kts-menu02-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #DBEAFE; color: #1E3A8A; text-decoration: none; }

03. 「MENU」の文字付き

アイコンの下に「MENU」と書いて、何のボタンかを伝えるタイプです。

実際の見た目

LOGO MENU

HTMLコード

<div class="kts-menu03">
  <input type="checkbox" id="kts-menu03-toggle" class="kts-menu03-check">
  <div class="kts-menu03-bar">
    <span class="kts-menu03-logo">LOGO</span>
    <label for="kts-menu03-toggle" class="kts-menu03-icon"><span></span><span></span><span></span><em>MENU</em></label>
  </div>
  <nav class="kts-menu03-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu03 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu03-check { display: none; }
.kts-menu03-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu03-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu03-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 32px; height: 40px; align-items: center; }
.kts-menu03-icon span { display: block; width: 26px; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu03-check:checked ~ .kts-menu03-bar .kts-menu03-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu03-check:checked ~ .kts-menu03-bar .kts-menu03-icon span:nth-child(2) { opacity: 0; }
.kts-menu03-check:checked ~ .kts-menu03-bar .kts-menu03-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu03-menu { display: none; background: #fff; border-top: 1px solid #E5E7EB; }
.kts-menu03-check:checked ~ .kts-menu03-menu { display: block; }
.kts-menu03-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }
.kts-menu03-icon em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .05em; color: #111827; }
.kts-menu03-check:checked ~ .kts-menu03-bar .kts-menu03-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }

04. 長さの違う3本線

線の長さを少しずつ変えた、おしゃれな印象のタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu04">
  <input type="checkbox" id="kts-menu04-toggle" class="kts-menu04-check">
  <div class="kts-menu04-bar">
    <span class="kts-menu04-logo">LOGO</span>
    <label for="kts-menu04-toggle" class="kts-menu04-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu04-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu04 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu04-check { display: none; }
.kts-menu04-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu04-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu04-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 28px; height: 26px; align-items: flex-end; }
.kts-menu04-icon span { display: block; width: 100%; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu04-check:checked ~ .kts-menu04-bar .kts-menu04-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu04-check:checked ~ .kts-menu04-bar .kts-menu04-icon span:nth-child(2) { opacity: 0; }
.kts-menu04-check:checked ~ .kts-menu04-bar .kts-menu04-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu04-menu { display: none; background: #fff; border-top: 1px solid #E5E7EB; }
.kts-menu04-check:checked ~ .kts-menu04-menu { display: block; }
.kts-menu04-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }
.kts-menu04-icon span:nth-child(1) { width: 100%; }
.kts-menu04-icon span:nth-child(2) { width: 70%; }
.kts-menu04-icon span:nth-child(3) { width: 45%; }
.kts-menu04-check:checked ~ .kts-menu04-bar .kts-menu04-icon span { width: 100%; }

05. 2本線のシンプルタイプ

線を2本にした、すっきりミニマルなタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu05">
  <input type="checkbox" id="kts-menu05-toggle" class="kts-menu05-check">
  <div class="kts-menu05-bar">
    <span class="kts-menu05-logo">LOGO</span>
    <label for="kts-menu05-toggle" class="kts-menu05-icon"><span></span><span></span></label>
  </div>
  <nav class="kts-menu05-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu05 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu05-check { display: none; }
.kts-menu05-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu05-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu05-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 28px; height: 26px; gap: 8px; }
.kts-menu05-icon span { display: block; width: 100%; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }

.kts-menu05-menu { display: none; background: #fff; border-top: 1px solid #E5E7EB; }
.kts-menu05-check:checked ~ .kts-menu05-menu { display: block; }
.kts-menu05-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }
.kts-menu05-check:checked ~ .kts-menu05-bar .kts-menu05-icon span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.kts-menu05-check:checked ~ .kts-menu05-bar .kts-menu05-icon span:nth-child(2) { transform: translateY(-5.5px) rotate(-45deg); }

06. くるっと回転して×になるタイプ

アイコン全体が回転しながら「×」に変わる、動きのあるタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu06">
  <input type="checkbox" id="kts-menu06-toggle" class="kts-menu06-check">
  <div class="kts-menu06-bar">
    <span class="kts-menu06-logo">LOGO</span>
    <label for="kts-menu06-toggle" class="kts-menu06-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu06-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu06 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu06-check { display: none; }
.kts-menu06-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu06-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu06-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu06-icon span { display: block; width: 100%; height: 3px; background: #7C3AED; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu06-check:checked ~ .kts-menu06-bar .kts-menu06-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu06-check:checked ~ .kts-menu06-bar .kts-menu06-icon span:nth-child(2) { opacity: 0; }
.kts-menu06-check:checked ~ .kts-menu06-bar .kts-menu06-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu06-menu { display: none; background: #fff; border-top: 1px solid #E5E7EB; }
.kts-menu06-check:checked ~ .kts-menu06-menu { display: block; }
.kts-menu06-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }
.kts-menu06-icon { transition: transform .4s; }
.kts-menu06-check:checked ~ .kts-menu06-bar .kts-menu06-icon { transform: rotate(180deg); }

07. 矢印に変わるタイプ

押すと3本線が左向きの矢印に変わる、「戻る」を連想させるタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu07">
  <input type="checkbox" id="kts-menu07-toggle" class="kts-menu07-check">
  <div class="kts-menu07-bar">
    <span class="kts-menu07-logo">LOGO</span>
    <label for="kts-menu07-toggle" class="kts-menu07-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu07-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu07 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu07-check { display: none; }
.kts-menu07-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu07-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu07-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu07-icon span { display: block; width: 100%; height: 3px; background: #0F766E; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu07-menu { display: none; background: #fff; border-top: 1px solid #E5E7EB; }
.kts-menu07-check:checked ~ .kts-menu07-menu { display: block; }
.kts-menu07-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }
.kts-menu07-check:checked ~ .kts-menu07-bar .kts-menu07-icon span:nth-child(1) { width: 60%; transform: translate(-2px, 3px) rotate(-40deg); }
.kts-menu07-check:checked ~ .kts-menu07-bar .kts-menu07-icon span:nth-child(3) { width: 60%; transform: translate(-2px, -3px) rotate(40deg); }

08. 四角い枠で囲んだアイコン

アイコンを四角い枠で囲んだ、ボタンらしさを強調したタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu08">
  <input type="checkbox" id="kts-menu08-toggle" class="kts-menu08-check">
  <div class="kts-menu08-bar">
    <span class="kts-menu08-logo">LOGO</span>
    <label for="kts-menu08-toggle" class="kts-menu08-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu08-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu08 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu08-check { display: none; }
.kts-menu08-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu08-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu08-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 42px; height: 42px; padding: 0 9px; box-sizing: border-box; border: 2px solid #111827; border-radius: 6px; }
.kts-menu08-icon span { display: block; width: 100%; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu08-check:checked ~ .kts-menu08-bar .kts-menu08-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu08-check:checked ~ .kts-menu08-bar .kts-menu08-icon span:nth-child(2) { opacity: 0; }
.kts-menu08-check:checked ~ .kts-menu08-bar .kts-menu08-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu08-menu { display: none; background: #fff; border-top: 1px solid #E5E7EB; }
.kts-menu08-check:checked ~ .kts-menu08-menu { display: block; }
.kts-menu08-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }

09. 左からスライドするドロワー

メニューが画面の左からすっと出てくる、スマホサイトの定番タイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu09">
  <input type="checkbox" id="kts-menu09-toggle" class="kts-menu09-check">
  <div class="kts-menu09-bar">
    <span class="kts-menu09-logo">LOGO</span>
    <label for="kts-menu09-toggle" class="kts-menu09-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu09-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu09 { position: relative; height: 340px; overflow: hidden; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu09-check { display: none; }
.kts-menu09-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu09-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu09-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu09-icon span { display: block; width: 100%; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu09-check:checked ~ .kts-menu09-bar .kts-menu09-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu09-check:checked ~ .kts-menu09-bar .kts-menu09-icon span:nth-child(2) { opacity: 0; }
.kts-menu09-check:checked ~ .kts-menu09-bar .kts-menu09-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu09-menu { position: absolute; top: 56px; bottom: 0; left: 0; width: 70%; transform: translateX(-100%); transition: transform .35s; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.15); }
.kts-menu09-check:checked ~ .kts-menu09-menu { transform: translateX(0); }
.kts-menu09-menu a { display: block; padding: 14px 20px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }

10. 右からスライドするドロワー

メニューが右からスライドして出てくる、右手で操作しやすいタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu10">
  <input type="checkbox" id="kts-menu10-toggle" class="kts-menu10-check">
  <div class="kts-menu10-bar">
    <span class="kts-menu10-logo">LOGO</span>
    <label for="kts-menu10-toggle" class="kts-menu10-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu10-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu10 { position: relative; height: 340px; overflow: hidden; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu10-check { display: none; }
.kts-menu10-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu10-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu10-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu10-icon span { display: block; width: 100%; height: 3px; background: #DC2626; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu10-check:checked ~ .kts-menu10-bar .kts-menu10-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu10-check:checked ~ .kts-menu10-bar .kts-menu10-icon span:nth-child(2) { opacity: 0; }
.kts-menu10-check:checked ~ .kts-menu10-bar .kts-menu10-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu10-menu { position: absolute; top: 56px; bottom: 0; right: 0; width: 70%; transform: translateX(100%); transition: transform .35s; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.15); }
.kts-menu10-check:checked ~ .kts-menu10-menu { transform: translateX(0); }
.kts-menu10-menu a { display: block; padding: 14px 20px; border-bottom: 1px solid #FEE2E2; color: #111827; text-decoration: none; }

11. 全面に広がるメニュー

メニューが画面いっぱいに広がる、大きく見せたい時のタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu11">
  <input type="checkbox" id="kts-menu11-toggle" class="kts-menu11-check">
  <div class="kts-menu11-bar">
    <span class="kts-menu11-logo">LOGO</span>
    <label for="kts-menu11-toggle" class="kts-menu11-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu11-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu11 { position: relative; height: 340px; overflow: hidden; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu11-check { display: none; }
.kts-menu11-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu11-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu11-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu11-icon span { display: block; width: 100%; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu11-check:checked ~ .kts-menu11-bar .kts-menu11-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu11-check:checked ~ .kts-menu11-bar .kts-menu11-icon span:nth-child(2) { opacity: 0; }
.kts-menu11-check:checked ~ .kts-menu11-bar .kts-menu11-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu11-menu { position: absolute; top: 56px; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: opacity .35s, visibility .35s; background: rgba(17,24,39,.95); }
.kts-menu11-check:checked ~ .kts-menu11-menu { visibility: visible; opacity: 1; }
.kts-menu11-menu a { display: block; padding: 8px; color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; }

12. ふわっと開くメニュー

メニューがふわっと広がりながら現れる、なめらかな動きのタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu12">
  <input type="checkbox" id="kts-menu12-toggle" class="kts-menu12-check">
  <div class="kts-menu12-bar">
    <span class="kts-menu12-logo">LOGO</span>
    <label for="kts-menu12-toggle" class="kts-menu12-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu12-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu12 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu12-check { display: none; }
.kts-menu12-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu12-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu12-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu12-icon span { display: block; width: 100%; height: 3px; background: #EA580C; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu12-check:checked ~ .kts-menu12-bar .kts-menu12-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu12-check:checked ~ .kts-menu12-bar .kts-menu12-icon span:nth-child(2) { opacity: 0; }
.kts-menu12-check:checked ~ .kts-menu12-bar .kts-menu12-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu12-menu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s; background: #fff; }
.kts-menu12-check:checked ~ .kts-menu12-menu { max-height: 300px; opacity: 1; }
.kts-menu12-menu a { display: block; padding: 12px 16px; border-top: 1px solid #FFEDD5; color: #9A3412; text-decoration: none; }

13. ダークカラーのタイプ

ヘッダーとメニューを黒系でまとめた、引き締まった印象のタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu13">
  <input type="checkbox" id="kts-menu13-toggle" class="kts-menu13-check">
  <div class="kts-menu13-bar">
    <span class="kts-menu13-logo">LOGO</span>
    <label for="kts-menu13-toggle" class="kts-menu13-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu13-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu13 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu13-check { display: none; }
.kts-menu13-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #111827; }
.kts-menu13-logo { font-weight: 800; letter-spacing: .1em; color: #F9FAFB; }
.kts-menu13-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu13-icon span { display: block; width: 100%; height: 3px; background: #F9FAFB; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu13-check:checked ~ .kts-menu13-bar .kts-menu13-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu13-check:checked ~ .kts-menu13-bar .kts-menu13-icon span:nth-child(2) { opacity: 0; }
.kts-menu13-check:checked ~ .kts-menu13-bar .kts-menu13-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu13-menu { display: none; background: #1F2937; }
.kts-menu13-check:checked ~ .kts-menu13-menu { display: block; }
.kts-menu13-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #374151; color: #E5E7EB; text-decoration: none; }

14. グラデーションのアイコン

線にグラデーションをかけた、華やかなタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu14">
  <input type="checkbox" id="kts-menu14-toggle" class="kts-menu14-check">
  <div class="kts-menu14-bar">
    <span class="kts-menu14-logo">LOGO</span>
    <label for="kts-menu14-toggle" class="kts-menu14-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu14-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu14 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu14-check { display: none; }
.kts-menu14-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu14-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu14-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu14-icon span { display: block; width: 100%; height: 3px; background: linear-gradient(90deg, #6366F1, #EC4899); border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu14-check:checked ~ .kts-menu14-bar .kts-menu14-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu14-check:checked ~ .kts-menu14-bar .kts-menu14-icon span:nth-child(2) { opacity: 0; }
.kts-menu14-check:checked ~ .kts-menu14-bar .kts-menu14-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu14-menu { display: none; background: linear-gradient(135deg, #EEF2FF, #FCE7F3); }
.kts-menu14-check:checked ~ .kts-menu14-menu { display: block; }
.kts-menu14-menu a { display: block; padding: 12px 16px; color: #4C1D95; text-decoration: none; }

15. 縦の三点メニュー

「︙」の形の3つの点で、その他のメニューを開くタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu15">
  <input type="checkbox" id="kts-menu15-toggle" class="kts-menu15-check">
  <div class="kts-menu15-bar">
    <span class="kts-menu15-logo">LOGO</span>
    <label for="kts-menu15-toggle" class="kts-menu15-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu15-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu15 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu15-check { display: none; }
.kts-menu15-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu15-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu15-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; align-items: center; gap: 4px; }
.kts-menu15-icon span { display: block; width: 5px; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu15-menu { display: none; background: #fff; border-top: 1px solid #E5E7EB; }
.kts-menu15-check:checked ~ .kts-menu15-menu { display: block; }
.kts-menu15-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }
.kts-menu15-icon span { height: 5px; border-radius: 50%; background: #4B5563; }
.kts-menu15-check:checked ~ .kts-menu15-bar .kts-menu15-icon span { background: #2563EB; }
.kts-menu15-menu { position: absolute; right: 12px; top: 52px; z-index: 3; width: 160px; border: 0; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); overflow: hidden; }
.kts-menu15 { min-height: 56px; }
.kts-menu15-check:checked ~ .kts-menu15-bar { margin-bottom: 240px; }

16. アイコン付きのメニュー項目

メニューの各項目に絵文字を添えた、ひと目で内容が伝わるタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu16">
  <input type="checkbox" id="kts-menu16-toggle" class="kts-menu16-check">
  <div class="kts-menu16-bar">
    <span class="kts-menu16-logo">LOGO</span>
    <label for="kts-menu16-toggle" class="kts-menu16-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu16-menu">
    <a href="#">🏠 ホーム</a>
    <a href="#">🛠 サービス</a>
    <a href="#">💰 料金</a>
    <a href="#">✉️ お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu16 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu16-check { display: none; }
.kts-menu16-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu16-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu16-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu16-icon span { display: block; width: 100%; height: 3px; background: #059669; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu16-check:checked ~ .kts-menu16-bar .kts-menu16-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu16-check:checked ~ .kts-menu16-bar .kts-menu16-icon span:nth-child(2) { opacity: 0; }
.kts-menu16-check:checked ~ .kts-menu16-bar .kts-menu16-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu16-menu { display: none; background: #fff; padding: 6px 0; }
.kts-menu16-check:checked ~ .kts-menu16-menu { display: block; }
.kts-menu16-menu a { display: block; padding: 12px 18px; color: #064E3B; text-decoration: none; }

17. 中央寄せのメニュー

メニューの項目を中央にそろえた、すっきり上品なタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu17">
  <input type="checkbox" id="kts-menu17-toggle" class="kts-menu17-check">
  <div class="kts-menu17-bar">
    <span class="kts-menu17-logo">LOGO</span>
    <label for="kts-menu17-toggle" class="kts-menu17-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu17-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu17 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu17-check { display: none; }
.kts-menu17-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu17-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu17-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu17-icon span { display: block; width: 100%; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu17-check:checked ~ .kts-menu17-bar .kts-menu17-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu17-check:checked ~ .kts-menu17-bar .kts-menu17-icon span:nth-child(2) { opacity: 0; }
.kts-menu17-check:checked ~ .kts-menu17-bar .kts-menu17-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu17-menu { display: none; background: #fff; padding: 10px 0; text-align: center; }
.kts-menu17-check:checked ~ .kts-menu17-menu { display: block; }
.kts-menu17-menu a { display: block; padding: 10px; color: #111827; letter-spacing: .1em; text-decoration: none; }

18. 下からせり上がるメニュー

メニューが下からせり上がってくる、スマホアプリのようなタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu18">
  <input type="checkbox" id="kts-menu18-toggle" class="kts-menu18-check">
  <div class="kts-menu18-bar">
    <span class="kts-menu18-logo">LOGO</span>
    <label for="kts-menu18-toggle" class="kts-menu18-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu18-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu18 { position: relative; height: 340px; overflow: hidden; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu18-check { display: none; }
.kts-menu18-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu18-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu18-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu18-icon span { display: block; width: 100%; height: 3px; background: #0284C7; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu18-check:checked ~ .kts-menu18-bar .kts-menu18-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu18-check:checked ~ .kts-menu18-bar .kts-menu18-icon span:nth-child(2) { opacity: 0; }
.kts-menu18-check:checked ~ .kts-menu18-bar .kts-menu18-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu18-menu { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(100%); transition: transform .35s; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.12); padding: 8px 0; }
.kts-menu18-check:checked ~ .kts-menu18-menu { transform: translateY(0); }
.kts-menu18-menu a { display: block; padding: 14px 20px; color: #0C4A6E; text-align: center; text-decoration: none; }

19. 丸いボタン型（文字が切り替わる）

「MENU」と書かれた丸いボタンが、開くと「CLOSE」に変わるタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu19">
  <input type="checkbox" id="kts-menu19-toggle" class="kts-menu19-check">
  <div class="kts-menu19-bar">
    <span class="kts-menu19-logo">LOGO</span>
    <label for="kts-menu19-toggle" class="kts-menu19-icon"></label>
  </div>
  <nav class="kts-menu19-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu19 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu19-check { display: none; }
.kts-menu19-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu19-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu19-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: auto; height: auto; padding: 8px 18px; border-radius: 999px; background: #111827; }
.kts-menu19-icon span { display: block; width: 100%; height: 3px; background: #111827; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu19-check:checked ~ .kts-menu19-bar .kts-menu19-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu19-check:checked ~ .kts-menu19-bar .kts-menu19-icon span:nth-child(2) { opacity: 0; }
.kts-menu19-check:checked ~ .kts-menu19-bar .kts-menu19-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu19-menu { display: none; background: #fff; border-top: 1px solid #E5E7EB; }
.kts-menu19-check:checked ~ .kts-menu19-menu { display: block; }
.kts-menu19-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #111827; text-decoration: none; }
.kts-menu19-icon::before { content: "MENU"; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.kts-menu19-check:checked ~ .kts-menu19-bar .kts-menu19-icon { background: #DC2626; }
.kts-menu19-check:checked ~ .kts-menu19-bar .kts-menu19-icon::before { content: "CLOSE"; }

20. 項目が順番に現れるメニュー

メニューの項目が上から順番にふわっと現れる、凝った動きのタイプです。

実際の見た目

LOGO

HTMLコード

<div class="kts-menu20">
  <input type="checkbox" id="kts-menu20-toggle" class="kts-menu20-check">
  <div class="kts-menu20-bar">
    <span class="kts-menu20-logo">LOGO</span>
    <label for="kts-menu20-toggle" class="kts-menu20-icon"><span></span><span></span><span></span></label>
  </div>
  <nav class="kts-menu20-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#">お問い合わせ</a>
  </nav>
</div>

CSSコード

.kts-menu20 { position: relative; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-menu20-check { display: none; }
.kts-menu20-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: #fff; }
.kts-menu20-logo { font-weight: 800; letter-spacing: .1em; color: #111827; }
.kts-menu20-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 26px; height: 26px; }
.kts-menu20-icon span { display: block; width: 100%; height: 3px; background: #DB2777; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.kts-menu20-check:checked ~ .kts-menu20-bar .kts-menu20-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kts-menu20-check:checked ~ .kts-menu20-bar .kts-menu20-icon span:nth-child(2) { opacity: 0; }
.kts-menu20-check:checked ~ .kts-menu20-bar .kts-menu20-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.kts-menu20-menu { display: none; background: #fff; }
.kts-menu20-check:checked ~ .kts-menu20-menu { display: block; }
.kts-menu20-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #FCE7F3; color: #831843; text-decoration: none; }
.kts-menu20-check:checked ~ .kts-menu20-menu a { animation: kts-menu20-in .4s ease both; }
.kts-menu20-check:checked ~ .kts-menu20-menu a:nth-child(2) { animation-delay: .08s; }
.kts-menu20-check:checked ~ .kts-menu20-menu a:nth-child(3) { animation-delay: .16s; }
.kts-menu20-check:checked ~ .kts-menu20-menu a:nth-child(4) { animation-delay: .24s; }
@keyframes kts-menu20-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }

カスタマイズの小ワザ

同じページに2つ置く時は、inputタグのidとlabelタグのforを、もう片方と違う名前に変えてください。
パソコンでは普通の横並びメニュー、スマホではハンバーガーメニューにしたい時は、メディアクエリ（@media）で表示を切り替えます。
09〜11番・18番のように画面の上に重ねて出すタイプは、実際に使う時はpositionをfixedに変えると画面全体に広がります。
アイコンだけでは伝わりにくい読者が多いサイトでは、03番や19番のように「MENU」の文字を添えるのがおすすめです。
色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。

まとめ｜早見表

使いたい場面	該当するメニュー
定番の見た目	01, 05, 17
押しやすさを伝えたい	02, 08, 19
文字で伝えたい	03, 19
おしゃれに見せたい	04, 14, 16
アイコンの動きを楽しむ	06, 07
スライドで出す	09, 10, 18
大きく見せたい	11
なめらかに開く	12, 20
引き締めたい	13
その他メニュー	15

スマホで見た時のメニューも、これで自分で作れるね！

そうなんだ。スマホから見る人は多いから、メニューの押しやすさは大事なんだよ。まずは01番の定番タイプから試してみてね。

20個のハンバーガーメニューは、見えないチェックボックスとCSSだけで開閉できる。同じページに複数置く時はidとforを変え、パソコンとスマホの切り替えはメディアクエリで行う。

HTML・CSS, コピペで使えるシリーズ, ハンバーガーメニュー

コピペで使えるページネーション20個まとめ（記事一覧のページ送りボタン）

コピペで使えるテキストマーカー・文字装飾20個まとめ（蛍光ペン・下線・強調）