スタイルシートで段落の先頭を字下げする方法

本のように段落の先頭を字下げしたい

書籍や雑誌などの文章では、段落の先頭に1文字分ほどの空白を設ける「字下げ」が使われていることがあります。ウェブ上でこれを実現するには、どうすれば良いでしょうか？

各段落の先頭に1文字の空白文字を挿入する……とすると、段落が多い場合には面倒です。最初から段落の分割がハッキリしていればまだ良いでしょう。しかし、推敲の段階で構成を修正しつつ完成させようとする場合、編集するたびに字下げ位置の調整が必要になり、とても面倒です。

かといって、全ての文章が完成してから、各段落の先頭に1文字ずつ空白文字を挿入するのもまた面倒ですね。

というわけで今回は、自動的に全ての段落の先頭に字下げを加えられる方法をご紹介致します。

text-indent（テキスト・インデント）プロパティ

スタイルシートには、次のようなプロパティが用意されています。

text-indent

その名の通り、インデントに関して細かく指定を行うプロパティです。
このプロパティに値を指定することで、段落の先頭の字下げを実現できます。

指定方法

字下げの量は、文字数でも指定できますし、ピクセル数でも指定できますし、親要素の大きさに対する割合で指定することも可能です。
具体的には、次のように記述します。

text-indent: 1em;

上記のように記述すれば、1文字分だけ空く（字下げされる）ことになります。

text-indent: 5px;

上記のように記述すれば、5ピクセル分だけ空きます。

text-indent: 12%;

上記のように記述すれば、親要素の幅に対して12%だけ空きます。
下記は、「1em」を指定した場合と「30px」を指定した場合のサンプルです。段落先頭に確保された空間を確認してみて下さい。

■text-indent: 1em;

■text-indent: 30px;

最後に、HTMLソース中に記述する具体例をご紹介致します。

それでは、次のページへ！ →