Next.js と Markdown を使ったブログを作っていると、
- 文字が詰まって読みにくい
- 見出しと本文の区切りが分かりづらい
- 技術記事なのにメモのように見える
と感じることがあります。
調整前は「内容は悪くないのに、読むのが少し疲れる」状態でしたが、
CSSを最低限整えるだけで、技術記事らしい読みやすさに大きく改善しました。
本記事では、行間・余白・見出し・リンク表示といった「見た目の整備」にフォーカスし、
実際に行ったCSS調整と、その考え方を整理します。
この記事で分かること
- Markdownブログで「行間が狭く見える」原因
- Tailwind Typography（prose）の正しい役割
- globals.css で行うべき最低限のCSS調整
- 記事数が増えても破綻しない見た目管理の考え方
下記記事を運用していくときに気づいた点です。
なぜ行間・余白の調整が必要なのか
Markdown は「書くこと」に集中できる反面、
そのまま表示すると見た目が最低限になりがちです。
特に技術ブログでは、
- 見出し
- 本文
- 箇条書き
- リンク
が連続するため、
余白がないと情報がひと続きに見え、非常に読みづらくなります。
この問題は、記事が1本のうちは気づきにくく、
記事が増えてから「全体的に読みにくい」と感じて表面化します。
だからこそ、初期段階での見た目調整が重要になります。
Tailwind Typography（prose）を入れても足りない理由
@tailwindcss/typography を導入すると、
Markdown は自動的に .prose スタイルで整形されます。
しかし実際には、
- 日本語フォントでは太字が弱く見える
- 行間や段落間が想像より狭い
- 見出しが本文に埋もれて見える
といったケースが多くあります。
これは不具合ではなく、
prose が「汎用的なベーススタイル」だからです。
つまり、
Tailwind Typography は完成形ではなく土台
という前提で考える必要があります。
実際に行ったCSS調整（globals.css）
調整はすべて globals.css に集約しました。
理由は次のとおりです。
- Markdownを一切触らない
- page.tsx を毎回いじらない
- 記事数が増えても1か所で管理できる
運用コストを増やさないことを最優先にしています。
段落（p）の行間と余白
.prosep {
margin-top:1rem;
margin-bottom:1rem;
}
この調整だけで、文章の読みやすさは大きく変わります。
- 文章の「かたまり」が視覚的に分かれる
- 長文でも目が滑りにくくなる
1rem にしているのは、
本文フォントサイズを基準に「1文の塊」として自然に区切れる最小単位だからです。
数値を大きくしすぎると間延びし、
小さすぎると詰まって見えるため、このあたりが実用的な落としどころでした。
箇条書き（li）の詰まり防止
.proseli {
margin-top:0.25rem;
margin-bottom:0.25rem;
}
- リストが1行の塊に見えない
- 技術手順や条件が追いやすくなる
段落ほど余白は要らないため、
p より控えめな余白にしています。
見出し（h2・h3）の強調と余白
.proseh2 {
margin-top:2.5rem;
margin-bottom:0.75rem;
padding-left:0.75rem;
border-left:4px solid#2563eb;
font-weight:700;
}
.proseh3 {
margin-top:2rem;
margin-bottom:0.5rem;
font-weight:600;
}
- セクションの切り替わりが一目で分かる
- 技術記事らしい構造が視覚的に伝わる
h2 は「章の開始」、
h3 は「章の中の論点」として役割を明確に分けています。
リンクの可読性（折り返し対策）
.prosea {
word-break: break-word;
}
- 長いURLが画面外にはみ出ない
- スマホ表示でもレイアウトが崩れにくい
技術記事ではURLをそのまま貼る場面も多いため、
地味ですが必須の調整です。
今回あえて「やらなかったこと」
実は、次のような方法も検討しました。
- MDX側で個別にスタイル指定する
- 記事ごとに class を切り替える
- Tailwind config で prose を細かくカスタマイズする
しかし今回は、
「運用負荷を増やさない」ことを最優先し、採用していません。
見た目の調整は重要ですが、
書くたびに迷う仕組みを作らないことの方が長期的には大切です。
なぜCSS調整は「後回し」にすべきではないのか
行間や余白の調整は、
- デザインの話
- 最後の仕上げ
と思われがちですが、実際は 運用のしやすさに直結します。
- 読みにくい → 書くモチベーションが下がる
- 見出しが弱い → 記事構成を意識しづらくなる
つまり、
見た目を整えることは、書き続けるための下地作りです。
運用視点での正解パターン
今回の構成で意識したのは次の点です。
- Markdownは「内容を書く」だけ
- 見た目はCSSで一括制御
- ページ側（page.tsx）は極力触らない
この分離を守ることで、
- 記事が増えても見た目が崩れない
- 調整が必要になってもCSS1か所で済む
という状態を維持できます。
まとめ
- Markdownブログは初期状態だと行間が狭く見えやすい
- Tailwind Typography はベースであり完成形ではない
- 行間・余白・見出しは globals.css で調整する
- CSS整備は「デザイン」ではなく「運用のための準備」
Next.js + Markdown のブログを長く続けるなら、
行間と余白の整備は最初にやっておくべき作業です。
コメント