HTMLで先頭または2行目以降を字下げ(インデント)する方法!

HTMLで先頭(1行目)あるいは2行目以降を字下げ(インデント)する方法について解説します。CSSの「text-indent」を使い文章の字下げを適切に行いましょう。

コンテンツ [表示]

  1. 1HTMLで字下げ(インデント)したい
  2. 2HTMLで字下げ(インデント)する方法
  3. 2.1先頭(1行目)のみ
  4. 2.22行目以降(ぶら下げインデント)
  5. 3まとめ

HTMLで字下げ(インデント)したい

HTML中のテキストで段落などの文章を字下げしたい・段落下げしたい時があります。

例えば以下の例では、「段落1行目〜3行目」は横の位置は同じです。

文章のテキスト位置をすべて揃える場合はこれでいもいいですが、先頭のみ字下げ(左に空白を入れる)したい、あるいは2行目以降を字下げしたいなどといったケースもあります。

1行目をインデントあるいは2行目以降をインデント

このインデント(字下げ)ですが、HTMLで実現するためにはCSSを利用する必要があります。

今回はHTMLでの字下げの方法で、先頭または2行目以降を字下げする方法について解説していきます。

HTMLで字下げ(インデント)する方法

それでは順番にHTMLで字下げする方法を解説していきます。

先頭(1行目)のみ

インデントをするにはCSSのtext-indentというプロパティを利用します。値にはインデントの長さをpxemremなどで指定します。

text-indentは先頭行に対して字下げを行います。行間などには影響なく、あくまでも横位置に影響してくるプロパティです。

上記の例だとpタグに対してtext-indent: 1remが指定されており、1行目に対して左側に1rem分だけ字下げが行われます。

2行目以降(ぶら下げインデント)

では1行目についてはtext-indentを使えばいいですが、2行目以降を字下げしたい(ぶら下げインデント)場合はどうするのでしょうか?

2行目以降を字下げするにはtext-indentだけではなく、maginなど他のプロパティとの組み合わせで実現します。

上記の例ではtext-indent: -1remとマイナスの値を指定しています。つまり字下げとは逆にテキストが移動(左に移動)します。

そしてmargin-leftで段落全体に対して余白をあけることによって、2行目以降を字下げする形に見せることが出来ます。

まとめ

text-indentを使い字下げ・段落下げする方法を見てきました。

よく字下げでHTMLタグを増やして、marginpaddingなどの余白を調整するプロパティで何とか実現しているという例を見ますが、CSSのtext-indentという専用のプロパティを使う事で簡単に実現することが出来ます。

ぜひ試してみて下さい!


またHTMLの箇条書きのインデントについては少しやり方が異なります。ulタグ・liタグの箇条書きのインデントの調整方法もあわせて知りたい方はぜひ下記の記事を参考にしてみて下さい。

あわせて読みたい
HTMLの箇条書き(ul・liタグ)の行間・インデントを調整する方法!のイメージ
HTMLの箇条書き(ul・liタグ)の行間・インデントを調整する方法!
HTMLの箇条書きのインデントや行間・余白の調整方法をサンプルコードを交えて紹介していきます。調整するべき余白の種類が多い箇条書きについてぜひ余白の調整方法をマスターしましょう!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次