CATALOG / ALL COMPONENTS / DOCS VOLUME
tombo.cssの全コンポーネント。各項は実物とコピペ用マークアップの対。このページ自体がdocs音量の実演になっている — 余白だけの方眼、hr代替の寸法線、見出しの通し番号。
見当マーク
S-01。カード・図版・ヒーロー枠の四隅に置く12pxのブラケット。::before / ::afterが左上・右下を描くので、四隅に出すときだけ <b> を2つ足す。
<div class="tombo-corners"> <b class="tombo-corner-tr"></b><b class="tombo-corner-bl"></b> … </div>
寸法線
S-02。hrの代替。端の立ち上がりと中央の線、その下に等幅のキャプション。docs音量ではセクションの区切りに使う。
<div class="tombo-dim"></div> <div class="tombo-dimlab">section — 02.1 / requirements</div>
目盛リスト
S-03。箇条書きの黒丸をgreenの目盛線に置き換えるリスト。
- リクエストとレスポンスをOpenAPI定義で検証する
- カバレッジを操作 × ステータス × content-typeで数える
- ドリフトをCIで検出する
<ul class="tombo-ticks"> <li>リクエストとレスポンスをOpenAPI定義で検証する</li> </ul>
ルーラー
S-03。10% 刻みの目盛トラックにgreenの充填、朱の縦線が現在値。値はインラインcustom propertyで渡す(システム唯一の許可インラインスタイル)。
<div class="tombo-ruler" style="--tombo-ruler-value:62%"></div>
通し番号
S-04。.tombo-sections配下の .tombo-sec見出しに「01 — 」を自動採番する。このページの見出しがそのまま実演。図版の銘は .tombo-fig。
FIG. 01 — ENDPOINT COVERAGE
<main class="tombo-sections"> <h2 class="tombo-sec">インストール</h2> <!-- 01 — インストール --> </main> <p class="tombo-fig">FIG. 01 — ENDPOINT COVERAGE</p>
朱の現在地
S-05。朱は2pxの線でだけ「ここ」を指す。キッカーの先頭・タブの下線・目次の左線。現在状態はaria-current属性で宣言する(クラスではなく)。
GESSO — FIG. 00 / CONTRACTS, MEASURED
<p class="tombo-kicker">GESSO — FIG. 00</p> <nav class="tombo-tabs"> <a href="#" aria-current="page">画面一覧</a> <a href="#">依存グラフ</a> </nav> <nav class="tombo-toc"> <a href="#" aria-current="page">02 — インストール</a> </nav>
ボタン
primaryは唯一のgreen面塗り。secondaryはinkの罫線、ghostは下線リンク型。角丸なし。動作は<button>、遷移は<a> — 見た目は同一。
<button class="tombo-btn tombo-btn--primary">Choose a quickstart</button> <button class="tombo-btn tombo-btn--secondary">View on GitHub</button> <button class="tombo-btn tombo-btn--ghost">Read the spec</button> <!-- 遷移には a — 見た目は button と同一 --> <a class="tombo-btn tombo-btn--primary" href="/quickstart">Choose a quickstart</a>
コードブロック
昼は夜の面、夜は罫線 — コードは沈めない。figcaptionの左右にラベルを振り分ける。
1 $ composer require wadakatu/laravel-spectrum 2 $ php artisan spectrum:generate
<figure class="tombo-code"> <figcaption><span>SHELL — INSTALL</span></figcaption> <pre tabindex="0">$ composer require wadakatu/laravel-spectrum</pre> </figure>
コールアウト
左の2pxが既定は朱(位置の印)、--warnで警告色。先頭の <b> が等幅の銘になる。
<div class="tombo-callout"><b>NOTE — 001</b>本文。</div> <div class="tombo-callout tombo-callout--warn"><b>WARN — 002</b>本文。</div>
テーブル
ヘッダは等幅の大文字 + inkの1.5px罫、行はhairline。数値セルには .tombo-monoを併用する。列が多い表は狭い画面で列に収まらないので、必ず .tombo-table-wrapで包む — データ表はWCAG 2.2のReflow(SC 1.4.10)の例外だが、スクロールさせてよいのは表であってページではない。スクロール領域はフォーカス可能にしないとキーボードで動かせないため、role="region" + アクセシブル名 + tabindex="0" が揃って1セットになる。
| Requirement | Version | Notes |
|---|---|---|
| PHP | ≥ 8.2 | OpenSSL, mbstring |
| Laravel | ≥ 11.0 | optional, for adapter |
動作要件 — 幅が足りなければこの枠内だけが横スクロールする
<div class="tombo-table-wrap" role="region" aria-labelledby="cap" tabindex="0">
<table class="tombo-table">
<thead><tr><th>Requirement</th></tr></thead>
<tbody><tr><td>PHP</td></tr></tbody>
</table>
</div>
<p class="tombo-dimlab" id="cap">動作要件</p>
チップ
app音量のステータス表示。data-statusが点の色を決める(ok / warn / err)。点は装飾なので読み上げ対象外。
<span class="tombo-chip" data-status="ok">OK</span> <span class="tombo-chip" data-status="warn">STALE</span> <span class="tombo-chip" data-status="err">MISSING</span>
メトリクス
計器カード。銘(.k)・値(.v)・ルーラーの積み。見当マークと組み合わせるのが定形。
<div class="tombo-metric tombo-corners"> <b class="tombo-corner-tr"></b><b class="tombo-corner-bl"></b> <div class="k">COVERAGE</div> <div class="v">96.2</div> <div class="tombo-ruler" style="--tombo-ruler-value:96%"></div> </div>
ロゴ刻印
C-01見当マークのCSS化。フッターに刻印する。--glowはLPヒーロー専用で、hotaruのとき尾が蛍光greenに発光する(spec §9唯一の発光例外)。装飾なのでaria-hiddenを付ける。
<span class="tombo-logo" aria-hidden="true"> <i class="h"></i><i class="b"></i><i class="w1"></i><i class="w2"></i><i class="t"></i> </span>
ユーティリティ
.tombo-displayはInstrument Sans 700の欧文題字(和文が混ざる見出しはh1/h2を使う)、.tombo-labelは等幅の大文字銘、.tombo-monoは等幅化。方眼は音量クラスで敷く — .tombo-vol-lpがヒーロー全面、.tombo-guttersが余白のみ(このページが実演)、appは敷かない。
和欧混植の間隔はCSSに任せる。tombo.css が text-autospace: normal を body に効かせるので、和文と欧文の境目にブラウザが八分アキ(1/8 em)を入れる — 手打ちの半角スペースは要らない。code/pre は逐語なので除外。未対応ブラウザはベタ組みにdegradeし、実装が揃えば自動で八分アキになる。このページの本文が実演——ソースは詰めて書き、間隔はブラウザが入れている。
TOMBO
MEASURED / SET IN MARTIAN MONO
<h1 class="tombo-display">TOMBO</h1> <p class="tombo-label">MEASURED / SET IN MARTIAN MONO</p> <body class="tombo-gutters"> <!-- docs: 方眼は余白のみ --> <section class="tombo-vol-lp"> <!-- LP: ヒーロー全面 -->
コンテナ
用途別の4段。.tombo-shell が唯一のクラスで、幅は --tombo-shell を読む。ページ全体の幅は :root に一度だけ書き、修飾子はその要素だけ付け替える。.tombo-gutters も同じ変数を読むので、余白の方眼は常に本文の端に接する。ブレークポイントは無い — max-inline-size とclamp() のガターで全幅域を連続的に埋める。
--tombo-shell-reading — 65ch ≒ 621px / 本文。和文41字・欧文76字
--tombo-shell-default — 1280px / 通常ページ・ドキュメント
--tombo-shell-wide — 1792px / LP・カードグリッド・ダッシュボード
.tombo-shell--full — 幅制限なし / 背景・装飾。ガターも0
<div class="tombo-shell"> <!-- ページの幅(既定 = default) --> <div class="tombo-shell tombo-shell--reading"> <!-- 本文 --> <div class="tombo-shell tombo-shell--wide"> <!-- LP・グリッド --> <div class="tombo-shell tombo-shell--full"> <!-- 背景・装飾 -->
ページ全体の段を変えるときだけ、自分のスタイルシートで --tombo-shell を差し替える。インライン style は使わない — システムが認めるインラインcustom propertyは --tombo-ruler-value だけ。宣言は必ず :root に置く — <body> 以下に書くと、<body> に載る .tombo-gutters の方眼が追従しない。
:root { --tombo-shell: var(--tombo-shell-wide); }
発光
S-06。hotaru = 蛍。夜だけ計器が光る。.tombo-glow はオプトインで、面を光らせ、縁にリングを回し、中の .tombo-display と .tombo-metric の数値に暈をつける。トークンが全部 light-dark(transparent, …) なので昼は完全に不活性で、テーマセレクタが要らない — OSのダークモードにも data-theme にも color-scheme 経由で追従する。
FIG. 16 — LIT INSTRUMENT
この注記は発光面の中なのでink-subに一段上がっている
<header class="hero tombo-vol-lp tombo-glow tombo-corners"> … </header> <figure class="tombo-metric tombo-glow"> … </figure>
2点が仕様として固定されている。光はbackground-imageに合成し、擬似要素では作らない — .tombo-corners をはじめsignature classesはほぼ全部 ::before/::after を使っているので、擬似要素で光を作ると組み合わせた瞬間にどれかの印が消える。発光面の中では注記の階調が一段上がる — 光で下地が約1.3ポイント明るくなり、--tombo-ink-faint が4.5:1を割るため。.tombo-glow がトークンを差し替えるので配下は自動で追従する。コントラストゲートは合成後の下地で測るので、--tombo-glow-wash を .23より上げるとビルドが落ちる。
フォーム
ネイティブ優先。造形は .tombo-field の中でだけ効く（外のinputは素のまま）。ハイブリッド＝ hairlineのボックス＋状態を運ぶ下ルール（focus=green・invalid=臙脂）。ラベルは等幅の計器声、requiredはinkの *（朱は線専用のまま）。checkbox/radioはネイティブ accent-color。エラーは aria-describedby と aria-invalid で結線する。
<div class="tombo-field">
<label for="cov">COVERAGE THRESHOLD<span class="tombo-req" aria-hidden="true">*</span></label>
<input id="cov" type="number" required
aria-describedby="cov-help cov-err" aria-invalid="true">
<p class="help" id="cov-help">0–100の整数。</p>
<p class="error" id="cov-err">0から100の数値を入力してください。</p>
</div>
<div class="tombo-field">
<label for="fw">FRAMEWORK</label>
<div class="tombo-select"><select id="fw"><option>Laravel</option></select></div>
</div>
<fieldset class="tombo-fieldset">
<legend>MODE</legend>
<label class="tombo-check"><input type="radio" name="m"> Strict</label>
</fieldset>
印刷
TOMBOは名前どおり印刷の見当マーク。どのページも @media print で素直に刷れる（夜テーマも紙は白、コードは白地インク、トグルやコピーボタンは消える、計器ブロックは改ページで割れない）。さらに <body class="tombo-trim"> を付けると、紙面の余白に本物のトンボ——四隅の角トンボと各辺中央のセンタートンボ——がインク1色で毎ページ刷られる。ブラウザ印刷に裁ち落とし領域は無いので、単一の角トンボ（＝印刷可能域の角を指す）を採る視覚的オマージュ。
このカタログ（components.html）自体はopt-inしていないので、⌘P してもトンボは出ない。docs.html を ⌘P するとトンボが出る。
<body class="tombo-trim"> <!-- 中身は普段どおり。印刷すると余白にトンボが出る --> </body>
図版
S-03「グラフ軸」の部品化。.tombo-plate(=版)が図版枠 — hairline罫 + padding、溢れたら枠内だけが横スクロールする(SVGの最小幅は --tombo-plate-min、既定560px。上書きはスタイルシートで — インラインcustom propertyは --tombo-ruler-value だけ)。銘は既存の .tombo-fig を <figcaption> に載せて枠の上に置く。チャート内部は枠配下でだけ効く — .axis(hairline目盛線)/ .base(ink基線)/ .bar(green面、.is-zero はhairline)/ .val(値ラベル)/ .now(朱の現在地)。SVGの text は自動で等幅・label段・ink-faintになる(銘は等幅)。
規範: 軸は1本(ink基線のみ、第2軸は作らない)・目盛線はhairline・単系列はgreen一色(多系列の色分けはしない — 系列が増えたら図を分ける)・値ラベルは選択的(ピークだけ。全記入は数表の仕事)・朱は現在地のみ(選択中の週・今日を指す線。データには使わない)。
NUMBERS — 数表を開く
| DATE | COMMITS | TOTAL |
|---|---|---|
| 07/20 MON | 3 | 4 |
| 07/21 TUE | 7 | 9 |
| 07/22 WED | 0 | 0 |
| 07/23 THU | 14 | 21 |
| 07/24 FRI | 4 | 6 |
| 07/25 SAT | 9 | 12 |
| 07/26 SUN | 2 | 3 |
<figure>
<figcaption class="tombo-fig">FIG. 01 — DAILY CONTRIBUTIONS</figcaption>
<div class="tombo-plate">
<svg viewBox="0 0 720 200" role="img" aria-label="日別コントリビューション数の棒グラフ">
<line class="axis" …/><text …>12</text> <!-- hairlineの目盛線 + 等幅の銘 -->
<rect class="bar" … tabindex="0" aria-label="07/23 THU: 21"/>
<rect class="bar is-zero" …/> <!-- ゼロ値は2pxスタブ -->
<text class="val" …>21</text> <!-- 値ラベルはピークだけ -->
<line class="now" …/> <!-- 朱は現在地のみ -->
<line class="base" …/> <!-- 軸はこの1本 -->
</svg>
<div class="tombo-tip" role="presentation"><b>07/23 THU — 21</b>COMMITS 14</div>
</div>
<details class="tombo-numbers">
<summary>NUMBERS — 数表を開く</summary>
<div class="tombo-table-wrap" role="region" aria-label="日次の数表" tabindex="0">
<table class="tombo-table">…</table>
</div>
</details>
</figure>
ツールチップはこのデモでは見せるために静置している(カタログはページJSゼロ)。実装では既定 display:none — 消費側JSが display を立て、transform: translate(x, y) で置く。アクセシブルなデータ経路は数表が担い、ツールチップは視覚の補助(role="presentation"・pointer-events:none)。インタラクティブなバーには tabindex="0" と aria-label を振る。枠がスクロールし得るのに中にフォーカス可能要素が無い図では、テーブルと同じ作法(role="region" + アクセシブル名 + tabindex="0")を枠に付ける。
トップバー
アプリ音量の先頭。外枠が全幅のhairline下罫を引き、幅は直下の .tombo-shell が決める(下罫はビューポート全幅・中身はshellが絞る)。ロゴ段(.brand)はdisplay声のtext-body固定 — 実装ごとの14/15pxのブレはここで止まる。中の <a> はink継承・下線なし。右肩(.meta)は等幅ink-faintで margin-inline-start: auto — ユーザー名やREVなど大小文字を運ぶのでuppercaseはかけない。タブは .tombo-tabs をそのまま入れる — 組み込み時の打ち消し(border-block-end: 0; flex: auto)は部品側が吸収する。要素は <header>(bannerランドマーク)、現在地は従来どおり aria-current。行はbaseline揃え、狭幅ではwrapで折り返す(.meta を消したいページは自分のCSSで — 部品は消さない)。
<header class="tombo-topbar">
<div class="tombo-shell">
<span class="brand"><a href="/">SCREENBOOK</a></span>
<nav class="tombo-tabs">
<a href="/screens" aria-current="page">画面一覧</a>
<a href="/deps">依存グラフ</a>
</nav>
<span class="meta">wadakatu@prod / REV 4.2.1</span>
</div>
</header>
アプリ/ダッシュボード音量のページの先頭20行を、どのプロダクトでも同一マークアップにするための部品。ロゴだけ・タブ無しの構成も可 — .meta はauto marginで右肩に残る。実物は examples/app.html の先頭。