はじめに
このテンプレートは、テキストと画像が中心のブログ記事を想定したシンプルな1ページ構成です。スマホ〜PCでの可読性を重視し、行間・余白・行幅・画像サイズの自動最適化を行います。
本文見出し（画像＋テキスト）
本文の各セクションでは、適切な見出し構造（h2/h3）を保ちながら、画像や引用、リスト、コードなどの要素を混在させることができます。
画像は<figure>と<figcaption>を使うことで、説明文を付けられ、アクセシビリティ上も有利です。
小見出し：箇条書き
- 読みやすい行間と余白
- 長すぎない行幅（可変）
- ダークモード自動対応
小見出し：引用とコード
「文章は短く、論旨は明確に。」— だれか
/* コード例（CSS） */
.prose code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
表や注意書き
| 項目 | 内容 | メモ |
|---|---|---|
| サイズ | 自動で横幅にフィット | モバイル優先 |
| 余白 | コンテナに合わせて調整 | 読みやすさ重視 |
| 配色 | OSのモードに連動 | ライト/ダーク |
まとめ
本テンプレートは、HTML/CSS/JSを分離しており、カスタマイズもしやすい構成です。必要に応じて、フォント、配色、余白、見出し階層をプロジェクトに合わせて調整してください。