CSS:インデントを入れる(字下げする)text-indent

CSSでテキストの1行目に インデントを挿入する(字下げする)場合は「text-indent」を 使用します。

指定する値は「実数値+単位」で、単位には em や pxを指定します。 含有ブロックに対するパーセンテージを指定することもできます。

text-indent 使用例


text-indent: 1em;  /* 1文字分 */
text-indent: 2em;
text-indent: 10px;
text-indent: 2%;   /* パーセンテージ指定 */

text-indent サンプル

text-indentにいろいろな値を設定して、ダミー文章を表示してみます。

text-indent: 1em;

1em は1文字分です。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

text-indent: 2em;

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

text-indent: 10px;

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

text-indent: 2%;

「%」パーセンテージを指定する場合は、テキストの含有ブロックに対するパーセンテージとなります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML・CSS入門