CSSで2行目以降のテキストを字下げ(インデント)する方法【text-indent】

2021.10.14

※当ブログのリンクには一部広告が含まれています。

リストの先頭に背景画像を表示させるのではなく、list-style-typeが用意しているマーカー文字以外のテキストを表示させたい場合（下記の例では「※」）、テキストをベタ打ちすると全てが左揃えになってしまいます。※リセットCSSなどでデフォルトのスタイルをリセットした場合。

※それは平生もしこの関係料といったのの中についだろです。はなはだ毎日を返事方も単にこの評価ですましじゃでなるといるですをは誤解打ち壊さたずて、あまりにはいるたたうな。
※またしかしご寒暖計を送っのはどう不都合とおくたて、その本領がはしないてという他に握ってならたん。
※しかしもっとも事実一三十年に引き摺り込んまでも考えだっにおいて無事たくっ力説を留めが、一般でそのためその上を眺めといるのです。

CSSのtext-indentを使うと、下記のように2行目以降を字下げすることができます。注意書きや箇条書きなどで利用できますね。

※それは平生もしこの関係料といったのの中についだろです。はなはだ毎日を返事方も単にこの評価ですましじゃでなるといるですをは誤解打ち壊さたずて、あまりにはいるたたうな。
※またしかしご寒暖計を送っのはどう不都合とおくたて、その本領がはしないてという他に握ってならたん。
※しかしもっとも事実一三十年に引き摺り込んまでも考えだっにおいて無事たくっ力説を留めが、一般でそのためその上を眺めといるのです。

HTML

<ul>
    <li>※ここにテキストが入ります。</li>
    <li>※ここにテキストが入ります。</li>
    <li>※ここにテキストが入ります。</li>
</ul>

ul li{
    padding-left: 1em;
    text-indent: -1em;
}

まずリストをpadding-leftで1文字分(1em)右に寄せ、text-indentで-1emを指定することにより、1行目を1文字分左に戻すという方法です。1em(1文字)というのは、「※」が1文字なので1emとしています。これが3文字分だと3emとなります。

擬似要素の「:first-line」を使って1行目のみ色を変えたり、「:before」でリスト先頭に文字を追加したり(デモ：サンプル02)、簡易的な表組みのような見せ方も可能です。(デモ：サンプル03) ※文字数などの制約あり。

全角・半角の組み合わせや、見出しとするテキストの文字数によって、ブラウザによる見え方の違いなども出てくると思いますので、その辺りの調整は必要ですね。あくまで簡易的に使うのに便利だよ！ということで、コンテンツが多い場合はdl要素などで組んだ方が結局は良いかもしれません。

Web制作の知識をもっと深めたいと思っている人は、オンライン学習・スクールをまとめた以下の記事が役に立つかもしれません。無料で学べるサービスもありますので、チェックしてみてくださいね。