Skip to content

選択の帯のネイビーをやめ、ブラウザ既定に戻す #3300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ma91n merged 1 commit into from
Sep 17, 2026
+16 −86
Merged

選択の帯のネイビーをやめ、ブラウザ既定に戻す #3300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1123,7 +1123,7 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
- **`text-underline-offset` は `link-underline-offset`（2px）。選択の帯に線を
収めるための値**（#3058）。値は `_variables.styl` が持ち、
**規則はスタイルガイドが名乗る**（「選択されると色が消えるので、下線だけが残る」）。
**選択されると、ブラウザは文字も下線も `::selection` の文字色1色で塗り直す。**
**選択されると、ブラウザは文字も下線も選択の文字色1色で塗り直す。**
リンクの色は残らず、`text-decoration-color` を明示しても残らない
（選択中の描画を実測して、リンク色の画素は0だった）。
その結果、**帯からはみ出した線は白地の上の白い線**（ダークは暗地の上の暗い線）に
Expand All @@ -1132,9 +1132,11 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
`line-height` を持たず `leading-row` を継ぐので、13px × 1.4 で
**下の余白が 2.6px** しかない（`p` / `li` は 15.6px × 1.75 で 5.85px）。
3px では表のセルでだけ線が帯の外に落ちる
- **`::selection` に `text-decoration` を書かない。** 静止の線が既に
選択の色で塗られているので足しても増えない。**位置をそろえずに書くと
別の場所にもう1本引かれて二重に見える**（#3058 で一度踏んだ）
- **`::selection` は宣言しない**（#3299）。帯の色はブラウザのものに戻した。
以前はブランドのネイビーを当てていたが、**本文の選択は端末の慣れた色でよい**
という判断（typescript-guide へ同じ色を入れようとして出た結論で、
アーキテクチャガイドラインからも外した）。この制約（帯からはみ出した線は
消える）は帯の色が何であっても変わらないので、下線の位置の理由は残る
- **カードの hover の下線も同じ 2px にそろえる**（`.article-card:hover`）。
地の文の下線と同じものとして #2893 で位置を合わせてあるので、
片方だけ動かすと値が2つに割れる
Expand Down Expand Up @@ -1437,7 +1439,7 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
- 行番号（`code-line-number`）は**文字**なので `ink-faint` のまま。以前つまみと
同じ値を共有していたのはここで割った
- `.highlight ::selection` の打ち消しは要らなくなった（「両モードとも暗いので
明るい側でも暗い側の選択色を使う」が成り立たない）。ページ既定の帯がそのまま効く
明るい側でも暗い側の選択色を使う」が成り立たない）。ブラウザ既定の帯がそのまま効く
- ライトでは **gist の埋め込みが読めるようになった**。GitHub 側の明るい構文色を
暗い地の上に載せていた
- **ダークモードは `:root` のトークンを差し替えて作る**（#2746）。状態は3つ——
Expand Down Expand Up @@ -2289,6 +2291,7 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
- ダークモードの `::selection` がこの形で、選択の地がページ地との比 **1.12** のまま
だった（意図した値なら 14.03）。同居していた `.skip-link` / `.share-copied` /
`.tag-list-link:hover` / `.post-list-rank-high` も暗地用の指定を失っていた
（選択の帯自体は #3299 でブラウザ既定に戻したが、踏んだ壊れ方は残る）
- **同じ接頭辞だけで組んだリストは対象外。** 効かないブラウザでは全部まとめて
要らないので、捨てられて正しい（`bootstrap-subset.css` の `::-webkit-datetime-edit-*`）
- 再発は `css_lint.mjs` の2つめの検査が止める
Expand Down
7 changes: 2 additions & 5 deletions source/specials/styleguide/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,7 @@ editable: true

### 選択されると色が消えるので、下線だけが残る

テキストを選択すると、ブラウザは選択範囲の文字も下線も**選択の文字色1色で塗り直します**。リンクの色は残りません。下線に色を指定しても残りません。**選択中にリンクを名乗れるのは下線だけ**で、ひとつ上の「色だけで名乗らない」がそのまま効いてきます。

