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

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

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

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

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

本書情報

著者	Mana
発売日	2019/3/16
ページ数	280ページ
Kindle版	○
レビュー (Amazon)	(1,654件)

１冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

動画情報

作成者	たにぐち まこと
学習時間	9時間
受講者数	43,706人
レビュー	(9,232件)

動画の詳細はこちら

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;
}

まず始めに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文字下げる方法について解説しました。

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