Skip to content

/tags/ の親子の木で押せないノードをヘッダーの群ラベルと同じ枠付きにする (#3226) - #3233

Open
ma91n wants to merge 1 commit into
mainfrom
tag-forest-label-3226
Open

/tags/ の親子の木で押せないノードをヘッダーの群ラベルと同じ枠付きにする (#3226)#3233
ma91n wants to merge 1 commit into
mainfrom
tag-forest-label-3226

Conversation

@ma91n

@ma91n ma91n commented Sep 7, 2026

Copy link
Copy Markdown
Collaborator

Fixes #3226

変更内容

/tags/ の「親子関係を持つタグ」で、タグとして実在しない分類だけのノード(AI・CSS・DB・IaC・IDE・OS・イベント・セキュリティ・パッケージ管理・モバイル・認証認可の11件)を、ヘッダーのドロップダウンの群ラベル(開発 基盤 の四角い枠)と同じ .category-group-label で描く。

  • themes/future/layout/tags.ejs: renderTagGroupn.path の有無によって markup を分ける。押せる名前は tag-forest-label / tag-forest-sublabel のまま、押せないノードだけ category-group-label
  • themes/future/css-src/theme-styles.styl
    • 枠の指定(width: fit-content / padding / border / border-radius)を .header-dropdown-group .category-group-label のスコープから基底の .category-group-label へ移す。ヘッダー側には行のアイコンに文字をそろえる margin-left の補正だけ残す
    • .tag-forest-label から color: var(--ink-mute) を落とす(押せない名前がこのクラスに来なくなったので役が無い)
    • 木の根の枠付きラベルだけ枝との間を 8px にする(.tag-forest > li > .category-group-label。押せる根の 8px と同じ。既定の 4px では枠の下辺が線として見えるぶん詰まって見える)
  • CLAUDE.md: 「分類の名前で、押せない」ラベルはこの1つ、という判断を /categories/ のチップの節に足した

判断した点

  • 新しい部品は作らない。 「分類の名前で、押せない」は既にヘッダーの群ラベルが持っている語彙なので、同じクラスを当てる。partial ではなく CSS クラスだったので、クラスを共有する形
  • 静止の下線は使わない。 下線は本文の参照リンクだけの規則(本文リンクが色だけで区別されており、地の文とのコントラストが 2.17(WCAG 1.4.1 / F73) #2926)で、ここは面を持たない行の名前なので、押せる側の反応(hover 下線)はそのまま
  • 深さは問わない。 子ノード(tag-forest-sublabel)にも同じ分岐が効くが、実測では非リンクの子は 0 件(44件すべてリンク)。分類ノードは深さに関わらず1つのもので、ヘッダーの箱も1サイズなので、深さで大きさを変えない
  • 枠の左端は 0。 ラベルが自分の行を持つので、枠の側を押せる根の文字の左端にそろえる(CLAUDE.md「チップが自分の行を持つなら枠の側を揃える」)。枝の縦罫と枠の左辺が同じ x になり、枠が枝の頭に乗る形で読める(スクリーンショットで確認)
  • 枝の縦罫と枠の両方を持つが、「群を表す手は1つ」(サイドバーの節)には当たらない。枠が示すのは範囲ではなく「押せない」ことで、押せる根は縦罫だけを持つ
  • チップとの取り違えはヘッダーで既に手当て済みの3点(四角・非太字・rule-base。チップはピル・太字・rule-strong)で分かれる。木では枠付きラベルの直下にチップが並ぶので、この差がそのまま効く

実測

ラベル(根) 57件 = リンク46 + 非リンク11(tag-forest-label リンク46(tag-forest-label)+ 枠付き11(category-group-label
ラベル(子) 44件すべてリンク 変化なし
リンクの href 90件 順序・値とも一致(diff 0)
axe link-in-text-block(serious) 375 / 768 / 1280 で報告 0件(audit.mjs /tags/ エラー 0)
site.css の差分 枠の4宣言の移動、.tag-forest-labelcolor 1行削除、margin-bottom の1ルール追加のみ

css_lint.mjs / font_size_lint.mjs / textlint(tags.ejs)/ markdownlint(CLAUDE.md)はすべて通る。

確認ポイント

  • /tags/#tagforest: AI・IaC・IDE・セキュリティ・パッケージ管理・モバイル などが四角い枠の小さなラベルになり、押せる根(GoogleCloud・Java など)は太字のまま
  • ヘッダーの「カテゴリ」ドロップダウン: 群ラベルの見え方が変わっていない(枠の宣言をスコープから基底へ移しただけ)
  • ダークモードでも枠は --rule-base で追従する

🤖 Generated with Claude Code

タグとして実在しない分類ノード(AI・DB・OS…11件)が、押せる根の名前と
色だけ(ink-strong と ink-mute、差 1.62:1)で分かれていた。ヘッダーの
ドロップダウンの群ラベル(.category-group-label)を当てて、四角い枠で分ける。
枠の指定をヘッダー限定のスコープから基底へ移し、ヘッダーには位置の補正だけ残す。

Fixes #3226

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

タグの木で「押せる名前」と「押せない名前」が色だけで分かれている

1 participant