CSSのtext-indentで段落の最初の行をインデントする方法をわかりやすく解説

2024.09.15
スポンサーリンク

text-indentプロパティは、段落の最初の行を字下げ（インデント）するために使用されます。値はピクセルやパーセントで指定できます。また、負の値を使って逆方向にインデントを設定することも可能です。

スポンサーリンク

text-indentの値とその効果の一覧

  • px: 最初の行を指定したピクセル数だけインデントします。
  • %: 最初の行を親要素の幅のパーセントでインデントします。
  • 負の値: 最初の行を左方向（負の方向）にインデントします。

注意点と関連情報

text-indentプロパティは、段落の最初の行にのみ影響を与えます。複数の行がある場合、2行目以降には影響しません。また、インデントの量を負の値にすることで、最初の行を左に移動させることができます。通常、正の値でインデントを設定し、可読性を向上させる目的で使用されます。

text-indentが効かない時の原因と対策

インライン要素に適用している

text-indentプロパティは、ブロックレベルの要素に適用されるプロパティです。インライン要素（<span>, <a>, <em>など）に適用しても、効果が現れません。

対策: text-indentは、ブロックレベル要素（<p>, <div>, <section>など）に適用します。例えば、<p style="text-indent: 20px;">のように、段落やブロック要素に指定します。

overflowやwhite-spaceのプロパティが影響している

overflowがhiddenやwhite-spaceがnowrapに設定されていると、テキストが折り返されず、インデントが正しく反映されないことがあります。特に、テキストが要素の幅を超える場合、インデントが無視されることがあります。

対策: overflowとwhite-spaceプロパティを確認します。必要に応じて、white-space: normal;やoverflow: visible;に設定し、インデントが正しく適用されるようにします。

リスト要素（<ul>, <ol>, <li>）に適用している

<ul>や<ol>などのリスト要素にtext-indentを適用しても、リストアイテムの箇条書き記号（ディスクや番号）には影響しません。箇条書き記号の位置調整にはlist-style-positionが影響します。

対策: リストアイテムのインデントを調整する場合、list-style-position: inside;やmargin-leftなどを使用して、リスト全体のインデントを調整します。また、list-style-position: outside;を使うことで、箇条書き記号とテキストのインデントを別々に制御できます。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 400px;
  background-color: #f9f9f9;
}

.css-sample-text {
  border: 1px solid #999;
  padding: 10px;
  font-size: 16px;
}

text-indent: 40px

最初の行を40px分インデントします。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-indent">
    最初の行が40pxインデントされます。この行は2行目にあたり、インデントされません。
  </div>
</div>

CSSコード

.css-sample-text-indent {
  text-indent: 40px;
}

表示結果

最初の行が40pxインデントされます。この行は2行目にあたり、インデントされません。

text-indent: -40px

最初の行を左に40px分インデントします（逆方向のインデント）。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-hanging-indent">
    最初の行が左に40pxインデントされます。この行は2行目にあたり、インデントされません。
  </div>
</div>

CSSコード

.css-sample-text-hanging-indent {
  text-indent: -40px;
}

表示結果

最初の行が左に40pxインデントされます。この行は2行目にあたり、インデントされません。

text-indent: 10%

最初の行を親要素の幅の10%分インデントします。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-percent-indent">
    最初の行が親要素の幅の10%インデントされます。この行は2行目にあたり、インデントされません。
  </div>
</div>

CSSコード

.css-sample-text-percent-indent {
  text-indent: 10%;
}

表示結果

最初の行が親要素の幅の10%インデントされます。この行は2行目にあたり、インデントされません。

まとめ

  • text-indentプロパティは、段落の最初の行をインデントするために使用されます。
  • インデントはピクセルやパーセントで指定でき、負の値を使って左方向にインデントすることも可能です。
  • このプロパティは、段落の最初の行にのみ影響を与え、2行目以降には影響を与えません。
  • 可読性の向上やデザインの調整に使用される重要なプロパティです。
スポンサーリンク