<p class="specials-text">前の文 <span class="sg-selected">選択中のリンク</span> 後ろの文</p>
テキストを選択すると、ブラウザは選択範囲の文字も下線も**選択の文字色1色で塗り直します**。リンクの色は残りません。下線に色を指定しても残りません。**選択中にリンクを名乗れるのは下線だけ**で、ひとつ上の「色だけで名乗らない」がそのまま効いてきます。この段落のリンクを選択すると、実際にそうなります。

このとき、下線は**選択の帯に収まっていないと見えません**。帯からはみ出した線は背景と同じ色で描かれて消えます。帯の高さは行間で決まるので、いちばん低いのは行間の狭いところ——表のセルです。

Expand All @@ -96,7 +94,7 @@ editable: true

### ブランド色

ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、**文字色には使いません**。本文の `ink-strong` との比が 1.63 しかなく、文字にすると黒と区別が付かないためです。例外は2つの形だけです。1つは**ネイビーの図形とひと組で読ませる小さな文字**で、タブに出る「← → で切り替え」は同時に出るフォーカスリングと同じ色にして1つの信号として読ませ、シェア数はボタンの丸と、著者名は頭文字の丸と1組に見せます。もう1つは、**文字がそのページの面そのものになっている 404 の数字**です。読み下す文章に混ざる文字には使いません。クリムゾンはコンセプトブックの文法どおり、画面内で同時に1箇所だけの差し色に限定しています。
ネイビーは塗り面（フッター）とインタラクション（hover / focus）専用で、**文字色には使いません**。本文の `ink-strong` との比が 1.63 しかなく、文字にすると黒と区別が付かないためです。例外は2つの形だけです。1つは**ネイビーの図形とひと組で読ませる小さな文字**で、タブに出る「← → で切り替え」は同時に出るフォーカスリングと同じ色にして1つの信号として読ませ、シェア数はボタンの丸と、著者名は頭文字の丸と1組に見せます。もう1つは、**文字がそのページの面そのものになっている 404 の数字**です。読み下す文章に混ざる文字には使いません。クリムゾンはコンセプトブックの文法どおり、画面内で同時に1箇所だけの差し色に限定しています。

| <span class="sr-only">見本</span> | 変数 | 値 | 白背景との比 | 使うところ |
| --- | --- | --- | --- | --- |
Expand Down Expand Up @@ -143,7 +141,6 @@ editable: true
| <span class="sg-chip-ground-dark"><span class="sg-chip sg-dark-surface-tint"></span></span> | `surface-tint` | <span class="sg-hex sg-dark-surface-tint"></span> | <span class="sg-ratio sg-dark-surface-tint"></span> | 静止した面 |
| <span class="sg-chip-ground-dark"><span class="sg-chip sg-dark-surface-mute"></span></span> | `surface-mute` | <span class="sg-hex sg-dark-surface-mute"></span> | <span class="sg-ratio sg-dark-surface-mute"></span> | 反応した面と、空・無効の面 |
| <span class="sg-chip-ground-dark"><span class="sg-chip sg-dark-navy"></span></span> | `brand-navy` | <span class="sg-hex sg-dark-navy"></span> | <span class="sg-ratio sg-dark-navy"></span> | フッターの帯 |
| <span class="sg-chip-ground-dark"><span class="sg-chip sg-dark-selection"></span></span> | `selection-bg` | <span class="sg-hex sg-dark-selection"></span> | <span class="sg-ratio sg-dark-selection"></span> | テキスト選択の帯。文字は `surface-base` |

**`ink-faint` は明るいほうと同じく「AA を満たす最も薄い段階」です。** 上の表の比はページの背景に対する値ですが、実際にいちばん厳しいのは面のスケールでいちばん明るい `surface-mute` で、そこでも AA を満たす値にしています。これより薄くしません。

Expand Down
16 changes: 5 additions & 11 deletions themes/future/css-src/_variables.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,16 +77,16 @@ link-on-note-alert = #AC1B1B
link-on-note-visited = #4a0ba6

