/* --- ハンバーガーアイコンのスタイル --- */ .hamburger { display: block; position: fixed; /* 画面に固定 */ top: 25px; /* 画面の上から25pxの位置 */ right: 25px; /* 画面の右から25pxの位置 */ z-index: 1001; /* 他の要素より手前に表示 */ cursor: pointer; background-color: #333; /* アイコンの背景色 */ padding: 10px; border-radius: 50%; /* 円形にする */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 影を付けて立体感を出す */ } .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: #fff; /* バーの色 */ transition: all 0.3s ease-in-out; } /* ハンバーガーがアクティブになった時のスタイル（X印） */ .hamburger.active .bar:nth-child(2) { opacity: 0; } .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* --- 開閉するメニューパネルのスタイル --- */ .nav-menu { position: fixed; /* 画面に固定 */ z-index: 1000; /* アイコンのすぐ後ろに表示 */ top: 0; right: -100%; /* 初期状態では画面の右側に隠す */ width: 280px; /* メニューの幅 */ height: 100vh; /* 画面の高さ一杯に表示 */ background-color: #333; transition: right 0.4s ease-in-out; /* 右からのスライドイン・アウトのアニメーション */ /* メニュー項目を縦に並べるための設定 */ display: flex; flex-direction: column; justify-content: center; align-items: center; list-style: none; padding: 0; margin: 0; } /* メニューが表示された時のスタイル */ .nav-menu.active { right: 0; /* 画面右端に表示 */ } /* メニュー項目のスタイル */ .nav-item { margin: 20px 0; } /* メニューリンクのスタイル */ .nav-link { color: #fff; text-decoration: none; font-size: 1.5rem; font-weight: bold; } .nav-link:hover { color: #ddd; }

top of page