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

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

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

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

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

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文字分インデント(字下げ)する方法を解説しました。

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

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら