/** * 成績テーブル。カードで囲わず、0.5pxのヘアラインのみで区切る。 * ゼブラ縞は使わない。赤は打率1位のみ（design-policy.md 3章: 赤は1画面に2〜3箇所まで）。 * * @package goonies */ /* 21列（打撃）・20列（投手）はモバイル幅に収まらないため横スクロールさせる （design-policy.md 10章）。position: relative は右端グラデーションの土台。 tabindex="0" はマークアップ側（矢印キーでのスクロールに必要）。 width: 100% + min-width: 0 + max-width: 100% はいずれも、中の幅広い table に 引きずられてこの要素自体、ひいては .stats-page 等の祖先・ページ全体まで 横スクロールしてしまわないための保険（本来の原因は .site-main 側の flex アイテムの自動最小幅と、祖先の block要素は width だけでは中身のはみ出しを 止められない点。base.css / assets/css/stats-page.css 参照） */ .stats-table-scroll { position: relative; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; /* overflow-xだけを指定するとブラウザはoverflow-yを暗黙にautoへ変換し、 この要素自体が縦方向のスクロールコンテナになる（CSS Overflow仕様の既定挙動）。 すると中のsticky theadの基準がviewportではなくこの要素になり、 top: var(--header-sticky-offset) の意味がズレる。overflow-y: clip を 明示してその昇格を防ぐ（縦方向は元々はみ出さないため見た目への影響は無い） */ overflow-y: clip; } /* スクロール領域の右端。まだ続きがあることを示す薄いグラデーション（幅24px）。 JS（assets/js/stats-table.js）が右端到達時・そもそも収まる場合に非表示にする */ .stats-table-scroll::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; background: linear-gradient(90deg, transparent, var(--c-paper)); pointer-events: none; opacity: 1; transition: opacity var(--duration-standard) var(--ease-standard); } .stats-table-scroll.is-scroll-end::after, .stats-table-scroll.is-not-scrollable::after { opacity: 0; } /* table-layout: fixed + min-width（列幅の合計をtableタグ側でカスタムプロパティとして 指定。打撃1204px・投手1148px）で「列幅の合計 = テーブル幅」を厳密にする。 width: max-content はキーワードによる内在サイズ計算のため、深くネストした overflow-x: auto 内で正しくクリップされないことがあったため、確定した px 値の min-width に置き換えた。width: 100% + auto layout だと内容に対して テーブルが必要以上に広がるため使わない。 .stats-table-scroll に包まれる打撃・投手テーブルにだけ適用する （CAREER STATS・ランキング表は列幅を指定していないtable-layout: autoのまま） */ .stats-table-scroll .stats-table { width: 100%; min-width: var(--goonies-stats-table-min-width); table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; } /* colgroupで列幅を確定する。背番号・選手名はsticky列の左オフセット計算のため 固定幅が必須。375px幅で固定列を除き最低6列見えるよう詰めている */ .stats-table__col--number { width: 32px; } .stats-table__col--name { width: 80px; } .stats-table__col--data { width: 34px; } /* ランキング表・CAREER STATS（.stats-table-scrollで包まない小さい表）の既定幅。 打撃・投手テーブルは上の .stats-table-scroll .stats-table が 詳細度で上書きする（table-layout: fixed + 列幅合計のmin-width） */ .stats-table { width: 100%; border-collapse: collapse; margin: 0; } /* table-layout: fixed で横スクロールするテーブル（page-stats.php の打撃・投手、 選手個別ページ CAREER STATS の打撃成績）は をテーブルの外 （.stats-table-scroll の手前）に出しているため、

として組む。 スクロールしても見出しが流れないようにするため（テーブル内のcaptionは スクロール領域と一緒に流れてしまう）。テーブルとは aria-labelledby で紐づける。 ランキング表・CAREER STATSの投手成績（横スクロールしない）は 従来どおり のまま */ .stats-table__caption { text-align: left; font-family: var(--f-display); font-weight: var(--fw-display-regular); font-size: var(--fs-section-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gray-50); margin: 0 0 16px; } .stats-table__cell { padding: 10px 6px; border-bottom: 0.5px solid var(--c-gray-15); text-align: left; font-size: var(--fs-table-number); font-weight: var(--fw-body-regular); color: var(--c-ink); font-variant-numeric: tabular-nums; transition: background var(--duration-standard) var(--ease-standard); } /* リスト行ホバー：背景をごく淡く（design-policy.md 9章）。固定列（sticky）にも 同じ背景を効かせるため、行ではなく行内の td/th 全体に対して指定する （.stats-table__cell--sticky が個別に background: var(--c-paper) を持つため、 詳細度で上書きできるようセレクタをその分だけ具体的にする） */ .stats-table__row:hover .stats-table__cell { background: var(--c-hover); } /* 打撃・投手テーブルは列幅32〜80pxに詰めるため、通常の表より余白を絞る。 数値列は折り返さない（5桁の値まで想定）。見出しは折り返してよい （design-policy.md 4章のテーブル数値12pxを基準に、収まらないため11pxまで下げる） */ .stats-table-scroll .stats-table__cell { padding: 8px 2px; } /* td だけを指定する（th は --num クラスを右寄せ目的で共有しているため、 ここで font-size を変えると列見出しの文字サイズまで変わってしまう） */ .stats-table-scroll td.stats-table__cell--num { font-size: 11px; white-space: nowrap; } .stats-table-scroll .stats-table__cell--head { white-space: normal; line-height: 1.3; /* 2行に折り返す見出し（与四死球率等）が混ざっても、1行の見出しと下端が揃うように 明示する（テーブルセルの既定の垂直配置はブラウザ間で解釈が割れやすいため、 baseline依存にせず bottom を明示する） */ vertical-align: bottom; } .stats-table__cell:first-child { padding-left: 0; } .stats-table__cell:last-child { padding-right: 0; } .stats-table__cell--head { font-family: var(--f-body); font-size: var(--fs-annotation); font-weight: var(--fw-body-regular); color: var(--c-gray-50); } .stats-table__cell--num { text-align: right; } .stats-table__cell--number { font-family: var(--f-display); font-weight: var(--fw-display-regular); color: var(--c-gray-25); } .stats-table__cell--name { font-family: var(--f-display); font-weight: var(--fw-display-regular); font-size: var(--fs-list-heading); color: var(--c-ink); /* 96px幅に収まらない選手名は省略せず折り返す（T.MIZUKO / K.AKASAKA 等で確認済み。 ハイフンの無いローマ字表記のため overflow-wrap を anywhere にする） */ white-space: normal; overflow-wrap: anywhere; } .stats-table__cell--leader { color: var(--c-accent); font-weight: var(--fw-display-medium); } /* 背番号・選手名列を左端に固定する（design-policy.md 10章）。 ヘッダ行（thead）は別途 top: var(--header-sticky-offset) も加わり、左上の2セルは 上下左右どちらのスクロールでも画面内に留まる（z-indexを最も高くする） */ .stats-table__cell--sticky { position: sticky; background: var(--c-paper); z-index: 1; } /* top はサイトヘッダー（position: sticky）の現在の高さぶん下げる。0のままだと スクロール時にサイトヘッダーの裏に潜り込んでしまう（assets/css/base.css の --header-sticky-offset 参照。ヘッダーの縮小・管理バー表示にも追従する）。 この位置指定はviewport基準が前提。祖先要素（.stats-page 等）に none 以外の transform を付けると基準がすり替わり沈み込むため付けないこと （assets/css/base.css の .reveal.js-reveal-init.is-visible 参照） */ .stats-table-scroll thead .stats-table__cell { position: sticky; top: var(--header-sticky-offset); background: var(--c-paper); z-index: 2; } .stats-table-scroll thead .stats-table__cell--sticky { z-index: 3; } .stats-table__cell--number.stats-table__cell--sticky { left: 0; } .stats-table__cell--name.stats-table__cell--sticky { left: 32px; border-right: 0.5px solid var(--c-gray-15); } /* 固定列の右端、右方向への薄い影（スクロールでその下に本文が隠れることを示す） */ .stats-table__cell--name.stats-table__cell--sticky::after { content: ''; position: absolute; top: 0; right: -8px; bottom: 0; width: 8px; background: linear-gradient(90deg, rgba(20, 20, 20, 0.08), transparent); pointer-events: none; } /* ソート可能な列見出し。