Webページで文章を読みやすく整える際、段落の字下げは古くから使われてきた基本的な表現手法です。CSSでは text-indent を使うことで、HTML構造を崩さずに段落の先頭だけを下げることができます。しかし、使い方を誤るとレイアウト崩れや可読性の低下、レスポンシブ環境での違和感につながることもあります。本記事では、text-indent による字下げの正しい実装方法と、実務で注意すべきポイントを解説します。
text-indentとは何か
text-indent は、テキストブロックの先頭行のみを水平方向に移動させるCSSプロパティです。主に段落の字下げを目的として使用され、2行目以降の行には影響しない点が特徴です。日本語の文章では、書籍や論文のような表現をWeb上で再現する際に使われることがあります。
基本的な字下げの指定方法
最も基本的な使い方は、段落要素に対して text-indent を指定する方法です。日本語では全角1文字分、つまり 1em を基準にするのが一般的です。em 単位を使うことで、フォントサイズが変わっても字下げ幅のバランスを保つことができます。
p {
text-indent: 1em;
}
この指定により、各段落の1行目だけが字下げされ、2行目以降は通常の左揃えで表示されます。
px指定を避けるべき理由
text-indent を px で指定すると、フォントサイズ変更やレスポンシブ対応時に字下げ量だけが固定され、不自然な見た目になることがあります。特にスマートフォン表示では、本文が小さくなったのに字下げだけが強調され、文章の流れを妨げる原因になります。そのため、実務では相対単位である em や rem を使うのが安全です。
字下げと余白指定を混同しない
段落の見た目を整える目的で、margin-left や padding-left を使って字下げを行うケースがありますが、これは本来の用途とは異なります。margin や padding は段落全体を移動させるため、複数行の文章では全行が右にずれてしまいます。text-indent は「先頭行だけ」を制御する点で役割が明確に異なります。
/* 誤った例 */
p {
margin-left: 1em;
}
/* 正しい字下げ */
p {
text-indent: 1em;
}
最初の段落に字下げを適用しない設計
書籍組版と同様に、見出し直後の最初の段落だけは字下げしない、という設計もWebではよく採用されます。CSSでは疑似クラスを使うことで、これを簡潔に実現できます。
p {
text-indent: 1em;
}
h2 + p {
text-indent: 0;
}
この指定により、見出しに続く最初の段落は字下げされず、読み始めの視認性が向上します。
ネガティブインデントの用途と注意点
text-indent には負の値も指定でき、これを使うと箇条書き風の表現や、先頭だけを左にはみ出させるデザインが可能です。ただし、意図を理解せずに使うとレイアウトの破綻やアクセシビリティ低下を招くため、装飾目的での多用は避けるべきです。
.note {
padding-left: 1.5em;
text-indent: -1.5em;
}
このような指定は、用語説明や注釈など、用途が明確な場面に限定して使用するのが適切です。
レスポンシブ・可読性の観点での注意点
モバイル端末では画面幅が狭いため、字下げによって1行あたりの文字数が減り、かえって読みづらくなる場合があります。そのため、スマートフォン表示では text-indent を解除する、もしくは値を小さく調整する設計も有効です。
@media (max-width: 600px) {
p {
text-indent: 0;
}
}
実務での正しい使い分け
text-indent は、段落構造を視覚的に分かりやすくするための補助的な手段です。すべての文章に機械的に適用するのではなく、文章量やコンテンツの性質を考慮して使うことが重要です。Web記事やブログでは、段落間の margin と組み合わせて、字下げを使わない設計のほうが読みやすいケースも少なくありません。
まとめ
text-indent を使えば、HTMLを汚さずに段落の字下げを実装できますが、単位指定や適用範囲を誤ると可読性を損ないます。em を基準に指定し、見出し直後やモバイル表示では調整を行うことで、実務に耐える字下げ設計が可能になります。見た目の慣習だけに引きずられず、Web特有の読みやすさを意識した使い方を心がけることが重要です。
