CSSを使ってインデントするには?2行目以降をインデントする方法も解説

2021.10.25

Webサイトを作成していて、「ここにインデントを入れたい!」と思うことがありませんか?

CSSで簡単にインデントを入れることができたら、とても便利ですよね。

今回は、Webサイト内の文章にインデントを挿入したいという方のために、

  • CSSでインデントを指定する方法とは?
  • CSSでのインデントの注意点

以上の項目に沿って、解説していきますね。

この記事を読めば、Webサイト内の文章にCSSでインデントを指定する方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね!

インデントとは?どんな時に使うもの?

そもそも、インデントとはどのようなものなのでしょうか?

インデントとは、「字下げ」とも言い、行の頭を一字下げる書き方のことです。

国語の作文などで、1文字分の空白を開けて書いたことがある方も多いのではないでしょうか。

Webサイトでも、内容によっては、インデントを付けた方が見栄えが良くなることがあります。

CSSでインデントを実装する方法を紹介していきましょう。

CSSでインデントを付ける方法

CSSでインデントを指定するには、text-indentプロパティを使用します。

具体的に記述すると以下のようになります。

p.indent{
  text-indent: 1em;
}

HTMLコードは以下のように書きます。

<p class="indent">
こちらの行頭はインデントされます。<br>
こちらはインデントされません。
</p>

1行目はインデントされ、2行目はインデントされません

「1em」は1文字分の幅を表します。text-indentプロパティでは、このほかに「px」や「mm」、「%」の単位での指定ができます。

また、p要素は、テキストの1つの段落であることを示す要素ですので、2つ目の文章の頭もインデントさせたい場合には、文章ごとにp要素で囲う必要があります。

改行タグを使った改行ではなく、長い文章を右端で折り返す自動改行の場合でも、2行目以降はインデントされません。

2行目以降の方をインデントする方法

1行目の行頭をインデントさせるのではなく、2行目以降の方をインデントさせたいときがあるかと思います。

例えば、先頭に「・」「※」などのマークがある文章の場合です。

<p class="indent2">
※注意事項です。text-indentプロパティを応用して、2行目以降をインデントさせています。<br>改行タグを入れた場合でもインデントされます。
</p>

CSSは以下のように書きます。

p.indent2{
  padding-left: 1em;
  text-indent: -1em;
}

これで、2行目以降がインデントされた状態にできました。

2行目以降が右にずれてインデントしているように見えますが、実際は行頭にインデントが指定されています

1emは、先ほども説明した通り、1文字分を示します。

まずは、padding-leftを使って、左側に1文字分の余白を作成します。

その上で、text-indentプロパティを負の値にすると、1行目のみ行頭が左側に移動します。

2行目以降はそのままなので、相対的に2行目以降がインデントされているように見えるということです。

以下のような箇条書きリストの場合でも、同じ方法で改行された2行目以降をインデントできますよ。

<ul>
<li class="indent3">※注意事項1:~~~</li>
<li class="indent3">※注意事項2:~~~</li>
<li class="indent3">※注意事項3:~~~</li>
</ul>

CSSでの指定は、セレクタ名とリストマーカーを削除する以外は同じです。

li.indent3{
  list-style: none;
  padding-left: 1em;
  text-indent: -1em;
}

リストのマーカーを削除し、テキストでマーカーしたいときなどに試してみてください。

疑似要素の「before」などで、独自のリストマーカーを指定した場合にも活用できますね。

「each-line」と「hanging」について

text-indentプロパティには、「each-line」と「hanging」という値があります。

each-lineは、強制改行の2行目以降もインデントされるようになります。ただし、自動改行はインデントされません。

hangingは、インデントが反転する指定です。1行目はインデントされず、2行目以降の方をインデントします。

この2つは、以下のように数値と一緒に指定します。

p{
  text-indent:  1em each-line;
}

ただし、この2つの値は、CSS3で追加されたもので多くのブラウザで未対応です。

2行目以降をインデントしたい場合には、これまでの方法を使用した方が良いでしょう。

まとめ:インデントはCSSで簡単に実装できる

今回は、Webページの文章の中に、CSSでインデントを入れる方法を解説してきました。

応用として、2行目以降をインデントする方法も説明しましたね。

paddingなどでも空白を入れることができるため、今まで知らなかったという方もいるのではないでしょうか。

HTMLに記述した文章を整形したいときなどに、今回の記事が参考になれば幸いです。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5