ハンバーガー表記

Author: BreadMotion

assets/css/layout.css

@@ -268,7 +268,65 @@
 }
 
 /* ==========================================================================
-   5. レスポンシブデザイン
+   5. ハンバーガーメニュー
+   ========================================================================== */
+.nav-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    position: relative;
+    z-index: 30; /* ヘッダーより上に */
+}
+
+.nav-toggle__icon {
+    display: block;
+    width: 2rem;
+    height: 2px;
+    background: var(--color-heading);
+    position: relative;
+    transition: background 0.3s ease-in-out;
+}
+
+.nav-toggle__icon::before,
+.nav-toggle__icon::after {
+    content: "";
+    display: block;
+    width: 2rem;
+    height: 2px;
+    background: var(--color-heading);
+    position: absolute;
+    left: 0;
+    transition:
+        transform 0.3s ease-in-out,
+        top 0.3s ease-in-out;
+}
+
+.nav-toggle__icon::before {
+    top: -8px;
+}
+
+.nav-toggle__icon::after {
+    top: 8px;
+}
+
+/* メニューが開いたときのアニメーション */
+.nav-toggle.is-active .nav-toggle__icon {
+    background: transparent; /* 真ん中の線を消す */
+}
+
+.nav-toggle.is-active .nav-toggle__icon::before {
+    top: 0;
+    transform: rotate(45deg);
+}
+
+.nav-toggle.is-active .nav-toggle__icon::after {
+    top: 0;
+    transform: rotate(-45deg);
+}
+
+/* ==========================================================================
+   6. レスポンシブデザイン
    ========================================================================== */
 @media (max-width: 768px) {
     .site-header__inner {
@@ -313,4 +371,47 @@
     .site-footer__right a {
         font-size: 0.8rem;
     }
+    .site-header__inner {
+        flex-direction: row; /* モバイルでもロゴとトグルは横並び */
+        align-items: center;
+        justify-content: space-between; /* 両端に配置 */
+        padding: 0.75rem 1.25rem;
+    }
+
+    .site-logo {
+        margin-bottom: 0; /* 元に戻す */
+    }
+
+    .nav-toggle {
+        display: block; /* モバイルで表示 */
+    }
+
+    .site-nav {
+        /* 初期状態ではメニューを非表示 */
+        display: block;
+        position: fixed;
+        top: 0;
+        left: -100%; /* 画面外に隠す */
+        width: 100%;
+        height: 100vh;
+        background: var(--color-panel); /* 背景色 */
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 1.5rem;
+        transition: left 0.3s ease-in-out;
+        z-index: 25; /* ヘッダーの下、トグルの上に */
+        padding-top: 5rem; /* ヘッダー分スペースを確保 */
+    }
+
+    .site-nav.is-open {
+        left: 0; /* メニューを開く */
+    }
+
+    .site-nav a {
+        font-size: 1.5rem; /* メニュー項目の文字サイズを大きく */
+        padding: 0.75rem 1.5rem;
+        width: fit-content;
+        margin: 0 auto;
+    }
 }

partials/header.html

@@ -5,6 +5,12 @@
             <span class="site-logo__text">pankun.dev</span>
         </a>
 
+        <button
+            class="nav-toggle"
+            aria-label="Toggle navigation"
+        >
+            <span class="nav-toggle__icon"></span>
+        </button>
         <nav class="site-nav">
             <a
                 href="https://breadmotion.github.io/WebSite/index.html"