【CSS】1行目を1文字分インデント(字下げ)する方法【4種類解説】

1行目の先頭だけ1文字分の余白を入れる方法ってある？

文章の1行目の先頭にだけ余白を入れたい時ってたまにあると思います。

この余白を『インデント(字下げ)』と呼びます。

色々な方法があるかと思いますが、今回はそんな時に便利なCSSのプロパティがあるのでそれをご紹介します。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

1行目の先頭を1文字分インデント(字下げ)する方法

早速ですが今回使うCSSはtext-indentになります。

実際にこれを使うとどうなるかを見てみましょう（スクロールすると4種類確認できます）

See the Pen
テキストの1行目だけ1文字分の余白を入れる方法 by junpei (@junpei-sugiyama)
on CodePen.

何パターンかあるので、1つずつ見ていきます。

HTMLは共通でこちらになります。

<div class="container">
  <p>
    テキストが入ります。
  </p>
</div>

1行目の先頭だけ1文字分インデント(字下げ)

これが基本となります。

p {
  text-indent: 1em;
}

単位はpxや%も使えますが、1文字分の場合は現在のフォントサイズに対する倍率である単位"em"を使います。

1行目の先頭だけ1文字分マイナス方向にインデント(字下げ)

単位をマイナスにすれば逆方向になります。

p {
  text-indent: -1em;
}

1行目の先頭以外1文字分インデント(字下げ)

これは先ほどの応用になります。

p {
  padding-left: 1em;
  text-indent: 1em;
}

全体に1文字分字下げして、text-indent で先頭だけ1文字分戻す感じなので、最初の行以外が1文字分字下げされたように見えます。

1文字分インデント(字下げ)(letter-spacingを設定している場合)

最後に letter-spacing を設定している場合です。

p {
  letter-spacing: .3em;
  text-indent: 1.3em;
}

例えば letter-spacing が0.3emだったとします。

この場合 text-indent が1emだと少しズレてしまうので、letter-spacing と text-indent の差が1emになるようにします。

プライバシーポリシーなどで番号付きのリストなどは擬似要素で書けば問題ありませんが、そうではない時には今回ご紹介した方法が役に立つかと思います。

まとめ

今回は1行目を1文字分インデント(字下げ)する方法を解説しました。

あまり使う機会はないかも知れませんが、覚えておいて損はないかと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！