CSSリファレンス

実践向けCSSリファレンス

テキスト開始行のインデントを設定する text-indent

概要

CSSプロパティ「text-indent」は、文章などの1行目のインデント(字下げ)を定義します。指定できる値として、数値、パーセント値、マイナス値を指定することができます。もし文章の段落として入れる場合は、1文字分のスペースを空けたいので、単位は「px」や「em」を使用します。指定する単位の振る舞いは以下の通りです。

単位説明
pxpxとは画面の1画素(ピクセル)のサイズを1とする単位です。実際に表示されるサイズはモニターの解像度により変化します。
em親要素を起点とする文字の高さを1とする単位です。1emは1文字分となります。
%親要素の幅を基準に割合を%値で指定した単位です。

単位についてですが、CSS3から新しく「rem」という単位を使用できるようになりました。これはroot + em(ルートエム)の略でhtmlを起点としたサイズを継承します。一方「em」は環境によって大きさが変わる相対単位です。よく「em」と「rem」で比較されることが多いのでこちらの font-size で詳細を説明していますので、確認してみてください。

使用例

様々な単位の値を指定してみます。行頭のスペースの違いを確認してみてください。

<p class="px">この文章の1行目の始まりに「10px」のインデントをつけます。これは2行目以降には反映されません。</p>
<p class="percent">この文章の1行目の始まりに「10%」のインデントをつけます。これは2行目以降には反映されません。</p>
<p class="em">この文章の1行目の始まりに「1em」のインデントをつけます。これは2行目以降には反映されません。</p>
<p class="rem">この文章の1行目の始まりに「1rem」のインデントをつけます。これは2行目以降には反映されません。</p>
<style>
p {
  background-color: #def;
  margin-bottom: 10px;
}
.px {
  text-indent: 10px;
}
.percent {
  text-indent: 10%;
}
.em {
 text-indent: 1em;
}
.rem {
  text-indent: 1rem;
}
</style>

実装例として、マイナス値を指定して、ぶら下げインデントを実装してみます。ポイントは padding プロパティで左に余白を作り、text-indent プロパティで1文字分左にずらしています。また指定する単位を 「em」 にすることで、その要素で定義している  font-size の値を基準にしたスペースがとられます。

<p class="px14">※文字サイズが14pxの文章を書きました。14pxの文字1つ分のインデントが作られています。</p>
<p class="px20">※文字サイズが14pxの文章を書きました。14pxの文字1つ分のインデントが作られています。</p>
<style>
p {
  background-color: #def;
}
.px14 {
  font-size: 14px;
  padding: 1em;
  text-indent: -1em;
}
.px20 {
 font-size: 20px;
 padding: 1em;
 text-indent: -1em;
}
</style>

仕様書

関連CSSプロパティ

閉じる