ハンバーガーメニュー更新

Author: BreadMotion

assets/css/base.css

@@ -2,7 +2,6 @@
    1. デザイントークン
    ========================================================================== */
 :root {
-    /* カラーパレット */
     --color-bg: #0d111c;
     --color-surface: #161b22;
     --color-panel: #161b22;
@@ -16,10 +15,8 @@
     --color-accent: #6366f1;
     --color-accent-dark: #4f46e5;
     --color-accent-soft: rgba(99, 102, 241, 0.1);
-    --color-accent-rgb:
-        99, 102, 241; /* グローエフェクト用にRGB値を変数化 */
+    --color-accent-rgb: 99, 102, 241;
 
-    /* シャドウ */
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --shadow-md:
         0 4px 6px rgba(0, 0, 0, 0.1),
@@ -34,19 +31,16 @@
         0 0 12px rgba(var(--color-accent-rgb), 0.4),
         0 0 24px rgba(var(--color-accent-rgb), 0.2);
 
-    /* 角丸 */
     --radius-sm: 4px;
     --radius-md: 8px;
     --radius-lg: 12px;
 
-    /* フォント */
     --font-body:
         "Inter", system-ui, -apple-system,
         BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
         "Noto Sans JP", sans-serif;
     --font-heading: var(--font-body);
 
-    /* トランジション */
     --transition-smooth: all 0.25s
         cubic-bezier(0.165, 0.84, 0.44, 1); /* スムーズなアニメーション */
 }
