text-indent 1行目にインデントを入れる(字下げする)

スポンサーリンク

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

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

使用例


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

サンプル

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

text-indent: 1em;

1em は1文字分です。

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

text-indent: 2em;

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

text-indent: 10px;

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

text-indent: 2%;

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

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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト