【CSSの基本】文字列にの最初にインデントをつける

文字列の最初にインデントをつける

CSSで文字列の一行目にインデントをつけるには「text-indent」を指定します。

例）text-indent: 1em;　※単位は em px ex % など

CSSコード

以下では「indent」という ID を付けた div 要素内の p 要素の一行目に1文字分のインデントをつけます。

#indent {
    text-indent: 1em;     /*一行目に1文字分のインデントつける*/
}

HTMLコード

p 要素に「indent」というIDを付けます。

<div id="indent">
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</p>
</div>

＜結果表示＞

p 要素ごとに1文字分のインデントがつきました。

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

備考・その他

CSSで使用する長さの単位は em ex px % の他にも mm cm in pc pt などがあります。

em ・・・一文字
px・・・ピクセル
ex ・・・小文字x高さ
%・・・パーセント
mm・・・ミリメートル
cm・・・センチメートル
in・・・インチ
pc・・・パイカ
pt・・・ポイント

END