CSS Web制作 コーディング

【CSS】テキスト1行目の先頭だけ1文字分の余白を入れる方法

【CSS】テキスト1行目の先頭だけ1文字分の余白を入れる方法
テキストの1行目の先頭だけ1文字分の余白を入れる方法ってある?

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

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

効率よくコーディングしたい人はこちら

テキストの1行目の先頭だけ1文字分の余白を入れる方法

早速使うCSSを書くと、

text-indent

になります。

実際にこれを使うとどうなるかを見てみましょう。

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

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

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-spacingtext-indent の差が 1em になるようにします。

 

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

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

 

コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約280件(平均スコア

今だけ!5大特典あり🎁

-CSS, Web制作, コーディング