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

 

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

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

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

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

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

【この記事を書いた人】

Adobe使用歴20年以上、Webデザイナー歴15年以上、フリーランス歴10年以上のApple/運動好きな2児の母。Apple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細

HTML

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

CSS

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

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

デモはこちら(サンプル01)

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

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

あわせて読みたいCSSのhover(マウスオーバー)でサブメニューを表示/非表示させる4つの方法

Web制作をより深く学びたい人へ

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

【無料あり】好きな時間に自宅で学べる！Webデザイン・Webデザイナー向けオンライン講座・スクール・学習まとめ

参考記事【無料あり】Webデザイナーが解説！自宅でWebデザインを学べるオンラインスクール・講座まとめ

▲