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

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

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

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

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

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

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

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

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

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

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）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！