ブログなどで文章を書いていると、なんとなく段落の頭一文字をインデントしたいときありませんか?

text-indentを使って、字下げやぶら下げを設定する方法紹介します。

【text-indent】とは?

text-indentはCSSのプロパティの一つで、文章の段落などの一行目の字下げ幅を指定する際に使用されます。幅の指定には、pxやem、exなどの単位をつけて指定を行います。

なお、インデントの指定には、負の値(マイナス)を指定することもできるため、うまく指定することで、ぶら下げを表現することが可能となります。

字下げの設定方法

まず、字下げとは、文字通り段落の最初の一文字を下げることを指します。日本語特有の作法とされていますが、なぜそのような作法が生まれたのかはわかりませんが、段落の切れ目をわかり易くするためではないかと思います。

CSSを使って字下げする場合は、以下のように記述します。

p{text-index:1em;}

これにより、最初の文字だけ1em分(1文字分)右にずれ(インデント)ます。

 

ぶら下げの設定方法

字下げと同様に、ぶら下げの場合は、以下のように記述します。

p{paddin-left:1em;text-indent:-1em;}

まず、全体の余白を左側に作った上で、最初の一文字だけ1文字分左にずらして表現します。

【text-indent】を使った字下げ、ぶら下げのまとめ

text-indentプロパティを使った、字下げ、ぶら下げの方法を紹介しました。

字下げやぶら下げは、日本語表現の作法とされていますが、あくまで読みやすい文章を生み出すためのひとつの手段だと自分は思います。Webでの表現においては、段落どうしの幅(マージン)を十分に設けるなど、他の手段も十分に考えられると思います(実際、ブログなどで字下げしているケースはあまり見かけません)。

使うかどうかはひとそれぞれだと思いますが、日本語独特の作法を表現する手段、知って損することはないと思います。