HTMLで先頭または2行目以降を字下げ（インデント）する方法！

HTML中のテキストで段落などの文章を字下げしたい・段落下げしたい時があります。

例えば以下の例では、「段落1行目〜3行目」は横の位置は同じです。

文章のテキスト位置をすべて揃える場合はこれでいもいいですが、先頭のみ字下げ（左に空白を入れる）したい、あるいは2行目以降を字下げしたいなどといったケースもあります。

このインデント（字下げ）ですが、HTMLで実現するためにはCSSを利用する必要があります。

今回はHTMLでの字下げの方法で、先頭または2行目以降を字下げする方法について解説していきます。

それでは順番にHTMLで字下げする方法を解説していきます。

インデントをするにはCSSのtext-indentというプロパティを利用します。値にはインデントの長さを％やpx、em、remなどで指定します。

text-indentは先頭行に対して字下げを行います。行間などには影響なく、あくまでも横位置に影響してくるプロパティです。

上記の例だとpタグに対してtext-indent: 1remが指定されており、1行目に対して左側に1rem分だけ字下げが行われます。

では1行目についてはtext-indentを使えばいいですが、2行目以降を字下げしたい（ぶら下げインデント）場合はどうするのでしょうか？

2行目以降を字下げするにはtext-indentだけではなく、maginなど他のプロパティとの組み合わせで実現します。

上記の例ではtext-indent: -1remとマイナスの値を指定しています。つまり字下げとは逆にテキストが移動（左に移動）します。

そしてmargin-leftで段落全体に対して余白をあけることによって、2行目以降を字下げする形に見せることが出来ます。

text-indentを使い字下げ・段落下げする方法を見てきました。

よく字下げでHTMLタグを増やして、marginやpaddingなどの余白を調整するプロパティで何とか実現しているという例を見ますが、CSSのtext-indentという専用のプロパティを使う事で簡単に実現することが出来ます。

ぜひ試してみて下さい！


またHTMLの箇条書きのインデントについては少しやり方が異なります。ulタグ・liタグの箇条書きのインデントの調整方法もあわせて知りたい方はぜひ下記の記事を参考にしてみて下さい。