H1 表示見出し

サブタイトルはタイトルと本文の間に置かれます。読みやすく折り返され、言語が変わっても落ち着いたリズムを保つ必要があります。

本文は通常の読書スタイルを示します。この段落には 太字の強調、斜体の強調、ハイライト、削除された文、追加された文、インラインコード、Ctrl + K、H₂O、x²、i18n、そして 通常のテキストリンク が含まれます。

小さい文字はキャプション、注記、静かなメタ情報に使えます。

H2 セクション見出し#

第2レベルは主要な区切りを作ります。本文との距離を保ちながら、ページの構造を示します。

H3 小セクション見出し#

第3レベルは流し読みに役立ちます。通常の太字とは違って見える必要があります。

H4 小見出し#

第4レベルは短い手順、狭い例、コンパクトなまとまりに使います。

H5 ラベル見出し

第5レベルは密な文章の上に置く小さなラベルに向いています。

H6 マイクロ見出し

第6レベルは最も小さい見出しですが、読みやすさを保つ必要があります。

インライン書式#

リストとチェックボックス#

• 短い文を持つ箇条書き。
• 太字 と インラインコード を含む項目。
  • 入れ子の項目。
  • プレーンテキストの参照を含む項目。

1. 1つ目の手順。
2. 2つ目の手順。
3. 小さい画面での折り返しを確認するための長めの手順。

• 無効化されたチェック済み項目。
• 無効化された未チェック項目。
• 余白を確認する別のチェック済み項目。

本文

長い読書に使う標準の段落スタイルです。

サブタイトル

タイトルの近くに置く短い補助文です。

表、引用、注記#

HTMLの表#

要素	用途	確認点
見出し	ページ構造	明確な階層
段落	読書の流れ	快適な行間
チェックボックス	フォーム状態	見やすい余白と状態

Markdownの表#

要素	用途	確認
リンク	ナビゲーション	hoverとfocusが明確
コード	技術的な文字	インラインの違いが明確
リスト	グループ化した内容	余白が読みやすい

引用#

引用は文章に別の声を与えながら、読み幅を安定させます。

注記#

この注記は小さな視覚マーカーを使います。ライトテーマとダークテーマの両方で静かに読める必要があります。

---

コードブロック#

const formatTitle = ({ title, lang }: { title: string; lang: string }) => {
  const label = new Intl.DisplayNames([lang], { type: "language" }).of(lang) || lang;
  return `${title} - ${label}`;
};

formatTitle({ title: "タイポグラフィ見本", lang: "ja" });

開閉できる要約

隠れた内容は、ネイティブの開閉要素の余白、フォーカス、文章のリズムを確認します。

画像#