Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

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>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

テキストの最初の段落のインデント幅を指定します。負の数値も指定可能です。

単位を『%』で指定した場合は自身のコンテンツブロックの横幅を基準とした相対値となります。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル