「text-indent」の賢い使い方

そもそも「indent（インデント）」ってどういう意味？

調べてみました。辞書で。
「…にぎざぎざをつける」だそうです。
その意味よりも「ぎざぎざ」っていう言葉が公式に使われていることにちょっと驚きました。ちょっとかわいいですね。
ということで、意味はそんな感じです。

ではIT系の文言としての「indent」はどういった意味かと言いますと、ずばり「文字下げ」です。こっちの方が辞書っぽい（笑）
ソースコードを書く時に階層の深さでインデントさせて視認性を良くするっていうのがわりと一般的ですね。
（弊社ではHTMLの記述はインデントさせないという暗黙のルールがありますが。）

そもそもの使い方

話をCSSに戻します。
「text-indent」は「そこに書かれているテキストの先頭の文字を下げる（もしくは上げる）」という動作をしてくれます。

確かに「ギザギザ」してますね。
「文章は段落に分けて、段落の一文字目はひとますあける。次の段落に行く時は一行あけること。」
小学生の時、かっこいい文章の書き方を担任の曽我部先生にこう教わりました。
一文字分（1em）を設定すると文章の頭がへっこみます。この場合「右にずれる」が正しい言い方ですかね。

p {
	text-indent:1em;
}

曽我部先生の影響力ハンパないです（笑）

ぶら下げインデント…？

と言われてもよくわからない方は下の例を見てください。

ul {
	margin:0;
	padding:0;
	list-style:none;
}
li {
	padding-left:1em;
	text-indent:-1em;
}

CSS先輩はこう言ってます。
「おいliタグ。お前の左側全部一文字分余白あけろ。そんでもって先頭におるヤツ、そいつだけ一文字分左に元気よく飛び出せ。」
こういう命令、文章の書き方で「ぶら下げインデント」と言います。単純に見栄えが良くなるので結構頻繁に使えます。

「indent」がなんとなく「へこませる」というイメージなので、それを「-1em」とかパッと想像できないことがありますが、padding-leftとtext-indentを逆に指定すると下のようになっちゃうので注意が必要です。

何を隠そう私はこれが来るたびに毎回逆に書いてしまいます。
逆に書いた例が下です。

こうなっちゃった場合は、すかさず直しましょう。（笑）
やってるうちに覚えてくるはずです。
（そもそもpaddingにマイナスは使えません…ﾁｰﾝ）