Markdown全要素サンプル

2025/01/01 (更新: 2025/02/01 )

この記事について

この記事はブログのデザインを確認するためのサンプルです。Markdownで使用する全要素を含んでおり、スタイルの適用状況を一覧で確認できます。実際に公開する記事ではありません。

本文のテキストは複数の段落で構成されます。日本語と英語が混在する場合の表示も確認します。Astro is a web framework designed for speed. Content-driven websites like blogs, marketing sites, and e-commerce sites benefit the most from Astro’s architecture.

段落が連続するケースです。行間（line-height）や段落間の余白（margin-bottom）が適切かを確認してください。長めの文章を含む段落では、1行あたりの文字数が多くなりすぎないか、読みやすい幅に収まっているかも重要なポイントです。

見出しレベルの確認

h3: セクションの小見出し

見出しの直後に本文が続くケースです。見出しと本文の間の余白を確認します。

h4: さらに細かい区分

h4見出しの使用頻度は低いですが、技術記事では使う場面があります。

h5: 補足的な見出し

h5以下は本文とのサイズ差が小さくなるため、判別しやすいスタイルかを確認します。

h6: 最小の見出し

h6は実際の記事ではほぼ使いませんが、スタイルが当たっているかの確認用です。

インライン要素

テキスト内での**太字（bold）**と*斜体（italic）*の表示です。日本語の場合、太字かつ斜体はフォントによって効果が薄い場合があります。

インラインコードはこのように表示されます。変数名 const greeting = "Hello" やコマンド npm install などに使用します。

リンクはAstro公式サイトのように表示されます。文中に自然にリンクが複数含まれるケースも確認します。

~~取り消し線~~のテスト。

リストの1番目の項目
リストの2番目の項目。長いテキストが含まれる場合の折り返しを確認します。リスト項目が複数行にわたるケースでは、インデントが保たれるかが重要です。
リストの3番目の項目
- ネストされた項目A
- ネストされた項目B
  - さらにネストされた項目
リストの4番目の項目

順序つきリスト

手順1: プロジェクトを作成する
手順2: 依存関係をインストールする
手順3: 開発サーバーを起動する
1. サブステップ: ブラウザで確認
2. サブステップ: コンソールのエラーを確認
手順4: ビルドしてデプロイする

混合リスト

概要を把握する
1. ドキュメントを読む
2. サンプルを動かす
実装に取りかかる
1. コードを書く
2. テストする
レビューを受ける

コードブロック

インラインコードとは別に、複数行のコードブロックの表示を確認します。

// JavaScript のコード例
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`fibonacci(10) = ${result}`);

/* CSS のコード例 */
:root {
  --color-primary: #2337ff;
  --font-body: system-ui, sans-serif;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem;
}

# シェルコマンドの例
npm create astro@latest
cd my-blog
npm install
npm run dev

言語指定なしのコードブロック:

これは言語指定なしのコードブロックです。
特にシンタックスハイライトは適用されません。
設定ファイルの内容やログ出力の表示に使います。

引用（Blockquote）

これは引用ブロックです。他のソースからの引用や、重要な注意事項を強調する際に使用します。

複数段落の引用も確認します。

2段落目です。引用の中で太字やコードが使えるかも確認します。引用が長い場合の余白やインデントも重要なポイントです。

— 引用元の表示テスト

テーブル

項目	説明	デフォルト値
`title`	記事のタイトル	（必須）
`description`	記事の概要。SEOのmeta descriptionにも使用される	（必須）
`pubDate`	公開日	（必須）
`updatedDate`	更新日	なし
`heroImage`	アイキャッチ画像のパス	なし
`tags`	タグの配列	`[]`

セル内のテキストが長いテーブル:

技術	採用理由
Astro	コンテンツ中心のサイトに最適化されたフレームワーク。Islands architectureによりJavaScriptの配信量を最小限にできる
Cloudflare Workers	エッジで動作するサーバーレス環境。グローバルに低レイテンシで配信可能
Markdown	記事の執筆に集中できるシンプルなフォーマット。Git管理と相性が良い

水平線

セクション間の区切りに使用します。

上の線と下のテキストの間の余白を確認してください。

画像

画像は現在プレースホルダーがないため、alt テキストのみ表示されます:

長文セクション

実際のブログ記事に近い分量のテキストを配置して、全体的な読みやすさを確認します。

Astro を選んだ理由

個人ブログを構築するフレームワークとして、いくつかの選択肢を検討しました。Next.js、Gatsby、Hugo、そして Astro です。最終的に Astro を選んだ理由は、コンテンツ中心のサイトへの最適化が設計思想に組み込まれていること、そして Islands Architecture によるパフォーマンスの良さです。

ブログのような静的コンテンツが主体のサイトでは、クライアントサイドの JavaScript は最小限で済みます。Astro はデフォルトでゼロ JavaScript を出力し、インタラクティブな部分だけを Island として選択的にハイドレーションします。これにより、ページの読み込み速度が大幅に向上します。

また、Astro の Content Collections 機能は Markdown ファイルの管理に非常に便利です。Frontmatter のスキーマを Zod で定義でき、型安全にコンテンツを扱えます。記事のタイトル、説明、公開日、タグといったメタデータをスキーマとして定義し、ビルド時にバリデーションが走ります。

デプロイ先の選定

Cloudflare Workers を選んだのは、以下の理由からです:

グローバルなエッジネットワーク: 世界中のデータセンターでコードが実行されるため、どの地域からのアクセスでも低レイテンシで応答できます
無料枠の充実: 個人ブログ程度のトラフィックであれば、無料枠で十分に運用できます
Astro との統合: @astrojs/cloudflare アダプターが公式に提供されており、設定が簡単です
追加サービスとの連携: KV、R2、D1 などのストレージサービスと簡単に連携でき、将来的な拡張にも対応できます

デプロイのワークフローは GitHub Actions で自動化しています。main ブランチへのマージをトリガーにビルドとデプロイが実行されます。

記事の品質管理

textlint を導入して、記事の品質を自動的にチェックしています。現在有効にしているルールセットは以下の通りです:

preset-japanese: 日本語の基本的な文法チェック。二重否定、「ら」抜き言葉、助詞の重複などを検出します
preset-ai-writing: AI が生成したテキストにありがちなパターンを検出します。過度なリスト化、誇張表現、不自然な強調パターンなどが対象です

これらのルールは現在すべて warning レベルに設定しており、誤検知の状況を見ながら段階的に厳しくしていく方針です。CI でも textlint を実行し、プルリクエスト時に自動チェックが走るようにする予定です。

チェックリスト

脚注

これは脚注付きのテキストです¹。複数の脚注も使えます²。

まとめ

この記事では、ブログで使用する Markdown の全要素を一覧で確認しました。デザインの調整時にはこのページを参照して、各要素のスタイルが適切に適用されているかを確認してください。

確認すべきポイント:

各要素間の余白は適切か
フォントサイズの階層は明確か
コードブロックの可読性は十分か
テーブルのレイアウトは崩れていないか
長文の読みやすさ（行間、文字幅）は問題ないか

脚注の内容がここに表示されます。 ↩
2つ目の脚注です。Markdownの脚注記法は [^id] で参照し、[^id]: 内容 で定義します。 ↩