記事内要素のデザイン確認用サンプル

記事本文で使う要素を一通り並べたデザイン確認用のサンプルです。見出しの階層、段落の余白、リスト、表、コードブロックなどの見た目を、この1ページで確認できるようにしています。

見出しの階層

見出しレベル2（h2）は上に 2.6em、下に 0.8em の余白が入ります。

見出しレベル3

見出しレベル3（h3）は本文より一段大きいサイズの太字です。装飾は付けず、字面の差と上下の余白だけで区切ります。段落の直後に置いたときの余白も確認してください。

見出しレベル4

見出しレベル4（h4）は本文と同じ文字サイズの太字で、本文（--ink2）より濃い色（--ink）で表示されます。

見出しレベル5

見出しレベル5（h5）は本文より一段小さいサイズの太字です。

見出しレベル6

見出しレベル6（h6）はもう一段小さいサイズです。

段落

1文だけの短い段落です。

段落を連続させたときの余白を確認するための2つ目の段落です。段落の下には 1.6em の余白が入ります。見出しの直前・直後の余白と比べて、リズムが一定に見えるかを見てください。

少し長めの段落も用意します。日本語の本文が行送り・字間ともに読みやすいか、行末の処理が気にならないかを確認するために、ある程度の文章量を入れておきます。段落が複数行になったときに文字色（--ink2）が紙の色と十分なコントラストを保っているか、1つの段落としてまとまって見えるかも見どころです。

インライン要素

段落の中に強い強調（太字）、強調（斜体）、取り消し線、インラインコード を混ぜた例です。外部リンクはPixelogのトップページのように下線付きで表示されます。内部リンクは2026年のアーカイブのような相対パスでも確認できます。

リスト

箇条書き

• リスト項目の1つ目
• リスト項目の2つ目
  • ネストした項目
  • ネストした項目2
• リスト項目の3つ目

番号付きリスト

1. 手順の1つ目
2. 手順の2つ目
   1. ネストした項目1
   2. ネストした項目2
3. 手順の3つ目

リストの直後に段落を置いたときの余白も確認します。

引用

引用は左に細い縦線が入り、本文より少し控えめな色になります。複数行になったときの行間も確認してください。

引用の中で段落を分けると、段落間の余白がどう出るかを確認できます。

2つ目の段落です。

表

セルの中に インラインコード を入れた場合も確認します。長いテキストを入れたセルがどう折り返されるか、列幅が文字数に応じて広がりすぎないかを見てください。

コード

インラインコードは npm run dev のように本文中に埋め込みます。

言語指定ありのコードブロックです。

const posts = await getCollection("blog");

export const getSorted = (items) =>
  [...items].sort((a, b) => b.data.published_at - a.data.published_at);

言語指定なしのコードブロックです。

タイトル: 記事内要素のデザイン確認用サンプル
カテゴリ: 技術メモ

横スクロールを確認するための長い1行です。

const veryLongLine = "この行は横スクロールの挙動を確認するために意図的に長くしています。コードブロックには overflow-x: auto が指定されているため、折り返さずに横スクロールになるはずです。";

区切り線

区切り線（hr）の上下の余白を確認します。

上の区切り線の下の段落です。

画像

通常のMarkdown画像です。幅いっぱいに広がり、角が丸くなります。

figure と figcaption を使った例です。キャプションは本文より小さく、控えめな色で表示されます。

折りたたみ

console.log("details の中のコードブロック");

注記

本文の補足や注意を目立たせたいときに使う注記です。左の罫線の色と背景の淡い色で種類を区別します。Markdown にそのまま HTML を書いて使います。

caution / warning のクラスを足すと種類が変わります。中に段落やリストを置くこともできます。

まとめ

見出し・段落・リスト・引用・表・コード・画像・区切り線・注記を一通り並べました。実際の記事を書くときは、このページの見た目を基準に判断してください。