文章 / 通読する文章
Prose
段落・見出し・リスト・引用を読みやすく組むためのタイポグラフィ。
基本的な使い方
情報を見やすくする
読み方が違えば、必要な密度も変わります。カタログで目的の一件を探すことと、レポートを理解することには、異なるレイアウトが必要です。
- 密度は余白から取る。
- 数字には意味を添える。
- わからないことを示す。
HTML
<div class="prose">
<h3>情報を見やすくする</h3>
<p>読み方が違えば、必要な密度も変わります。カタログで<strong>目的の一件を探す</strong>ことと、レポートを理解することには、異なるレイアウトが必要です。</p>
<ul><li>密度は余白から取る。</li><li>数字には意味を添える。</li><li>わからないことを示す。</li></ul>
</div>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.prose | 意味に沿ったHTMLを通読するための領域。 |
.prose-wide | 通常の本文幅の制限を外します。 |
code / kbd / blockquote | インラインコード、キー名、引用には標準のHTML要素を使います。 |
使い方の注意
見出しのレベルは欲しい文字サイズではなく、文書の構造で選びます。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。