テキストに段落を設定する

text-indentプロパティを使って、テキストの開始位置を調節する方法を解説します。

この記事のポイント

テキストの開始位置は、CSSのtext-indentプロパティを使うことで調整することができます。
例えば、開始位置を後ろに1文字分ずらせば段落になります。

逆に前にずらすことも可能です。
テキストの1文字目を記号や絵文字、アイコンにして、2文字目と2行目の1文字目の位置を、次のように合わせることができます。

段落を作るには、text-indentプロパティで次のように指定します。

p {
  text-indent: 1.0em;
}

<section class="first-box">
  <p>テキストの段落を設定します。<br>全角スペースで空白を開けることも可能ですが、CSSでtext-indentプロパティを使えば不要になります。</p>
</section>

今回は1文字分のスペースを開けることで段落としているので「1.0em」としていますが、タブのようにもう少し大きく空けたかったり、といったことも可能です。

テキストの開始位置は前にずらすことも可能です。
まずは、普通にテキストだけ打って、開始位置を指定しなかった場合の表示を確認してみましょう。

section ul li {
  text-indent: -1.5em;
}

<section>
  <ul>
    <li>■ リストなど、テキストの先頭に記号やimg要素が入る場合は改行位置を後ろにずらしたいことがあります。<br>text-indentプロパティを応用することで綺麗に改行位置を揃えることができます。</li>
  </ul>
</section>

このままだと囲みのボックスに隣接してしまうため、加えてmargin-leftプロパティで左側に余白をとります。

section ul li {
  margin-left: 1.5em;
  text-indent: -1.5em;
}

<section>
  <ul>
    <li>■ リストなど、テキストの先頭に記号やimg要素が入る場合は改行位置を後ろにずらしたいことがあります。<br>text-indentプロパティを応用することで綺麗に改行位置を揃えることができます。</li>
  </ul>
</section>

text-indentプロパティで前にずらした分を、margin-leftプロパティで同じ分だけずらして調整しています。
padding-leftプロパティでも同じことができるため、用途に応じて使い分けてください。