From 388b93ecaf6d0d55ffaa6f5c956cc5e619e48255 Mon Sep 17 00:00:00 2001 From: ma91n Date: Mon, 7 Sep 2026 22:35:52 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=E3=83=97?= =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC=E3=81=AE=E5=8F=8D=E5=BF=9C?= =?UTF-8?q?=E3=82=92=E3=82=AB=E3=83=BC=E3=83=89=E3=81=AE=E5=9E=8B=E3=81=AB?= =?UTF-8?q?=E3=81=9D=E3=82=8D=E3=81=88=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 囲みを持つぶん1箇所だけ古い型（題を ink-strong から ink-mute に落とす）が 残っていて、スタイルガイドの hover の表のどの行にも当てはまらない部品に なっていた。#2893 のとおり、この差は 1.62:1 しかなく読み取れない。 題に下線・画像が一段引く形にそろえる。カード全体が1つの で行き先が 1つしか無いので、引き金はその の :hover と :focus-visible。 キーボードで来たときも同じ反応が返る（#3168）。 Co-Authored-By: Claude Opus 5 (1M context) --- CLAUDE.md | 6 ++++++ source/specials/styleguide/index.md | 2 ++ themes/future/css-src/theme-styles.styl | 25 +++++++++++++++---------- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index e97542d28d7..0577f8e78a1 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -996,6 +996,12 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する 出さない）。押せる範囲より反応が狭いぶんには裏切りが起きない - 行の面を外したので、順位の丸を hover の間だけ白抜きにする補正（#2717）は 撤去した + - **リンクプレビューも下線側**（#3223）。囲みを持つ数少ない部品だが、 + **囲みの有無で反応を変えない。** カード全体が1つの `` で行き先が1つしか + 無いので、引き金はその `` の `:hover` / `:focus-visible` でよい + （`:has()` で別の行き先を避ける必要が無い）。#2893 で他のカードが + 色から下線へ移ったときに1箇所だけ `ink-mute` に落とす型が残っていて、 + **スタイルガイドの hover の表のどの行にも当てはまらない部品**になっていた - **カードは下線側。** #2747 で囲みも影も失って面を持たなくなった。以前は 中身の色を一段落として返していたが、`ink-strong` → `ink-mute` の**状態の差は 1.62:1** しかなく読み取れない（状態は前後を並べて比べられないので、同時に diff --git a/source/specials/styleguide/index.md b/source/specials/styleguide/index.md index e50da25bbec..fd85063a1bf 100644 --- a/source/specials/styleguide/index.md +++ b/source/specials/styleguide/index.md @@ -379,6 +379,8 @@ editable: true **カードでも行でも反応は同じです。** 記事一覧のカードと「よく読まれている記事」の行は、どちらもサムネイル・タイトル・年月の組で、同じ「記事1本への入口」です。形が違うだけで反応が変わると、読者からは同じものが場所によって別の動きをすることになります。当たる範囲は行のほうが広く、行のどこを押しても記事へ飛びますが、**反応は行き先を名乗るタイトルと画像に出します**。押せる範囲より反応が狭いぶんには、押しても何も起きないという裏切りは起きません。特集や連載のパネルも同じで、説明文や余白を押しても行き先へ飛びます。本文末の帯にある We're hiring も、カードの形の1行き先としてここに入ります。 +記事本文に貼る**リンクプレビュー**も同じ型です。行き先が外部ページでも、カード1枚が1つの行き先を名乗る形は変わりません。囲みを持つ数少ない部品ですが、囲みの有無で反応は変えません。実物は[この記事](/articles/20250916a/)にあります。 + **反応が出るのは、記事へ行くリンク——サムネイルとタイトル——を指している間だけです。** 記事一覧のカードには日付・著者・カテゴリ・シェアボタンという別の行き先も並んでいて、カードに乗っていること自体を合図にすると、そこを指している間もカードが「この記事へ行く」と名乗ってしまいます。カーソルの真下にあるのは別の行き先なので、両方が同時に名乗ると押した先が読めません。 **この線引きは、指している瞬間だけを止める形では引けません。** 別の行き先どうしの間には隙間があり、メタ情報の項目の間で 28px、シェアボタンの丸の間で 12px あります。そこで反応が戻ると、メタ情報の上を1回なぞるだけで6回以上ついたり消えたりして点滅に見えます。カードの中の余白は連続した1つの面ではなく、行き先と行き先の隙間なので、余白での反応は誘いとして働くより先にノイズになります。 diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index ef304583aa1..2606bbe556c 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -2013,7 +2013,7 @@ body { 大きい差が要る。色を濃くする方向はもう無く（ink-strong が最濃）、 青は地の文の参照リンクの色なので使えない (#2893)。 下線は #2948 で地の文のリンクが常時持つようになり、語彙に入っている。 - 太さと位置もそちらに揃える（1px / offset 3px）。 + 太さと位置もそちらに揃える（1px / link-underline-offset）。 画像は opacity 0.7 のまま。**カード全体の透明度では下げない。** 0.7 だと本文の文字が白地に対して 4.23、0.8 でもメタ行の文字が 3.89 で @@ -6145,17 +6145,22 @@ pre.mermaid, overflow: hidden; background-color: var(--surface-base); } -.link-preview-card-title, .link-preview-card-image { - transition: color hover-speed ease, opacity hover-speed ease; + transition: opacity hover-speed ease; } -/* 反応は他のカードと同じ「中身が一段引く」 (#2747)。以前は影に上がって - いたが、影を1段だけ残すとサイト全体から影を落としきれない。 +/* 反応は他のカードと同じ型（題に下線・画像が一段引く）。色は動かさない。 + ink-strong → ink-mute は状態の差が 1.62:1 しかなく読み取れない (#2893)。 + 引き金はカードを覆う で、行き先はこの1つだけなので指す場所と反応が + 食い違わない。キーボードで来たときも同じ反応を返す (#3168)。 画像は background-image なので、img ではなく要素の透明度を落とす */ -.link-preview-card:hover .link-preview-card-title { - color: var(--ink-mute); +.link-preview-card-anchor:hover .link-preview-card-title, +.link-preview-card-anchor:focus-visible .link-preview-card-title { + text-decoration: underline; + text-underline-offset: link-underline-offset; + text-decoration-thickness: 1px; } -.link-preview-card:hover .link-preview-card-image { +.link-preview-card-anchor:hover .link-preview-card-image, +.link-preview-card-anchor:focus-visible .link-preview-card-image { opacity: 0.7; } @@ -6165,8 +6170,8 @@ pre.mermaid, color: inherit; min-height: 110px; } -/* 反応は上の「中身が一段引く」だけにする。color: inherit は静止状態にしか - 効かず、打ち消しが無いと hover で文字が青くなって下線も出る。 +/* 反応は上の題の下線と画像だけにする。color: inherit は静止状態にしか + 効かず、打ち消しが無いと hover でカード全体の文字が青くなって下線も出る。 .article-entry を付けるのは、本文の a:hover（0,2,1）に勝たせるため */ .article-entry .link-preview-card-anchor:hover, .article-entry .link-preview-card-anchor:focus { From d257ffa1f4b3c7bb9b3ee0caed68624bc13cdc33 Mon Sep 17 00:00:00 2001 From: ma91n Date: Mon, 7 Sep 2026 22:36:24 +0900 Subject: [PATCH 2/2] =?UTF-8?q?CLAUDE.md=20=E3=81=AE=E5=8F=82=E7=85=A7?= =?UTF-8?q?=E7=95=AA=E5=8F=B7=E3=82=92=20PR=20=E3=81=AB=E5=90=88=E3=82=8F?= =?UTF-8?q?=E3=81=9B=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5 (1M context) --- CLAUDE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CLAUDE.md b/CLAUDE.md index 0577f8e78a1..c58ef94bf26 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -996,7 +996,7 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する 出さない）。押せる範囲より反応が狭いぶんには裏切りが起きない - 行の面を外したので、順位の丸を hover の間だけ白抜きにする補正（#2717）は 撤去した - - **リンクプレビューも下線側**（#3223）。囲みを持つ数少ない部品だが、 + - **リンクプレビューも下線側**（#3224）。囲みを持つ数少ない部品だが、 **囲みの有無で反応を変えない。** カード全体が1つの `` で行き先が1つしか 無いので、引き金はその `` の `:hover` / `:focus-visible` でよい （`:has()` で別の行き先を避ける必要が無い）。#2893 で他のカードが