CSSで２行目以降にインデント（字下げ）をする方法

text-indentについて

CSSで「text-indent: 1em;」を設定すると、先頭にスペースができます。

インデント（字下げ）をやってみよう

はじめに

ベースのソースコードになります。

    <ul>
      <li>※The European languages are members of the same family. Their separate existence …</li>
      <li>※The European languages are members of the same family. Their separate existence …</li>
    </ul>

    

インデントしてみる

「li」に対して、「text-indent: -1em;」とマイナスを使うことで、１行目だけ左へ寄せます。
(※つまり、２行目以降がインデントされた状態になります。)

        <style>
          ul li {
            text-indent: -1em;
          }
        </style>
        

元の位置へ戻す（右へ寄せる）

左へ寄せるために負の値を使ってしまったので、グレーの枠（コンテンツ幅）よりはみ出ていますよね。
それを元に戻すために、「margin-left: 1em;」を指定し、indentした幅と同じ分だけ ulごとを右へ寄せます。

これで完成です！

        <style>
          ul{
            text-indent: -1em;
          }

          ul li{
            margin-left: 1em;
          }
        </style>
        

応用編

擬似要素を使うことで、リストマーカー（先頭についてる※などの部分）を一括で指定できます。

好きな記号や特別文字なども一括で設定できますので、ぜひ試してみてくださいね♪

        <ul>
          <li>The European languages are members of the same family. Their separate existence …</li>
          <li>The European languages are members of the same family. Their separate existence …</li>
        </ul>

        <style>
          ul {
            text-indent: -1em;
            margin-left: 1em;
          }

          ul li:before {
            content: "★";
          }
        </style>
        

まとめ

うまくできましたか？
text-indentの仕組みがわかれば、使える場面もたくさんありますのでぜひ使ってみてください(^^)