Title

text-indentとは

text-indent とは次の語句からなるCSSのプロパティです。

text

読み: テキスト
意味: 文字列、文字情報

indent

読み: インデント
意味: 字下げ、凹み

目次に戻る

text-indentプロパティの概要

このプロパティはブロックコンテナー内のテキストの先頭の空白(字下げ)を調整します。

別の言い方をすると、ブロックレベル要素内のテキストの一行目のインデントを指定することができるということです。

値の指定方法は、単位付きの実数値、またはパーセント値を使います。マイナスの値も指定することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{text-indent: 設定値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

ここで検証に使う要素はブロックコンテナーの代表的な要素である、 div要素です。 サンプルでは、この要素内に3行のテキストを配置しています。

初期値: 0

div{text-indent: 0;}

目次に戻る

数値: 相対値

このプロパティに設定できる値には相対値があります。 このサンプルではemという相対単位を使用しています。 これは親要素から継承した font-size を基準にして、英字のMの字の高さを1とする単位です。

単純にいうと1emは大文字1文字の高さということです。

div{text-indent: 1em;}

目次に戻る

数値: 絶対値

このプロパティに設定できる値には絶対値があります。 ここではcm(センチメートル)を使用しています。

div{text-indent: 1cm;}

目次に戻る

数値: パーセンテージ値

このプロパティに設定できる値にはパーセンテージ値があります。 ここでは30%と設定していますが、これは包含ブロックの横幅を基準にして30%の値となります。 つまり、div要素の30%で字下げされているということです。

div{text-indent: 30%;}

目次に戻る

グローバル値

text-indentプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値の0に戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

セレクター{text-indent: グローバル値;}

目次に戻る

補足説明

• ブロックコンテナー要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

text-indent: 1em;

text-indent: -1em;

text-indent: 1cm;

text-indent: -1cm;

text-indent: 20%;

text-indent: -20%;

目次に戻る