ブログ記事で使う HTML 要素サンプル集

この記事は、ブログ本文のスタイリングを確認するためのダミーコンテンツです。Markdown から生成される代表的な HTML 要素を網羅的に並べています。

このテンプレートの標準CSS が、見出し・段落・リスト・引用・コード・テーブルなどに対してどのように効いているかをまとめてチェックする用途を想定しています。

段落とインライン要素

通常の段落テキストです。

文中には 太字（strong）、斜体（em）、インラインコード（code）、リンク（a）、取り消し線（del / s） などの装飾を混ぜることができます。

記事のコンテンツはl--flow直下に出力されるようになっています。要素間の余白はマージンで管理されており、見出し上部の余白は通常より大きくなっています。

長いダミー文章：ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。内容の違いを比べるためのドラーとして、静かにそこにあります。選ばれた事実や、意味を限定しない言葉の並びは、全体の雰囲気を整える役割を果たします。時間の流れの中で、そうした文章は自然に形を変え、使う人の意図に委ねられていきます。

強調の組み合わせ

強調の中に code が混ざる ケースや、斜体の中のリンク、太字の中のリンク 、リンクの中のcode など、装飾の入れ子も確認してください。

リスト

順不同リスト（ul）

• 一つ目の項目
• 二つ目の項目
• ネストを含む項目
  • 子項目 A
  • 子項目 B
    • 孫項目
• 最後の項目

順序付きリスト（ol）

1. 手順その一
2. 手順その二
3. ネストを含む手順
   1. サブステップ A
   2. サブステップ B
4. 手順その四

タスクリスト

• 完了済みのタスク
• 未完了のタスク
• もう一つの未完了タスク

引用（blockquote）

短い一文の引用を表示してみます。

複数行にわたる引用も確認しておきます。

段落をまたぐ場合に、引用全体としての余白がきちんと取られているか、ブロック内の段落間が詰まりすぎていないかをチェックします。

— 引用元の名前

コード

インライン： const value = 42;

ブロックのコードを並べてみます。

// TypeScript のサンプル
type Post = {
  title: string;
  tags: string[];
  publishedAt: Date;
};

export function formatTags(post: Post): string {
  return post.tags.map((t) => `#${t}`).join(' ');
}

/* CSS のサンプル */
.c--articleBody {
  font-size: var(--fz--s);
  line-height: 1.95;

  & h2 {
    font-size: var(--fz--xl);
    border-block-end: 1px solid var(--divider);
  }
}

# シェルコマンドのサンプル
pnpm install
pnpm dev

テーブル

普通のテーブル

数字右揃え

区切り線

セクション間の区切りに使う <hr> の見え方も確認します。

区切り線の前後で、段落の余白が崩れていないことを確認できれば OK です。

画像

画像の下に続く段落との余白を確認するためのテキストです。

まとめ

このページに並んだ要素が一通り破綻なく表示されていることを確認してからブログの公開へ進みましょう。