text-indentはその名の通り、テキストの先頭の文字をインデントさせるCSSです。しかし、テキストが複数行になる場合は2行目以降の先頭の文字はインデントされないため、少し手を加えて2行目以降の先頭の文字もインデントできるようにする必要があります。

スポンサーリンク

text-indentを使用してテキストの先頭の文字をインデントさせるケースとしては、箇条書きや注釈を書く場合が多いと思います。

テキストの先頭に「・」や「※」などの記号を記述するとき、2行目以降のテキストの先頭の文字がインデントされずに記号の下に入ってしまい、見た目がガタガタして揃っていないと感じる人もいると思います。

その時は、text-indentを使用しているCSSを修正して、複数行でもインデントの位置が揃うように調整します。デザインで言う整列というやつですね。

1文字目のみをインデントさせる方法（通常）

通常使用のtext-indextは、1文字目のみがインデントされます。
インデントの大きさはemで指定すると、文字の大きさ合わせてインデントされるため、綺麗にインデントされます。

サンプルページを開く

html
    <p class="sample_indent_1">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
    <p class="sample_indent_1">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
css
.sample_indent_1 {
    text-indent: 1.0em;
}

2行目以降の文字列の先頭の文字もインデントさせる方法

複数行の文字の先頭をインデントさせる場合は、まずはtext-indentをマイナスで指定します。
そして、padding-leftを使用してtext-indentで指定したマイナス部分を相殺します。

サンプルページを開く

html
    <p class="sample_indent_2">・サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
    <p class="sample_indent_2">・サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
css
.sample_indent_2 {
    text-indent: -1.0em;
    padding-left: 1.0em;
}

特に、スマホで表示するときは画面幅が狭いため、テキストが複数行になってもいいように、初めから複数行でも先頭の文字がインデントされるようにCSSを設定しておいてあげると親切です。

PAGE TOP