text-indent
テキストの最初の段落のインデント幅を指定します。
サンプルコード
p.test { text-indent: 0;}
p.test1 { text-indent: 10px;}
p.test2 { text-indent: 1em;}
p.test3 { text-indent: 5%;}
p.test4 { text-indent: -10px;}
指定可能な値一覧
| 値 | 概要 |
|---|---|
| 数値 | 数値で指定します。使用できる単位は『px』、『em』、『%』などです。負の数値も指定可能です。初期値は『0』となります。 |
ブラウザでの表示結果
<p style="text-indent: 0; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>
<p style="text-indent: 100px; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>
<p style="text-indent: 1em; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>
<p style="text-indent: 10%; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>
<p style="text-indent: -20px; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>
対応ブラウザ
デスクトップ
全バージョンで対応しています
8 ○
7 ○
6 ○
2 以前 ×モバイル
Android Browser
4.4 以降 ○
3 以前 ×デスクトップ版と同等の対応です
デスクトップ版と同等の対応です
※ バージョン情報は MDN に基づいています。
概要
テキストの最初の段落のインデント幅を指定します。負の数値も指定可能です。
単位を『%』で指定した場合は自身のコンテンツブロックの横幅を基準とした相対値となります。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。