各段落の先頭を自動で字下げ(インデント)表示するCSSの書き方

あまりウェブ上では一般的ではない気がしますが、書籍や雑誌などの文章では段落の先頭で「字下げ」(インデント)がよく使われてます。段落の先頭に1文字分の空白を挿入する掲載スタイルです。

字下げする目的で「全角の空白文字」をHTMLソース内に記述してしまうと、後から字下げを修正したい際(取り除きたい際など)に面倒です。スタイルシートには「字下げ」を実現するプロパティ「text-indent」がありますから、ウェブ上に掲載する文章で(段落の先頭などで)字下げしたい(＝インデントを加えたい)場合は、スタイルシートを使う方が望ましいでしょう。

例えば、以下のようにCSSソースを記述すると、段落(p要素)の先頭に1文字分の空白ができ、字下げ効果が実現できます。

p {
   text-indent: 1em;
}

このスタイルを実際に使ってみると以下のような感じで表示されます。

日本語文だと字下げの量は「1文字分」が基本でしょうね。しかし、英文の場合はもっと6～8文字分くらい空けたりするらしいです。そういう場合は、text-indentプロパティの値に「6em」とか「8em」など、もっと大きな値を指定すれば良いでしょう。

p {
   text-indent: 6em;
}

ウェブ上の文章では字下げしないのが一般的だと思いますので、あまりこの装飾は必要とされない気もしますけどもね。

ちなみに、text-indentプロパティの値にはマイナスの値を指定することもできます。段落の先頭だけを直前の部分に食い込ませたいといった特殊なデザインを作る際には使えそうな気がします。(ちょっとすぐには例えが思いつきませんが。^^;)

印刷時にだけ自動で字下げされるようにするCSSの書き方

印刷専用スタイルシート(＝印刷時のみに適用されるスタイルシート)にこの装飾を加えておくとか、そういう用途もあるかも知れません。

@media print {
   p {
      text-indent: 1em;
   }
}

上記のように「@media print」と書いてから中括弧内にCSSソースを記述すると、その範囲のスタイルは印刷したときにだけ適用されるようになります(画面表示には適用されません)。つまり、上記のCSSソースでは、印刷時にだけp要素に対して字下げが行われます。

というわけで、「字下げ」をするにはtext-indentプロパティが使えますよ、という話でした。

(更新日：2017年07月02日)