From 38c33e2187922f88efe514ebed7b83bfa35145a8 Mon Sep 17 00:00:00 2001 From: ma91n Date: Tue, 15 Sep 2026 09:26:53 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=82=AB=E3=82=B9?= =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=B0=E3=82=92=E6=9C=AC=E6=96=87=E3=81=AE?= =?UTF-8?q?=E5=A4=96=EF=BC=88=E3=83=8A=E3=83=93=E3=83=BB=E3=82=B5=E3=82=A4?= =?UTF-8?q?=E3=83=89=E3=83=90=E3=83=BC=E3=83=BB=E6=A4=9C=E7=B4=A2=EF=BC=89?= =?UTF-8?q?=E3=81=AB=E3=82=82=E5=BA=83=E3=81=92=E3=82=8B=20(#472)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5 (1M context) --- .vitepress/theme/style.css | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css index 09b12a1d8..fa23526bf 100644 --- a/.vitepress/theme/style.css +++ b/.vitepress/theme/style.css @@ -129,26 +129,40 @@ } /* 所在の目印。反応（hover）とは別の役なので、色は差し色ではなく塗りのネイビー、 - 太さは 2px の1つだけ（技術ブログ #2686 / #2847）。VitePress 既定は a が UA の - リング、button が 4px の -webkit-focus-ring-color で部品ごとに違う。 + 太さは 2px の1つだけ（技術ブログ #2686 / #2847）。VitePress 既定は部品ごとに + ばらばらで、a は UA のリング、button は 4px の -webkit-focus-ring-color、 + 検索ボタンは 5px auto、input は outline: none（＝目印が無い）。 + #435 では本文とスキップリンクだけに当てていたが、ページの先頭から Tab で + 辿ると本文へ入るまで UA のリング、本文に入ると 2px のネイビー、と 2 種類の + 輪郭が出る。所在の目印は 1 つなので、サイト全体に広げる (#472)。 暗い側はネイビーが地の上で 2.67 と非テキストの 3:1 に届かないので、 文字の最上段（12.81）に替える。 - 広げているのは本文とスキップリンクだけ——ナビ・サイドバー・検索は - 部品ごとに outline: none / 5px auto を持ち、器の縁で輪郭が切れるかは別に見る */ -.vp-doc a:focus-visible, -.vp-doc button:focus-visible, -.vp-doc summary:focus-visible, -#app .VPSkipLink:focus-visible { + + [tabindex] から -1 を外すのは、サイドバーの器（nav[tabindex="-1"]）と + スキップリンクの着地点を囲まないため。Tab で辿れる 0 のものだけが対象 */ +#app a:focus-visible, +#app button:focus-visible, +#app input:focus-visible, +#app summary:focus-visible, +#app [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--vp-c-brand-3); outline-offset: 2px; } -.dark .vp-doc a:focus-visible, -.dark .vp-doc button:focus-visible, -.dark .vp-doc summary:focus-visible, -.dark #app .VPSkipLink:focus-visible { +.dark #app a:focus-visible, +.dark #app button:focus-visible, +.dark #app input:focus-visible, +.dark #app summary:focus-visible, +.dark #app [tabindex]:not([tabindex="-1"]):focus-visible { outline-color: var(--vp-c-text-1); } +/* 帯の高さ（64px）いっぱいの部品は、外側 2px の輪郭が帯の外へ出る。 + 技術ブログも帯の中だけ内側へ逃がしている */ +#app .VPNavBarMenuLink:focus-visible, +#app .VPNavBarTitle .title:focus-visible { + outline-offset: -2px; +} + /* スキップリンクは画面に対して固定する（技術ブログ #2846）。VitePress 既定の 絶対配置だと、ページの途中で Tab を押したときにブラウザがこのリンクを 見せるためページ先頭までスクロールし、読んでいた位置を失う。