レイアウト / カタログのレイアウト
Document
数百件の中から目的の一件を探すための、密度の高いドキュメントレイアウト。
基本的な使い方
レイアウトのリファレンス
読み方から選ぶ。
.doc- 項目を探し、比較する。
.sheet- 主張とその根拠をたどる。
HTML
<div class="doc doc-inset">
<div class="main">
<div class="content">
<h2>レイアウトのリファレンス</h2>
<p class="lede">読み方から選ぶ。</p>
<dl class="definitions">
<div><dt><code>.doc</code></dt><dd>項目を探し、比較する。</dd></div>
<div><dt><code>.sheet</code></dt><dd>主張とその根拠をたどる。</dd></div>
</dl>
</div>
</div>
</div>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.doc | カタログの枠と型スケール。文書全体をこのクラスで囲みます。 |
.main / .content | 主となる列と、幅に応じるコンテンツ領域。 |
.doc-inset | ビューポートの高さを最小値にしない、埋め込み用の枠。 |
.doc-quiet | サイドバーを控えめな面にし、作例を見やすくします。 |
.lede / .page-counts | ページの説明文と、意味を添えた件数。 |
使い方の注意
独立したページのタイトルにはh1を使います。この埋め込み例は周囲の文書に合わせてh2にしています。サイドバーは任意です。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。