text-indentで2行目以降を1文字下げる【CSS】

注意書きや箇条書きの際に、最初の1文字を※や・などのアイコンや記号する事はよくあるかと思います。
2行目以降の最初の1文字が、そのアイコンや記号の下に回り込まないようにするためのやり方をご紹介します。

1文字下げなかった場合

まずは、何もしない場合をご覧ください。

※２行目以降の字下げについて。何もしないと２行目以降も１行目と同じ位置からスタートします。２行目以降の字下げについて。何もしないと２行目以降も１行目と同じ位置からスタートします。

注意書きはデザインによってはこれで大丈夫かもしれませんが、箇条書きのリストの場合は読みにくくなりますので、1文字下げた方が読みやすくなります。

text-indentで1文字下げた場合

text-indentで1文字下げた場合は以下のようになります。

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

1em(1文字分)を指定する事によって、padding-leftで1文字分の余白を左側にあけ、1行目の1文字目をtext-indentでマイナスにする事で左側に1文字分戻しています。
画像などのアイコンを指定する際は、画像のサイズを1emの代わりに指定してあげてください。

さいごに

いかがでしたでしょうか。
1行目の字下げはよく使用しますので、やり方を覚えておいたらスムーズにコーディング可能になります。