CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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-spacing0.3emだったとします。

この場合 text-indent1emだと少しズレてしまうので、letter-spacingtext-indent1emになるようにします。

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

まとめ

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

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作