トップページの中の プロパティの中の Tのプロパティ一覧の中の text-indent

text-indent

  • 最終更新:2009年11月14日 16:21

text-indentプロパティは、先頭行のインデント(字下げ)を指定します。
値にマイナス値も指定できるため、ぶら下がりとしても使う事が可能です。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

<長さ>|<パーセント>|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番目のサンプルは、マイナス値の数値が大き過ぎて画面外にテキストが飛んでいます。
最近は見かけなくなりましたが、ナビゲーション等でコレを利用して、テキストを画面外に飛ばし背景画像を表示させロールオーバーさせるテクニックが有ったりします。

このページの上部へ