@@ -107,8 +101,8 @@ h6 {
     line-height: 1.2;
     color: var(--color-heading);
     font-family: var(--font-heading);
-    font-weight: 700; /* 見出しの太さを強調 */
-    letter-spacing: -0.02em; /* 文字間を少し詰める */
+    font-weight: 700;
+    letter-spacing: -0.02em;
 }
 
 p {
@@ -133,7 +127,7 @@ a {
 a:hover {
     color: var(--color-accent-dark);
     text-decoration: none;
-    text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.5); /* ホバー時にグローエフェクト */
+    text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.5);
 }
 
 img {
@@ -162,7 +156,6 @@ button {
 /* ==========================================================================
    3. 共通ユーティリティクラス
    ========================================================================== */
-
 .main-container {
     max-width: 1120px;
     margin: 0 auto;
@@ -178,7 +171,6 @@ button {
 /* ==========================================================================
    4. スクロールアニメーション
    ========================================================================== */
-
 .reveal-on-scroll {
     opacity: 0;
     transform: translateY(20px);

assets/css/blog.css

@@ -41,9 +41,7 @@
 .blog-filter__control:focus {
     outline: none;
     border-color: var(--color-accent);
-    box-shadow: var(
-        --shadow-glow
-    ); /* グローエフェクト適用 */
+    box-shadow: var(--shadow-glow);
 }
 
 .blog-filter:first-child {
@@ -58,7 +56,7 @@
    2. ブログ一覧（カード本体）
    ========================================================================== */
 .blog-card {
-    position: relative; /* 擬似要素の位置決めの基点 */
+    position: relative;
     z-index: 1;
     display: flex;
     gap: 1.25rem;
@@ -69,7 +67,7 @@
     border: 1px solid var(--color-border);
     box-shadow: var(--shadow-md);
     transition: var(--transition-smooth);
-    overflow: hidden; /* 擬似要素がはみ出さないように */
+    overflow: hidden;
 }
 
 .blog-card::before {
@@ -105,10 +103,9 @@
 }
 
 .blog-card:hover::before {
-    opacity: 1; /* ホバー時にボーダーを表示 */
+    opacity: 1;
 }
 
-/* サムネイル枠 */
 .blog-card .card__thumb {
     cursor: pointer;
     flex-shrink: 0;
@@ -129,10 +126,9 @@
     transition: var(--transition-smooth);
 }
 .blog-card:hover .card__thumb img {
-    transform: scale(1.05); /* ホバー時に画像を少し拡大 */
+    transform: scale(1.05);
 }
 
-/* 本文側 */
 .blog-card .card__body {
     flex: 1;
     min-width: 0;
@@ -162,15 +158,13 @@
     flex-grow: 1;
 }
 
-/* タグ */
 .blog-card .card__tags {
     display: flex;
     flex-wrap: wrap;
     gap: 0.4rem;
-    margin-top: auto; /* タグをカード下部に配置 */
+    margin-top: auto;
 }
 
-/* タグ（共通） */
 .tag {
     cursor: pointer;
     display: inline-flex;
@@ -183,7 +177,7 @@
     color: var(--color-text);
     white-space: nowrap;
     transition: var(--transition-smooth);
-    text-decoration: none; /* リンクの下線を消す */
+    text-decoration: none;
 }
 .tag:hover {
     background: var(--color-accent);
@@ -229,8 +223,6 @@
     line-height: 1.6;
 }
 
-/* 記事詳細ページのタグ群（一覧の .tag と見た目を揃える） */
-/* 記事詳細ページのタグ群（.tag を共通化したので上書きは最小限） */
 .post-detail__tags {
     margin-top: 1rem;
     display: flex;
@@ -239,7 +231,6 @@
     align-items: center;
 }
 
-/* キーボードフォーカスの見た目を明確にする（アクセシビリティ） */
 .post-detail__tags a.tag:focus {
     outline: none;
     box-shadow:
@@ -248,9 +239,8 @@
     border-color: var(--color-accent);
 }
 
-/* リンク（<a class="tag">）は既存の .tag スタイルを使うので上書きは最小限にする */
 .post-detail__tags a.tag {
-    text-decoration: none; /* リンク下線を消す（見た目をバッジにする） */
+    text-decoration: none;
 }
 
 /* ==========================================================================
@@ -290,7 +280,6 @@
     border-bottom: 1px dashed var(--color-border-soft);
     padding-bottom: 0.3rem;
 }
-/* ... (h4, h5, h6は省略) ... */
 
 .markdown-body p {
     margin: 1rem 0;
@@ -351,8 +340,6 @@
     box-shadow: var(--shadow-sm);
 }
 
-/* ... (table, imgは省略) ... */
-
 /* ==========================================================================
    5. レスポンシブデザイン
    ========================================================================== */
@@ -374,5 +361,4 @@
     .post-detail {
         padding: 1.5rem;
     }
-    /* ... (その他省略) ... */
 }

assets/css/contact.css

@@ -23,10 +23,9 @@
 
 .page-header a {
     color: var(--color-accent);
-    text-decoration: none; /* base.cssで設定済みだが念のため */
+    text-decoration: none;
     font-size: 1rem;
 }
-/* a:hoverのスタイルはbase.cssでグローバルに定義済み */
 
 /* ==========================================================================
    2. フォーム本体
@@ -80,12 +79,8 @@
 .form-field textarea:focus {
     outline: none;
     border-color: var(--color-accent);
-    box-shadow: var(
-        --shadow-glow
-    ); /* グローエフェクト適用 */
-    background: var(
-        --color-panel
-    ); /* フォーカス時に少し背景色を濃く */
+    box-shadow: var(--shadow-glow);
+    background: var(--color-panel);
 }
 
 .form-actions {
@@ -94,7 +89,6 @@
 }
 
 .form-actions button {
-    /* top.css の .btn-primary と同様のスタイル */
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -119,8 +113,7 @@
 
 .form-actions button:hover {
     transform: translateY(-2px);
-    box-shadow:
-        var(--shadow-lg), var(--shadow-glow); /* グローエフェクト追加 */
+    box-shadow: var(--shadow-lg), var(--shadow-glow);
     background: linear-gradient(
         135deg,
         var(--color-accent) 0%,
@@ -137,13 +130,13 @@
 }
 
 .contact-result--ok {
-    color: #84cc16; /* green-500 */
+    color: #84cc16;
     background: rgba(132, 204, 22, 0.15);
     border: 1px solid #84cc16;
 }
 
 .contact-result--ng {
-    color: #ef4444; /* red-500 */
+    color: #ef4444;
     background: rgba(239, 68, 68, 0.15);
     border: 1px solid #ef4444;
 }
@@ -161,5 +154,4 @@
     .form-actions button {
         width: 100%;
     }
-    /* ... (その他省略) ... */
 }

assets/css/layout.css

@@ -5,7 +5,6 @@
     --color-accent-rgb: 108, 99, 255;
     --color-accent-dark-rgb: 79, 71, 204;
 
-    /* 新しく追加 */
     --color-border: rgba(var(--color-text-rgb), 0.1);
     --color-border-soft: rgba(var(--color-text-rgb), 0.05);
 
@@ -387,17 +386,22 @@
         justify-content: flex-start;
         align-items: flex-start;
         gap: 1.5rem;
-        transition: right 0.3s ease-in-out;
+        transition:
+            right 0.3s ease-in-out,
+            visibility 0s 0.3s;
         z-index: 25;
         padding-top: calc(3.5rem + 2rem);
         padding-bottom: 2rem;
         flex-wrap: nowrap;
         overflow-y: auto;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
+        visibility: hidden;
     }
 
     .site-nav.is-open {
         right: 0;
+        visibility: visible;
+        transition-delay: 0s;
     }
 
     .site-nav a {
@@ -410,6 +414,7 @@
     }
 }
 
+html.no-scroll,
 body.no-scroll {
     overflow: hidden;
 }

assets/css/portfolio.css

@@ -58,7 +58,7 @@
    2. ポートフォリオ一覧（カード本体）
    ========================================================================== */
 .portfolio-card {
-    position: relative; /* 擬似要素の位置決めの基点 */
+    position: relative;
     z-index: 1;
     display: flex;
     gap: 1.5rem;
@@ -69,7 +69,7 @@
     border: 1px solid var(--color-border);
     box-shadow: var(--shadow-md);
     transition: var(--transition-smooth);
-    overflow: hidden; /* 擬似要素がはみ出さないように */
+    overflow: hidden;
 }
 
 .portfolio-card::before {
@@ -104,7 +104,7 @@
 }
 
 .portfolio-card:hover::before {
-    opacity: 1; /* ホバー時にボーダーを表示 */
+    opacity: 1;
 }
 
 /* サムネイル枠 */
@@ -127,7 +127,7 @@
     transition: var(--transition-smooth);
 }
 .portfolio-card:hover .card__thumb img {
-    transform: scale(1.05); /* ホバー時に画像を少し拡大 */
+    transform: scale(1.05);
 }
 
 /* 本文側 */
@@ -160,15 +160,13 @@
     flex-grow: 1;
 }
 
-/* タグ */
 .portfolio-card .card__tags {
     display: flex;
     flex-wrap: wrap;
     gap: 0.4rem;
-    margin-top: auto; /* タグをカード下部に配置 */
+    margin-top: auto;
 }
 
-/* 共通タグスタイルにする（一覧と作品詳細の両方で使う） */
 .tag {
     cursor: pointer;
     display: inline-flex;
@@ -189,7 +187,6 @@
     box-shadow: var(--shadow-glow);
 }
 
-/* 外部リンクボタン群 */
 .portfolio-card .card__actions {
     display: flex;
     flex-wrap: wrap;
@@ -219,9 +216,7 @@
     border-color: var(--color-accent);
     color: var(--color-text);
     transform: translateY(-2px);
-    box-shadow: var(
-        --shadow-glow
-    ); /* グローエフェクト適用 */
+    box-shadow: var(--shadow-glow);
 }
 
 /* ==========================================================================
@@ -253,7 +248,6 @@
     font-size: 1rem;
     color: var(--color-text);
 }
-/* ... (markdown-bodyのスタイルはblog.cssと共通なので省略) ... */
 
 /* ==========================================================================
    5. レスポンシブデザイン
@@ -273,5 +267,4 @@
         width: 100%;
         height: auto;
     }
-    /* ... (その他省略) ... */
 }