文章の2行目以降をCSSで字下げ(インデント)する方法

サイトの文章を作成するときに、先頭に「・」「※」というような記号をつけることがあると思います。

しかし、通常の状態で改行した場合、下のように2行目以降の文字が記号の下に来てしまいます。

・改行すると
こうなる。
（「・」の下に「こ」がきてしまいます。）

このままでもいいっちゃいいのですが、2行目以降を字下げして記号の部分だけ飛び出している状態を作ってあげると、文章の可読性が上がります。

というわけで今回は「CSSで文章の2行目以降を字下げ(インデント)する方法」をご紹介します！

目次非表示

目次へ

HTML

まずはHTMLです。適当に文章を用意し、pタグで括ります。

今回は記号「・」の1文字分だけ字下げするので、1文字あけますよという意味で「indent_1」というclass名をpタグにつけてあげます。

<p class="indent_1">
    ・2行目以降の文章は、<br>記号の分を1字下げて表示します。
</p>

ちなみに今のままだと、下のように改行時に記号の下に文字がまわります。

・2行目以降の文章は、
記号の分を1字下げて表示します。

記号の下に文章がいかないようにcssを書いていきます。

先ほどpタグにつけた「indent_1」というclassに下記のCSSを書いていきます。

.indent_1 {
    text-indent: -1rem;
    padding-left: 1rem;
}

padding-leftでテキストの左側に1remの余白を作ります。

しかし、このままだとボックス全体に左側の余白を追加してしまうので、テキストの始まり位置を移動できるtext-indentを-1remとし、マイナス方向に1文字分移動します。

単位は「rem」を使用しますが、こうすることでルート要素のフォントサイズ分の数字が指定されます。

「indent_1」というclassでインデントを管理しているので、同じように1文字分ずらしたい箇所ができた場合にはclass名を付与してあげるだけです。

もし、このp自体にfont-sizeをしている場合、上記のように「rem」という単位で指定すると、左にあけるサイズと文字サイズにずれが生じてしまい、改行時の上の段と下の段が揃わなくなってしまいます。

この場合、下記のように「em」という単位をしてあげましょう。こうすることで指定したfont-sizeが基準となるため、改行しても文字が揃います。

.indent_1 {
    font-size: 14px;
    padding-left: 1em;
    text-indent: -1em;
}

1remや1emで全角1文字分ですので、もし最初の記号が半角の場合は0.5rem / 0.5emといった指定をしてあげましょう。ということは1.5rem / 1.5emで全角1文字+半角文字1文字分ですね。

状況に応じて使い分けていきましょう！

見た目のデザインも大事ですが、いかに文字が読みやすいかという部分もwebサイトでは大事なことなので、こういう細かいところも気にしていきましょう！