HTML/CSS

【CSS】2行目以降から1文字下げる方法(text-indent)

箇条書きや注意事項を文章で書く場合、テキストの前に『※』や『・』などの記号を使うことが多く1つの文章の量が多いと改行され記号の下から文章が始まってしまいます。

spanタグやbrタグなどで改行位置を決めて、余白を空けることをしていたら時間もかかりますしコードの可読性が低くなります。

こちらの記事では2行目以降から1文字下げる方法について分かりやすくまとめてるので、ぜひご活用ください。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

2行目以降の文字をインデント(字下げ)する方法

2行目以降の文字をインデント(字下げ)する方法はとても簡単で、padding-leftとtext-indentの2つのプロパティを使うだけで実現することができます。
<p class="sample">
ここの行はインデントされません。<br>
この行以降はインデントされます。<br>
インデントされます。<br>
</p>
.sample{
    padding-left:1em;
    text-indent: -1em;
}

ここの行はインデントされません。
この行以降はインデントされます。
インデントされます。

インデント(字下げ)される仕組み

先輩くん
先輩くん
padding-leftとtext-indentで使用されている単位であるemは1文字分の大きさを表す単位だよ

text-indent:-1em

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

左の余白が1文字分詰められています。
この行以降はインデントされます。
インデントされます。

まず始めにtext-indentとは、文章の1行目のインデント(字下げ)を行うプロパティです。

今回はtext-indentに-1emの単位を設定しているため、文章の1行目が1文字分字下げされることになります。

後輩ちゃん
後輩ちゃん
text-indentプロパティだけでも2行目以降から1文字下がっているように見えますが、これだけではだめなのでしょうか?

先輩くん
先輩くん
text-indentプロパティだけだと、文章の開始位置が1文字分ずれてしまうから次に解説するpadding-leftプロパティを使って開始位置を修正する必要があるよ

padding-left:1em

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

ここの行はインデントされません。
この行以降はインデントされます。
インデントされます。

text-indent:-1emで1行目のみ字下げ幅を設定することができたら、続いてずれている1文字分padding-leftで元に戻してあげます。

padding-left:1emを指定してあげることで文字の開始位置を修正をします。

まとめ

今回の記事では2行目以降から1文字下げる方法について解説しました。

重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。

ポイント

  • text-indentプロパティで1行目の字下げ幅を設定する
  • padding-leftで、ずれている1文字分を元に戻す

頻繁に使われるようなテクニックではないですが、キャンペーンページなどの注意事項や応募要項などで使われことがあるのでしっかり覚えておきましょう。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村