/* ========================================================================== default.css 役割: リセット + デザイントークン定義 ルール: このファイルは原則触らない。カスタマイズは style.css で行う。 ========================================================================== */ /* -------------------------------------------------------------------------- デザイントークン（CSS カスタムプロパティ） 　サイト全体で共有する値をここで一元管理する。 　色・フォント・スペーシングの変更はここだけ触れば OK。 -------------------------------------------------------------------------- */ :root { /* --- カラー --- 新しい色を追加するときはここに追記する */ --color-bg: #181818; /* ページ背景 */ --color-bg2: #c4c4c4; /* ページ背景（light 版） */ --color-bg3: #e2e2e2; /* ページ本文背景 */ --color-panel: #000000; /* カード・パネル背景 */ --color-border: #626262; /* ボーダー全般 */ --color-text: #ffffff; /* 基本テキスト */ --color-text-muted: #eeeeee; /* 本文・補足テキスト */ --color-accent: #0000ff; /* アクセント（セクション見出し・フッター） */ /* --- フォント --- Google Fonts は index.html の で読み込み済み */ --font-mono: "JetBrains Mono", "Courier New", monospace; /* UI・見出し・ラベル・日付 */ --font-sans: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; /* 日本語本文 */ /* --- フォントサイズスケール --- html の font-size: 62.5% により 1rem = 10px になっている。 例: --text-base = 1.6rem = 16px */ --text-xs: 1.2rem; /* 12px: コピーライト・補足 */ --text-sm: 1.4rem; /* 14px: 小さいラベル */ --text-base: 1.6rem; /* 16px: ナビ・ニュースタイトル */ --text-lg: 1.8rem; /* 18px: 日本語本文 */ --text-xl: 2rem; /* 20px: リサーチカードタグ */ --text-2xl: 2.4rem; /* 24px: 中見出し */ --text-3xl: 3.2rem; /* 32px: セクションタグ（ など） */ /* --- スペーシングスケール --- 余白・gap はこの変数から選んで使う。 中途半端な値（13px など）はデザイン上の都合があるため直書き可 */ --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; /* メインの gap */ --space-xl: 32px; --space-2xl: 48px; /* --- レイアウト --- */ --sidebar-width: 200px; --gap: var(--space-lg); /* パネル間の基本 gap */ /* --- ボーダー --- */ --border: 1px solid var(--color-border); /* 共通ボーダーショートハンド */ } /* -------------------------------------------------------------------------- レスポンシブ トークン上書き default.css のトークンをブレイクポイントごとに上書きする。 -------------------------------------------------------------------------- */ @media (max-width: 840px) { :root { --gap: var(--space-md); } } /* -------------------------------------------------------------------------- モダンリセット 　「全部ゼロにする」のではなく、ブラウザ差異だけを吸収する最小限のリセット。 -------------------------------------------------------------------------- */ /* ボックスモデルを統一（継承方式でコンポーネントが上書きしやすい） */ *, *::before, *::after { box-sizing: border-box; } /* デフォルトの margin を除去（padding は要素ごとに判断） */ * { margin: 0; } /* フォントレンダリングを改善 */ body { -webkit-font-smoothing: antialiased; } /* メディア要素をブロック扱いに（余白のズレを防ぐ） */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* フォームはフォント設定を継承させる */ input, button, textarea, select { font: inherit; } /* テキストのはみ出しを防ぐ */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- ベーススタイル 　サイト全体の土台となるスタイル。 -------------------------------------------------------------------------- */ html { font-size: 62.5%; /* 1rem = 10px にするための設定。変更不要。 */ scroll-behavior: smooth; /* モバイルでフォントが自動拡大するのを防ぐ */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); /* サイドバー+スクロールのレイアウト基点 */ min-height: 100%; @media (max-width: 840px) { font-size: var(--text-sm); } } /* リンクは色を継承（各コンポーネントで上書きする） */ a { color: inherit; text-decoration: none; } /* リストのデフォルトスタイルを除去 */ ul, ol { list-style: none; padding: 0; } /* テーブルのセル間の余白を除去 */ table { border-collapse: collapse; }