CSS Web制作

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

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

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

まとめ

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

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

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

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

じゅんぺい

37歳からWeb制作とブログ開始。コーディングとWordPressオリジナルテーマ制作が中心。当ブログ490記事以上→月間最高15万PV。コンテンツ販売→累計売上1,200万円&1,500部超え。X(旧Twitter)フォロワー7,200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-CSS, Web制作