text-indent
text-indentプロパティは、先頭行のインデント(字下げ)を指定します。
値にマイナス値も指定できるため、ぶら下がりとしても使う事が可能です。
- 対応ブラウザ
-
プロパティの解説
- 値
- <長さ>|<パーセント>|inherit
- 初期値
- 0
- 適用される要素
- ブロックレベル要素、テーブルのセル要素、インラインブロック要素
- 継承
- します
- パーセント値
- 包含ブロックに対する割合
- メディア
- visual
値の解説
- <長さ>
- インデントする幅を、定数で指定します。マイナス値の指定も可能です。
- <パーセント>
- インデントする幅を、包含ブロックに対する割合で指定します。長さ同様マイナス値の指定も可能です。
- インデントした部分は透明になります。
- マイナス値を指定した場合、インデント部分のテキストが見切れてしまう可能性も有ります。
- マイナス値を指定してはみ出たテキストの表示方法は、overflowプロパティで指定します。
text-indentのサンプル
p {
margin: 10px 20px 25px;
font-size: 125%;
background: #f2f2f2;
}
p.sample01 {
text-indent: 1em;
}
p.sample02 {
text-indent: 20%;
}
p.sample03 {
text-indent: -1em;
}
p.sample04 {
text-indent: -999em;
}
<p class="sample01">
(略)
</p>
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
インデントは、紙媒体では当たり前の様に見かけますが、ウェブ上だと紙媒体ほどは見かけません。
インデントは、紙媒体では当たり前の様に見かけますが、ウェブ上だと紙媒体ほどは見かけません。
インデントは、紙媒体では当たり前の様に見かけますが、ウェブ上だと紙媒体ほどは見かけません。
インデントは、紙媒体では当たり前の様に見かけますが、ウェブ上だと紙媒体ほどは見かけません。
4番目のサンプルは、マイナス値の数値が大き過ぎて画面外にテキストが飛んでいます。
最近は見かけなくなりましたが、ナビゲーション等でコレを利用して、テキストを画面外に飛ばし背景画像を表示させロールオーバーさせるテクニックが有ったりします。