/* * ============================================================ * 大成２丁目自治会 — 外部スタイルシート * CSS設計方針: BEM (Block__Element--Modifier) * 作成: 2024 * ============================================================ * * ■ BEM 命名規則 * Block : .site-header * Element : .site-header__logo * Modifier : .site-header--fixed * * ■ ファイル参照パス * index.html → css/style.css * pages/*.html → ../css/style.css * * ■ INDEX（セクション番号） * §0 CSS変数（カラー・タイポ・スペース） * §1 リセット・ベース * §2 タイポグラフィ * §3 ユーティリティ * §4 [B] site-header * §5 [B] site-nav * §6 [B] hamburger * §7 [B] hero * §8 [B] section（コンテナ色・グラデーション） * §9 [B] page-header * §10 [B] breadcrumb * §11 [B] card * §12 [B] news-list * §13 [B] bulletin-board（回覧板） * §14 [B] mail-broadcast（一斉配信） * §15 [B] info-table * §16 [B] event-table * §17 [B] link-card * §18 [B] contact-form * §19 [B] officer-gate（役員セキュリティ） * §20 [B] community-links * §21 [B] adsense * §22 [B] site-footer * §23 [B] qr-code * §24 レスポンシブ（ブレークポイント） * ============================================================ */ /* ============================================================ §0 CSS変数（カラー・タイポ・スペース） ─ ここを変更するだけでサイト全体の色・フォントが変わります ─ ============================================================ */ :root { /* ── オレンジ系グラデーション（上→下 濃→淡） ──────────── */ --c-grad-1: #6E1A00; /* ヘッダー（最濃） */ --c-grad-2: #8B2500; /* ヒーロー上部 */ --c-grad-3: #B83808; /* ヒーロー下部 */ --c-grad-4: #D4541A; /* section--lv1 */ --c-grad-5: #E8732C; /* section--lv2 */ --c-grad-6: #F29044; /* section--lv3 */ --c-grad-7: #FAC868; /* section--lv4 */ --c-grad-8: #FDE8B8; /* section--lv5 */ --c-grad-9: #FFF4E6; /* ボディ背景（最淡） */ /* ── テキスト ─────────────────────────────────────────── */ --c-text-dark: #2C1200; --c-text-mid: #5A3010; --c-text-light: #FFFFFF; --c-text-muted: #9A6840; /* ── アクセント・機能色 ────────────────────────────────── */ --c-accent: #B83808; --c-accent-dark: #6E1A00; --c-link: #B83808; --c-link-hover: #6E1A00; --c-border: rgba(184,56,8,0.2); --c-border-dark: rgba(184,56,8,0.5); --c-success: #1A7A4A; --c-error: #C0392B; --c-warn: #D68910; --c-info: #1565C0; /* ── タイポグラフィ ────────────────────────────────────── */ --ff-serif: 'Shippori Mincho', 'Noto Serif JP', serif; --ff-sans: 'Noto Sans JP', sans-serif; --fs-xs: 0.72rem; --fs-sm: 0.85rem; --fs-base: 1rem; --fs-md: 1.1rem; --fs-lg: 1.35rem; --fs-xl: 1.65rem; --fs-2xl: 2.1rem; --fs-3xl: 2.8rem; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; --lh-base: 1.75; --lh-tight: 1.3; --ls-wide: 0.06em; /* ── スペース・サイズ ──────────────────────────────────── */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 40px; --sp-2xl: 64px; --sp-3xl: 96px; --max-w: 960px; --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; /* ── シャドウ ──────────────────────────────────────────── */ --shadow-s: 0 2px 8px rgba(110,26,0,0.12); --shadow-m: 0 4px 20px rgba(110,26,0,0.18); --shadow-l: 0 8px 40px rgba(110,26,0,0.24); /* ── トランジション ────────────────────────────────────── */ --transition: 0.2s ease; } /* ============================================================ §1 リセット・ベース ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--ff-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--c-text-dark); background-color: var(--c-grad-9); padding-top: 68px; /* sticky header の高さ分 */ } img { display: block; max-width: 100%; height: auto; } a { color: var(--c-link); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--c-link-hover); text-decoration: underline; } ul, ol { list-style: none; } button { font-family: var(--ff-sans); cursor: pointer; border: none; background: none; } input, select, textarea { font-family: var(--ff-sans); font-size: var(--fs-base); } table { border-collapse: collapse; width: 100%; } /* ============================================================ §2 タイポグラフィ ============================================================ */ h1, h2, h3, h4 { font-family: var(--ff-serif); line-height: var(--lh-tight); font-weight: var(--fw-bold); } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } p { margin-bottom: var(--sp-md); } p:last-child { margin-bottom: 0; } /* ============================================================ §3 ユーティリティ ─ .btn : 汎用ボタン ─ .tag : ラベルタグ ─ .visually-hidden : アクセシビリティ用非表示 ============================================================ */ /* ── ボタン ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--sp-sm); padding: 10px 24px; border-radius: var(--radius-m); font-weight: var(--fw-medium); font-size: var(--fs-sm); letter-spacing: var(--ls-wide); transition: all var(--transition); text-decoration: none; line-height: 1.4; cursor: pointer; } /* .btn--primary : メインCTA ボタン */ .btn--primary { background-color: var(--c-accent); color: var(--c-text-light); border: 2px solid transparent; } .btn--primary:hover { background-color: var(--c-accent-dark); color: var(--c-text-light); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-m); } /* .btn--outline : アウトライン ボタン */ .btn--outline { background-color: transparent; color: var(--c-accent); border: 2px solid var(--c-accent); } .btn--outline:hover { background-color: var(--c-accent); color: var(--c-text-light); text-decoration: none; } /* .btn--white : 白ボタン（濃い背景上で使用）*/ .btn--white { background-color: var(--c-text-light); color: var(--c-accent); border: 2px solid transparent; } .btn--white:hover { background-color: var(--c-grad-9); color: var(--c-accent-dark); text-decoration: none; } /* .btn--sm : 小サイズ ボタン */ .btn--sm { padding: 6px 16px; font-size: var(--fs-xs); } /* .btn--lg : 大サイズ ボタン */ .btn--lg { padding: 14px 36px; font-size: var(--fs-md); } /* ── タグ ────────────────────────────────────────────────── */ .tag { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); } .tag--info { background: #DBEAFE; color: #1E40AF; } .tag--warn { background: #FEF3C7; color: #92400E; } .tag--urgent { background: #FEE2E2; color: #991B1B; } .tag--success { background: #D1FAE5; color: #065F46; } .tag--event { background: #EDE9FE; color: #5B21B6; } /* ── コンテナ共通 ────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-xl); } /* ── アクセシビリティ ────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── 分割線 ─────────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--c-border); margin: var(--sp-lg) 0; } /* ── フェードインアニメーション ─────────────────────────── */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-in.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ §4 [B] site-header HTML:
in index.html / pages/*.html ─ site-header__inner : 内側レイアウト ─ site-header__brand : ロゴ・名称エリア ─ site-header__logo : ロゴ画像 ─ site-header__name : 自治会名テキスト ─ site-header__actions : ヘッダー右アクションボタン ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: linear-gradient(135deg, var(--c-grad-1) 0%, var(--c-grad-2) 100%); box-shadow: var(--shadow-m); height: 68px; } .site-header__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-xl); height: 100%; display: flex; align-items: center; gap: var(--sp-lg); } .site-header__brand { display: flex; align-items: center; gap: var(--sp-sm); text-decoration: none; flex-shrink: 0; padding: 4px 10px 4px 4px; border-radius: var(--radius-s); transition: background var(--transition); } /* PC/タブレットでは brand がホームリンクを兼ねるためホバーを明示 */ .site-header__brand:hover { text-decoration: none; background: rgba(255,255,255,0.12); } .site-header__brand:hover .site-header__name { opacity: 1; } .site-header__logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.4); } /* ロゴ画像がない場合の代替テキストバッジ */ .site-header__logo-placeholder { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text-light); font-family: var(--ff-serif); flex-shrink: 0; } .site-header__name { font-family: var(--ff-serif); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text-light); line-height: 1.2; } .site-header__name span { display: block; font-size: var(--fs-xs); font-family: var(--ff-sans); font-weight: var(--fw-normal); opacity: 0.8; letter-spacing: var(--ls-wide); } /* ヘッダー右側のアクションリンク（役員・コミュニティ）*/ .site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-sm); } /* .site-header__action-link : 役員/コミュニティリンク */ .site-header__action-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: var(--radius-s); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.3); transition: all var(--transition); text-decoration: none; } .site-header__action-link:hover { background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; border-color: rgba(255,255,255,0.6); } /* --locked : 鍵アイコン付き（役員専用ページ）*/ .site-header__action-link--locked { background: rgba(0,0,0,0.2); } /* ============================================================ §5 [B] site-nav HTML: