このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

text-indent”プロパティ:字下げ

記事Sep. 13th,2020
最初の行の字下げを指定する
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 text-indent: 0;
適用対象 ブロック・コンテナ
継承 Yes
パーセント値 ブロック・コンテナコンテント・ボックスインライン軸方向の大きさに依存
計算値 算出された<length-percentage>”値と指定されたキーワード
アニメーション 計算値による

text-indent”プロパティは字下げの大きさを指定します。

字下げは行ボックスの始端に付け足されるマージンとして表現されます。

値に“each-line”もしくは“hanging”を含まない限り、“text-indent”プロパティによって指定された字下げは要素の最初の行にだけ適用されます。

サンプルコード

p { text-indent: 3em;}

説明
<length-percentage>”値
<length> pxemなどで字下げの幅を指定
<percentage> ブロック・コンテナコンテント・ボックスインライン軸方向の大きさを“100%”として字下げの幅を指定 (width”プロパティなどで“min-content”や“max-content”を計算する際には“0”として扱います。)
キーワード値
each-lineCSS Text Module Level 3 で追加 ブロック・コンテナの最初の行だけでなく強制ライン・ブレイクの後の最初の行にも適用します (ソフト・ラップ・ブレイクの後には字下げは適用されません。)
hangingCSS Text Module Level 3 で追加 字下げの適用対象を反対にします (本来字下げを適用する最初の行には字下げを適用せず、本来字下げを適用しない行に字下げを適用します。いわゆるぶら下げインデントです。)
他の値
共通キーワード

<length-percentage>”値は必須で、1個だけ記述できます。負の値も認められ、その場合は行の始端が指定された幅だけ書字方向とは逆向きに移動されます。

each-line”と“hanging”は必要であれば<length-percentage>”値とともにそれぞれ1個ずつホワイトスペースで区切って記述します。記述する順序は自由です。

p { text-indent: 〚“<length-percentage>”値〛 each-line hanging;}

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
text-indent
定義あり

定義あり

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
<length>
定義あり

定義あり

定義あり

定義あり
<percentage>
定義あり

定義あり

定義あり

定義あり
each-line
定義なし

定義なし

定義あり

定義あり
hanging
定義なし

定義なし

定義あり

定義あり

字下げ幅を指定する

<p>
昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:<br>
2 + 1 + 4 + 3 + 5 = 15<br>
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:<br>
15 - ( 1 + 2 + 3 ) = 9<br>
と計算することができるので9個になった。
</p>
p {
text-indent: 5em;
}

昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:
2 + 1 + 4 + 3 + 5 = 15
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:
15 - ( 1 + 2 + 3 ) = 9
と計算することができるので9個になった。

p {
text-indent: 20%;
}

昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:
2 + 1 + 4 + 3 + 5 = 15
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:
15 - ( 1 + 2 + 3 ) = 9
と計算することができるので9個になった。

p {
text-indent: -5em;
}

昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:
2 + 1 + 4 + 3 + 5 = 15
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:
15 - ( 1 + 2 + 3 ) = 9
と計算することができるので9個になった。

padding-left”プロパティなどで字下げ幅よりも大きなパディングが指定されていれば最初の行は要素内に収まります。

p {
text-indent: -5em;
padding-left: 5em;
}

昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:
2 + 1 + 4 + 3 + 5 = 15
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:
15 - ( 1 + 2 + 3 ) = 9
と計算することができるので9個になった。

改行の後も字下げする

<p>
昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:<br>
2 + 1 + 4 + 3 + 5 = 15<br>
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:<br>
15 - ( 1 + 2 + 3 ) = 9<br>
と計算することができるので9個になった。
</p>
p {
text-indent: 5em each-line;
}

昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:
2 + 1 + 4 + 3 + 5 = 15
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:
15 - ( 1 + 2 + 3 ) = 9
と計算することができるので9個になった。

最初の行以外を字下げする

<p>
昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:<br>
2 + 1 + 4 + 3 + 5 = 15<br>
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:<br>
15 - ( 1 + 2 + 3 ) = 9<br>
と計算することができるので9個になった。
</p>
p {
text-indent: 5em hang;
}

昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:
2 + 1 + 4 + 3 + 5 = 15
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:
15 - ( 1 + 2 + 3 ) = 9
と計算することができるので9個になった。

p {
text-indent: 5em each-line hang;
}

昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:
2 + 1 + 4 + 3 + 5 = 15
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:
15 - ( 1 + 2 + 3 ) = 9
と計算することができるので9個になった。

字下げしない

<p>
昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:<br>
2 + 1 + 4 + 3 + 5 = 15<br>
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:<br>
15 - ( 1 + 2 + 3 ) = 9<br>
と計算することができるので9個になった。
</p>
p {
text-indent: 0;
}

昨日はとても天気が良かったので特に予定はなかったが出かけることにした。しばらくぶらぶらして市場へ行くことを思い立ち、そこで珍しい果物が売っていたのでマンゴスチンを2個とドリアンを1個とピタヤを4個とアテモヤを3個とアケビを5個購入した。私が所持していた果物の数は:
2 + 1 + 4 + 3 + 5 = 15
と計算することができるので15個になった。しかし、マンゴスチンを1個とアテモヤを2個とアケビを3個おすそ分けした。そうすると私が今所持している果物数は:
15 - ( 1 + 2 + 3 ) = 9
と計算することができるので9個になった。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク