Sep. 13th,2020
プロパティについて
概要
| 初期値 | “text-indent: 0;” |
| 適用対象 | ブロック・コンテナ |
| 継承 | Yes |
| パーセント値 | ブロック・コンテナのコンテント・ボックスのインライン軸方向の大きさを“100%”とする |
| 計算値 | 算出された“<length-percentage>”値と指定されたキーワード |
| アニメーション | 計算値 |
“text-indent”プロパティは字下げの大きさを指定します。
字下げは行ボックスの始端に付け足されるマージンとして表現されます。
値に“each-line”もしくは“hanging”を含まない限り、“text-indent”プロパティによって指定された字下げは要素の最初の行にだけ適用されます。
サンプルコード
p { text-indent: 3em;}
値
| 値 | 説明 |
|---|---|
| “<length-percentage>”値 | |
| <length> | “px”、“em”などで字下げの幅を指定 |
| <percentage> | ブロック・コンテナのコンテント・ボックスのインライン軸方向の大きさを“100%”として字下げの幅を指定 (“width”プロパティなどで“min-content”や“max-content”を計算する際には“0”として扱います。) |
| キーワード値 | |
each-line |
ブロック・コンテナの最初の行だけでなく強制ライン・ブレイクの後の最初の行にも適用します (ソフト・ラップ・ブレイクの後には字下げは適用されません。) |
| hanging |
字下げの適用対象を反対にします (本来字下げを適用する最初の行には字下げを適用せず、本来字下げを適用しない行に字下げを適用します。いわゆるぶら下げインデントです。) |
| 他の値 | |
| 共通キーワード | |
“<length-percentage>”値は必須で、1個だけ記述できます。負の値も認められ、その場合は行の始端が指定された幅だけ書字方向とは逆向きに移動されます。
“each-line”と“hanging”は必要であれば“<length-percentage>”値とともにそれぞれ1個ずつホワイトスペースで区切って記述します。記述する順序は自由です。
p { text-indent: 〚“<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個になった。