// コーポレートのブランド色（FA Concept Book 2025 の実測値）。
// ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、
// ネイビーは塗り面（フッター）とインタラクション（hover / focus）専用で、
// 文字色には使わない。本文 ink-strong とのコントラスト比が 1.63 しかなく、
// 文字にすると黒と区別が付かない（リンクに使うと走査性が死ぬ）。
// クリムゾンはブックの文法どおり画面内で同時に1箇所だけの差し色に限定する
brand-navy = #0A1461
brand-crimson = #D5004A
// コンセプトブックのライトグレー（ページ地の色）。surface-* より一段濃く、
// 白地の上で「面」としてはっきり見せたいところに使う。使うのはフッターの地と
// その ::selection だけで、小物（チップ）には広げない。地の濃さで輪郭を作ろうと
// すると、白に近い2段から外れる (#2681)
// 白地の上で「面」としてはっきり見せたいところに使う。使うのはフッターの地だけで、
// 小物（チップ）には広げない。地の濃さで輪郭を作ろうとすると、白に近い2段から
// 外れる (#2681)
brand-gray = #E3E3E2

// 暗い地の上の語彙 (#2839)。ink / rule / surface は白地の上で決めた値で、
Expand Down Expand Up @@ -259,12 +259,6 @@ dark-navy = #0a0d1f
// テキスト選択の帯 (#3103)。明るい側は brand-navy の塗りに白文字だが、暗い地では
// ネイビーを中間まで明るくしても帯として 3:1 に届く前に白文字が 4.5 を割る
// （hsl(233, 60%, 54%) でも地と 2.79）。向きを逆にして「ネイビーを薄くした帯＋
// 地の色の文字」にする。色相は brand-navy の 233° のまま、彩度は半分に落とす
// （81% のままだと蛍光の紫青になる。rule-on-dark で彩度を落としたのと同じ理由）。
// 無彩色の ink-strong の帯だと反転表示のように見えて、ブランドの色味が無い。
// 対 dark-surface-base 10.35 / 対コードの地 #2b2b2b 8.54。文字は dark-surface-base
dark-selection = #c2c7eb

/* ::: note の種別。持たせるのは色だけで、寸法は .note-container が1箇所で決める。
以前は両方が padding / margin / border-radius を宣言しており、同じ詳細度の
後勝ちで .note-container 側だけが効いていた。読んでも効いている値が分からない
Expand Down Expand Up @@ -452,7 +446,7 @@ hover-speed = 0.05s
footer-underline-speed = 0.25s

// 地の文のリンクの下線の位置（#3058）。**見た目から選んだ値ではなく、ブラウザの
// 描画の制約で決まる値。** 選択されると文字も下線も ::selection の文字色1色で
// 描画の制約で決まる値。** 選択されると文字も下線もブラウザの選択の文字色1色で
// 塗り直されるので（text-decoration-color を明示しても残らない。実測で0画素）、
// 選択の帯からはみ出した線は地と同じ色になって消える。帯の高さは行ボックスで、
// いちばん低いのは表のセル（td は line-height を持たず leading-row を継ぐので
Expand Down
66 changes: 1 addition & 65 deletions themes/future/css-src/theme-styles.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,6 @@
--rule-on-dark: rule-on-dark;
--crimson-on-dark: crimson-on-dark;

// テキスト選択の帯と、その上の文字。明暗で向きが逆になる（明るい側は濃い帯に
// 白文字、暗い側は薄いネイビーの帯に地の色の文字）ので役として持つ (#3103)
--selection-bg: brand-navy;
--selection-ink: on-dark-strong;

// 表彰の淡金 (#2742)。ブランド色は表彰に広げないので、この系統だけが持つ色
--award-gold: award-gold;
--award-gold-on-tint: award-gold-on-tint;
Expand Down Expand Up @@ -202,9 +197,6 @@ dark-tokens()
// ネイビーは暗い地で 1.05 しか出ない。面としては一段暗くして帯の色味だけ残す
--brand-navy: dark-navy;

--selection-bg: dark-selection;
--selection-ink: dark-surface-base;

// 差し色としてのネイビーは、暗い地では面ではなく「明るい線・明るい塗り」に置き換える。
// 白地では #0A1461 が 16.34 の差し色だが、暗い地では 1.05 で消える (#2746)
dark-parts()
Expand Down Expand Up @@ -265,22 +257,7 @@ dark-parts()
.tabs input:checked + .tab_item {
border-bottom-color: var(--ink-strong);
}
/* フッターの選択。明るい側はネイビー地の上でネイビーの帯が見えないので塗りと文字を
反転させているが、暗い側のフッターは dark-navy の暗い地なので、ページと同じ
薄いネイビーの帯でよい（対 dark-navy 11.61）。ベンダー接頭辞の擬似要素は
単独のルールにする（同居させると Chrome / Safari でルールごと捨てられる #3058） */
.site-footer ::-moz-selection {
color: var(--selection-ink);
fill: var(--selection-ink);
background: var(--selection-bg);
}
.site-footer ::selection {
color: var(--selection-ink);
fill: var(--selection-ink);
background: var(--selection-bg);
}
/* 塗り面。明暗を入れ替える。地だけ明るくすると白文字が飛ぶので、中の文字も一緒に返す。
テキスト選択の帯はここに入れない。--selection-bg / --selection-ink が持つ (#3103) */
/* 塗り面。明暗を入れ替える。地だけ明るくすると白文字が飛ぶので、中の文字も一緒に返す */
.skip-link,
.share-copied,
.tag-list-link:hover,
Expand Down Expand Up @@ -442,36 +419,6 @@ Misc tools

/* ベンダー接頭辞の擬似要素は他のセレクタと同じリストに入れない。
1つでも解釈できないセレクタがあると、ブラウザはルールごと捨てる */
/* SVG の <text> の文字色は color ではなく fill が決めるので、fill も同じ値にする (#3253)。
mermaid が図に焼き付けた fill:#333 が残ると、ネイビーの帯の上で 1.29 になって
文字の形が消える（_mermaid の 58 枚のうち <text> を持つ11枚が該当）。
foreignObject の中の HTML ラベルは color が効くので fill を無視する。
HTML の文字には効かない指定なので、当てる範囲を SVG に絞らない */
::-moz-selection {
color: var(--selection-ink);
fill: var(--selection-ink);
background: var(--selection-bg);
}
::selection {
color: var(--selection-ink);
fill: var(--selection-ink);
background: var(--selection-bg);
}
/* フッターはネイビー地なので、ネイビーの選択色では選択が見えない。
塗りと文字を反転させる（ネイビー文字とグレー地で 12.72）。
footer 要素で絞ると記事内の <footer>（関連記事など、白地）にも
誤爆するため、ネイビーの面を持つクラスで絞る */
.site-footer ::-moz-selection {
color: var(--brand-navy);
fill: var(--brand-navy);
background: var(--brand-gray);
}
.site-footer ::selection {
color: var(--brand-navy);
fill: var(--brand-navy);
background: var(--brand-gray);
}

/***
Header and header elements
***/
Expand Down Expand Up @@ -6854,7 +6801,6 @@ sg-dark = {
'dark-surface-tint': dark-surface-tint,
'dark-surface-mute': dark-surface-mute,
'dark-navy': dark-navy,
'dark-selection': dark-selection,
}
// リンクは地が3種類あるので、明るい側と同じく分けて測る
sg-dark-link = {
Expand Down Expand Up @@ -7201,16 +7147,6 @@ for n in sg-space-steps
.sg-underline-offset::after {
content: unquote('"' + link-underline-offset + '"')
}
/* 選択中の見え方。地と文字色は実物の ::selection と同じトークンで、
下線も実物と同じ変数から引く */
.sg-selected {
background: var(--selection-bg);
color: var(--selection-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: link-underline-offset;
}

/* 状態の見本。色と太さはパンくずの実物のルールから借りる（上の .sg-crumb*）*/
.sg-state {
border: solid 1px var(--rule-base);
Expand Down
Loading