このページの中身

案件ごとに変えるもの
トークン
暗い表示
土台
文字
版面
操作できるもの
動き
カスケードの層
印刷
関連

出発点のCSS

案件を始めるときに貼る土台です。値にはすべてこの資料の中に根拠があり、各ブロックからそのページへ飛べます。構造はそのまま、下表の項目だけ案件ごとに差し替えます。

素の値に名前を付け、役割で呼ぶまでの順を示した図

図を大きく見る

図の中身を文字で読む

出発点のCSSは、値に名前を付けるところから始まる
素の値　名前を付ける　役割で呼ぶ　使う側は名前だけ
#1c1a17 / 24px　--color-text / --space-5　地・文字・強調　1か所で直る
✕ その場で色を書く → 同じ色が少しずつ違う値になる
✕ 見た目で名前を付ける → 色を変えると名前が嘘になる
名前は「青」ではなく「強調」。何に使うかで呼ぶ。

この土台をまるごと動かして確かめる場所が作業台です。字と余白と幅・色と階段・影・グラデーション・動きを和文の予約ページに載せて決め、最後に部品がトークンに追従するで全部を見てから、下の :root を差し替えます。

案件ごとに変えるもの#

変える項目	触る変数	決め方	作業台で決める
色相	`--color-accent` `--color-accent-text` `--color-danger` と地の暖色	配色の型。面積5%以下	色と階段
余白の刻み	`--space-1` 〜 `--space-10`	余白の道具で生成	字と余白と幅
文字の段	`--text-sm` 〜 `--text-2xl`	大きさの体系の道具で生成	字と余白と幅
影	`--shadow-1` 〜 `--shadow-3`	光の向きと柔らかさと濃さから3段を作る。数値を直接いじらない	影

書体・版面幅・動きの時間は、初稿のままでも多くの案件で足ります。迷ったら変えない。影は使わない案件も多く、その場合は3行を消すだけです。

トークン#

役割で名前を付けます。値そのものを名前にはしません。

このコードで動いている見本です

--color-bg--color-surface--color-text--color-text-muted--color-border--color-accent--color-accent-text--color-on-accent--color-danger--color-on-danger

余白

CSS　書き換えると見本が変わります

:root {
  /* 面と文字。地の色相をわずかに含ませると、無彩色より落ち着く */
  --color-bg:            #fbfaf8;
  --color-surface:       #f3efe8;
  --color-text:          #1c1a17;
  --color-text-muted:    #6f6a62;   /* 地に対して 5.1:1 */
  --color-border:        #d8d2c7;
  --color-accent:        #b4713a;   /* 図形・面。3:1 で足りるところ */
  --color-accent-text:   #95591c;   /* 文字とリンク。地で 5.41:1、面の上でも 4.92:1 */
  --color-on-accent:     #ffffff;   /* アクセント面に載せる文字。#95591c の上で 5.64:1 */
  --color-danger:        #a2382a;   /* 元に戻せない操作。地で 6.42:1 */
  --color-on-danger:     #ffffff;   /* エラー面に載せる文字。#a2382a の上で 6.70:1 */
  --color-focus:         var(--color-accent-text);  /* フォーカスリング */

/* 余白。この階段の外の値は作らない */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

/* 文字。比 1.2 の階段。2xl だけは表題用に1段ひらく（24→36 は 1.5）。1ページで使うのは4段まで */
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.5rem;
  --text-2xl:  2.25rem;

--leading-body:    1.9;   /* 和文本文 */
  --leading-heading: 1.35;

/* 動き */
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);

/* 版面 */
  --page: 80rem;
  --gutter: var(--space-6);

/* 角。案件を通してこの1つだけを使う */
  --radius: 2px;

/* 影。3段。光は上やや左から。地の色相（hsl の 40）をわずかに借りると、無彩色より紙になじむ */
  --shadow-1: 0 1px 2px hsl(40 20% 20% / 0.08), 0 2px 4px hsl(40 20% 20% / 0.05);
  --shadow-2: 0 1px 2px hsl(40 20% 20% / 0.08), 0 2px 4px hsl(40 20% 20% / 0.06), 0 6px 12px hsl(40 20% 20% / 0.05);
  --shadow-3: 0 2px 4px hsl(40 20% 20% / 0.08), 0 6px 12px hsl(40 20% 20% / 0.06), 0 14px 28px hsl(40 20% 20% / 0.05), 0 28px 56px hsl(40 20% 20% / 0.04);
}

