text-indent

CSSでは、字下げを調整することができます。

本ページでは、text-indentプロパティについて説明します。

text-indentプロパティとは

text-indentプロパティは、字下げの幅を調整します。字下げとは、1行目の文字開始位置を下げることです。

text-indentの定義は、以下のとおりです。

【text-indentの定義】
length | percentage
初期値 0
適用対象 ブロックコンテナ
継承 する

値の説明

以下は、text-indentで使える値と説明です。

length
数値と単位で幅を指定します。マイナスも使えます。
percentage
1行の横幅に対するパーセントで指定します。マイナスも使えます。

利用例

最初に、text-indentを指定しない時の表示を示します。

2行ずつ2つの段落が表示されています。

lengthの利用例は、以下のとおりです。

【lengthの利用例】
p {
  text-indent: 1em;
}

上記を適用すると、以下のように表示されます。

2行ずつ2つの段落が表示されています。どちらも1行目の最初に1文字分の余白があります。

2つの段落で、それぞれ1行目の先頭に1文字分の余白があります。これは、全角スペースを記述したのではなく、字下げされた結果です。

以下は、マイナスで指定する例です。

【lengthのマイナス利用例】
p {
  margin-left: 1em;
  text-indent: -1em;
}

上記を適用すると、以下のようにぶら下げインデントで表示されます。

2行ずつ2つの段落が表示されています。どちらも最初に「・」が付いています。どちらも2行目の最初に1文字分の余白があります。

最初の「・」は、テキストとして追加で記述しました。2行目の先頭で、1文字分余白を設けて表示されているのが、ぶら下げインデントです。margin-leftを入れているのは、text-indentで-1emすると左に寄りすぎるためです。

percentageの利用例は、以下のとおりです。

【percentageの利用例】
p {
  text-indent: 10%;
}

上記を適用すると、以下のように表示されます。

2行ずつ2つの段落が表示されています。どちらも1行目の最初に大きく(親要素に対して10%分の)余白があります。

横幅の10%なので、大きく字下げされています。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
text-indent
【スマートフォン】
項目 Sa An Op Ch Fx Sm
text-indent
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る