Chip
種別と状態のラベル。
一覧とデータ / 内容への入口
Card
リンク先の内容と、そこで何がわかるかを示します。
基本的な使い方
Table
各テーブルを読み書きするSQL文を確認できます。
シンボル
クラスと関数、そのシグネチャと呼び出し元。
HTML
<div class="cards">
<section class="card"><h3>Table</h3>
<p class="card-description">各テーブルを読み書きするSQL文を確認できます。</p>
<p class="card-more"><a href="../table/">12テーブルを見る →</a></p></section>
<section class="card"><h3>シンボル</h3>
<p class="card-description">クラスと関数、そのシグネチャと呼び出し元。</p>
<p class="card-more"><a href="../symbol/">APIリファレンスを見る →</a></p></section>
</div>実物のプレビュー
HTML
<article class="card">
<div class="card-preview doc doc-inset" style="--dd-preview-height: auto" inert aria-hidden="true">
<div class="chips">
<span class="chip tone-blue">SELECT</span>
<span class="chip tone-violet">INSERT</span>
<span class="chip tone-teal">UPDATE</span>
</div>
</div>
<h3><a class="card-link" href="../chip/">Chip</a></h3>
<p class="card-description">種別と状態のラベル。</p>
</article>ライト・ダークの配色ペア
Linen / Teal
ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
HTML
<article class="card">
<h3 translate="no">Linen / Teal</h3>
<div class="palette-pair">
<div class="palette-sample" data-dd-palette="linen-teal" data-dd-theme="light">
<span class="cap">ライト</span>
<div class="stat tone-accent"><b class="stat-fig">978</b><span class="stat-label">検出結果</span></div>
<div class="chips" aria-label="分類"><span class="chip chip-sm tone-blue">SELECT</span><span class="chip chip-sm tone-violet">INSERT</span><span class="chip chip-sm tone-teal">UPDATE</span></div>
<div class="chips" aria-label="状態"><span class="chip chip-sm tone-ok">✓ 解決済み</span><span class="chip chip-sm tone-warn">! 一部解決</span><span class="chip chip-sm tone-danger">? 未解決</span></div>
</div>
<div class="palette-sample" data-dd-palette="linen-teal" data-dd-theme="dark">
<span class="cap">ダーク</span>
<div class="stat tone-accent"><b class="stat-fig">978</b><span class="stat-label">検出結果</span></div>
<div class="chips" aria-label="分類"><span class="chip chip-sm tone-blue">SELECT</span><span class="chip chip-sm tone-violet">INSERT</span><span class="chip chip-sm tone-teal">UPDATE</span></div>
<div class="chips" aria-label="状態"><span class="chip chip-sm tone-ok">✓ 解決済み</span><span class="chip chip-sm tone-warn">! 一部解決</span><span class="chip chip-sm tone-danger">? 未解決</span></div>
</div>
</div>
</article>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.cards / .card | 一覧と各項目。コンテナの幅に応じて1列か2列に並びます。 |
.card-preview | 領域を区切った実物のプレビュー。カードの見出しで内容がわかる場合はinertとaria-hiddenを付けます。 |
--dd-preview-height | 既定値は224pxです。文章や操作部品をすべて表示したいプレビューにはautoを指定します。文字は通常のサイズを保ちます。 |
.card-link | 見出しのリンクをカード全体に広げます。プレビュー内には操作部品を置かないでください。 |
.card-description | リンク先で読者が何を知ることができるか。 |
.card-more | 下端に揃えた詳細リンク。 |
.aside | 控えめな背景の補足領域。 |
.palette-pair / .palette-sample | 通常の文字サイズでライト・ダークを並べる見本です。基本CSSの後にdocument-design.palettes.cssを読み込み、各見本にdata-dd-paletteとdata-dd-themeを指定します。 |
使い方の注意
各項目を箱にせず、罫線でリンク先を区切ります。同じ種類のリンクには比較できる説明を添えます。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。