暗い表示#

反転はさせません。役割ごとに値を持ち直し、暗い地では彩度を落とします。

このコードで動いている見本です

--color-bg--color-surface--color-text--color-text-muted--color-border--color-accent--color-accent-text--color-on-accent--color-danger--color-on-danger

CSS　書き換えると見本が変わります

図版の SVG にも同じ分岐を内蔵しておくと、<img> で読み込んでも地と揃います。

土台#

このコードで動いている見本です

余白

CSS　書き換えると見本が変わります

img には必ず width と height を書きます。ブラウザが先に場所を確保するので、読み込み中に画面が飛びません。

文字#

このコードで動いている見本です

余白余白余白余白余白

CSS　書き換えると見本が変わります

リンクの色は --color-accent-text で持ちます。地に対して 5.41:1、面の上でも 4.92:1、暗い表示では 7.11:1 です。指定を省くと既定の青が出て、暗い表示で 1.92:1 まで落ちます。

大きさを画面幅に連動させるときは、clamp() の推奨値に rem を含めます。vw だけで書くと、利用者の文字サイズ設定に追従しなくなります。

このコードで動いている見本です

最小1.75rem最大2.25rem

CSS　書き換えると見本が変わります

版面#

幅は中身ではなく、レイアウトで決めます。max-width: 65ch のような指定は使いません。

このコードで動いている見本です

余白余白列の最小幅16rem

CSS　書き換えると見本が変わります

操作できるもの#

このコードで動いている見本です

余白余白余白

CSS　書き換えると見本が変わります

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ボタンの基底。この資料のパターンはすべてこの1つを前提にしている。
   派生に書くのは色と枠だけで、寸法・下線・角は基底に任せる */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);                /* アイコンと文字のあいだ */
  min-block-size: 2.75rem;            /* 高さを固定しない。44px を下回らせない */
  padding: var(--space-2) var(--space-5);
  font: inherit;
  text-decoration: none;              /* <a> に付けても下線を残さない */
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.button--primary {                    /* いちばん勧める操作。1画面に1つ */
  background: var(--color-accent-text);
  color: var(--color-on-accent);
}
.button--secondary {                  /* 代わりの操作。枠で示す。枠は地に対して3:1が要る */
  background: var(--color-bg);
  color: var(--color-accent-text);
  border-color: var(--color-accent-text);
}
.button--ghost {                      /* 取り消し、戻る。面も枠も持たない */
  background: transparent;
  color: var(--color-text-muted);
}
.button--danger {                     /* 元に戻せない操作。強さの段とは別の軸 */
  background: var(--color-danger);
  color: var(--color-on-danger);
}
.button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* 暗い地の上では二重にして、どちらの地でも見えるようにする */
.on-dark:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px #000;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
}
.skip-link:focus {
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: 999;
}

outline: none は書きません。見た目に合わないなら、色と太さのほうを変えます。

ボタンは .button に派生を1つ重ねて使います。動作なら <button class="button button--primary">、移動なら <a class="button button--secondary"> と書き分けます。パターン集のCSSは基底を再掲しません。この節を1ページに1回だけ貼れば、どのパターンを持ってきても同じ寸法と同じ角で並びます。

動き#

このコードで動いている見本です

CSS　書き換えると見本が変わります

全部を止めると、状態が変わったことが伝わらなくなります。大きな移動と視差を止め、色と不透明度は残します。

カスケードの層#

外部のスタイルを上書きするとき、セレクタは長くしません。層の順で決めます。

このコードで動いている見本です

余白余白

CSS　書き換えると見本が変わります

CSSの仕組みなぜ上書きできないのか

印刷#

資料として配られそうなページには入れておきます。

このコードで動いている見本です

CSS　書き換えると見本が変わります

出発点のCSS

案件ごとに変えるもの#

トークン#

暗い表示#

土台#

文字#

版面#

操作できるもの#

動き#

カスケードの層#

印刷#

関連#