コーディング Web制作 CSS

【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部突破

累計670部突破

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

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

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