`<th>` のボーダーを列ヘッダーに限定

<th> 要素に付与していた border-block-end が、行ヘッダーにも適用されていた問題を解消し、列ヘッダーのみに限定しました。余分な padding-block の削除と、物理プロパティから論理プロパティへの置換により、CSS の可読性とメンテナンス性も向上しています。

背景

従来のスタイルでは、テーブルのヘッダーセル <th> 全体に下線（border-block-end）が付与されていたため、行ヘッダーが横長のボーダーで強調され、列ヘッダーと視覚的に区別しにくい状況がありました。さらに、th セレクタ内で既に別ルールが適用していた padding-block が重複して記述され、 CSS の冗長性が増していました。これらの課題は、テーブルのアクセシビリティとデザイン一貫性を損なう要因となっていました。

技術的な変更

tbody の行境界の書き換え

tbody tr の上部ボーダーは、物理プロパティ border-top から論理プロパティ border-block-start に変更され、スタイル値には var(--wa-border-style) が使用されるようになりました。

@@
-      border-top: solid var(--wa-border-width-s) var(--wa-color-border-quiet);
+      border-block-start: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-quiet);

この置換により、書字方向に依存しないボーダー指定が可能になり、将来的なレイアウト変更への耐性が向上します。

<th> のボーダー適用範囲の限定

th セレクタから冗長な padding-block: 0.75em; を削除し、代わりに &:not([scope='row']):not(:has(+ td)) という条件付きネストを導入して、列ヘッダーでのみ border-block-end を適用するようにしました。行ヘッダーは [scope='row'] 属性または次の兄弟要素が非ヘッダーセルである場合に除外されます。

@@
-    padding-block: 0.75em;
-
     font-size: var(--wa-font-size-smaller);
     font-weight: var(--wa-font-weight-bold);
-
-    border-block-end: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-normal);
+    /* 列ヘッダーのみに下部ボーダーを適用 */
+    &:not([scope='row']):not(:has(+ td)) {
+      border-block-end: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-normal);
+    }

この変更により、列ヘッダーだけが視覚的に区切られ、テーブル全体の構造が把握しやすくなります。

変数ベースのボーダー指定

行境界の色指定も var(--wa-border-style) を使用する形に統一し、既存のハードコーディングされた solid キーワードを除去しました。これによりテーマカスタマイズが一元化され、デザインシステム全体の一貫性が保たれます。

設計判断

単一の th セレクタ内で条件付き擬似クラスを利用 した設計は、別個のクラスや追加セレクタを導入せずに機能を拡張するというシンプルさを追求しています。これにより、既存の CSS カスケーディングへの影響を最小限に抑えつつ、意図したスタイリングだけを適用できます。

また、論理プロパティへの置換 は、書字方向や将来的なレイアウト変化に対するレジリエンスを高める意図が示されています。CSS カスタムプロパティを活用した一元管理は、テーマの拡張やメンテナンスを容易にする設計方針と一致しています。

まとめ

今回の PR は、テーブルヘッダーのボーダー表示を列ヘッダーのみに限定し、冗長なパディングを除去、さらに物理プロパティを論理プロパティへ置換することで、視覚的な一貫性とコードの保守性を向上させました。CSS カスタムプロパティと論理プロパティの活用は、コンポーネントライブラリ全体の拡張性を高める設計判断と言えます。