内容をスキップ
/* ==========================================================================
Foundation
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* デモ確認用にbodyの高さを出してスクロールできるようにしています */
/* 実際のプロジェクトではbodyへの指定は不要です。
*/
body {
margin: 0;
padding: 0;
height: 200vh;
font-family: “Hiragino Kaku Gothic ProN”, “Noto Sans JP”, Meiryo, sans-serif;
}
/* ==========================================================================
Layout & Project (FLOCSS + BEM)
========================================================================== */
.l-header {
/* Positioning */
position: fixed;
top: 0;
left: 0;
z-index: 100;
/* Box Model */
width: 100%;
/* Visual */
background: linear-gradient(to bottom, oklch(0% 0 0 / 0.7) 0%, oklch(0% 0 0 / 0) 100%);
/* Misc */
container-type: inline-size;
container-name: header;
transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
/* スクロール時の状態クラス */
.l-header.is-scrolled {
/* Visual */
background: oklch(15% 0 0 / 0.6);
/* 相対色構文を使用した半透明ブラック */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* Misc */
@supports (backdrop-filter: blur(10px)) {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
.l-header__inner {
/* Box Model */
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1280px;
height: 100px;
margin: 0 auto;
padding: 0 4%;
/* Misc */
transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.l-header.is-scrolled .l-header__inner {
height: 60px;
}
/* Logo */
.l-header__logo {
/* Box Model */
display: flex;
align-items: center;
margin: 0;
}
.l-header__logo-img {
/* Box Model */
width: auto;
height: 50px;
/* Misc */
transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.l-header.is-scrolled .l-header__logo-img {
height: 34px;
}
/* ==========================================================================
Container Query (PC / Tablet & SP)
========================================================================== */
/* PC向け (992px以上) */
@container header (min-width: 992px) {
.l-header__hamburger {
display: none;
}
.l-header__nav {
display: block;
}
.l-header__list {
display: flex;
align-items: center;
/* remをpxベースのclampに変換 */
gap: clamp(16px, 1.25vw + 8px, 40px);
margin: 0;
padding: 0;
list-style: none;
}
.l-header__link {
/* Positioning */
position: relative;
/* Box Model */
/* remをpxに変換 */
display: block;
padding: 8px 0;
/* Typography */
/* remをpxベースのclampに変換 */
font-size: clamp(13px, 0.31vw + 12px, 15px);
font-weight: 700;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
/* Misc */
transition: color 0.3s ease, transform 0.3s ease;
}
/* Micro Interactions: ホバーアニメーション */
.l-header__link::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
content: ”;
}
.l-header__link:hover {
transform: translateY(-2px);
}
.l-header__link:hover::after {
transform: scaleX(1);
transform-origin: left;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.l-header__link–icon {
display: flex;
align-items: center;
justify-content: center;
}
.l-header__link–icon svg {
width: 24px;
height: 24px;
fill: #fff;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
transition: transform 0.3s ease;
}
.l-header__link–icon:hover::after {
display: none;
/* アイコンには下線を出さない */
}
.l-header__link–icon:hover svg {
transform: scale(1.15) rotate(-5deg);
}
}
/* タブレット・スマホ向け (991px以下) */
@container header (max-width: 991px) {
.l-header__hamburger {
/* Positioning */
position: relative;
z-index: 110;
/* Box Model */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 0;
/* Visual */
background: transparent;
border: none;
/* Misc */
cursor: pointer;
}
.l-header__hamburger-line {
display: block;
width: 24px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* ハンバーガーメニューがアクティブな時（バツ印に変形） */
.l-header__hamburger.is-active .l-header__hamburger-line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.l-header__hamburger.is-active .l-header__hamburger-line:nth-child(2) {
opacity: 0;
}
.l-header__hamburger.is-active .l-header__hamburger-line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.l-header__nav {
/* Positioning */
position: fixed;
top: 0;
left: 0;
z-index: 105;
/* Box Model */
width: 100%;
height: 100dvh;
/* Visual */
background: oklch(0% 0 0 / 0.85);
/* ダークな背景 */
opacity: 0;
visibility: hidden;
/* Misc */
@supports (backdrop-filter: blur(15px)) {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
transition: opacity 0.4s ease,
visibility 0.4s ease;
}
.l-header__nav.is-active {
opacity: 1;
visibility: visible;
}
.l-header__list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
/* remをpxに変換 */
gap: 32px;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.l-header__nav.is-active .l-header__list {
transform: translateY(0);
}
.l-header__link {
/* remをpxベースのclampに変換 */
font-size: clamp(16px, 5vw, 18px);
font-weight: 700;
color: #fff;
text-decoration: none;
letter-spacing: 0.05em;
}
.l-header__link–icon svg {
width: 32px;
height: 32px;
fill: #fff;
}
}
/**
* DOM構築完了後に実行します。
*/
document.addEventListener(‘DOMContentLoaded’, () => {
const header = document.getElementById(‘js-header’);
const hamburger = document.getElementById(‘js-hamburger’);
const nav = document.getElementById(‘js-nav’);
// スクロール検知によるヘッダーのクラス切り替え
window.addEventListener(‘scroll’, () => {
// 50px以上スクロールされたらクラスを付与します。
if (window.scrollY > 50) {
header.classList.add(‘is-scrolled’);
} else {
header.classList.remove(‘is-scrolled’);
}
}, { passive: true }); // スクロールパフォーマンス向上のためpassiveオプションを指定
// ハンバーガーメニューの開閉処理
if (hamburger && nav) {
hamburger.addEventListener(‘click’, () => {
const isExpanded = hamburger.getAttribute(‘aria-expanded’) === ‘true’;
hamburger.classList.toggle(‘is-active’);
nav.classList.toggle(‘is-active’);
// アクセシビリティのための属性更新を行います。
hamburger.setAttribute(‘aria-expanded’, !isExpanded);
nav.setAttribute(‘aria-hidden’, isExpanded);
// メニューが開いているときは背景のスクロールを固定します。
if (!isExpanded) {
document.body.style.overflow = ‘hidden’;
} else {
document.body.style.overflow = ”;
}
});
}
});
