箇条書きや注意事項を文章で書く場合、テキストの前に『※』や『・』などの記号を使うことが多く1つの文章の量が多いと改行され記号の下から文章が始まってしまいます。
spanタグやbrタグなどで改行位置を決めて、余白を空けることをしていたら時間もかかりますしコードの可読性が低くなります。
こちらの記事では2行目以降から1文字下げる方法について分かりやすくまとめてるので、ぜひご活用ください。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
2行目以降の文字をインデント(字下げ)する方法
2行目以降の文字をインデント(字下げ)する方法はとても簡単で、padding-leftとtext-indentの2つのプロパティを使うだけで実現することができます。<p class="sample">
ここの行はインデントされません。<br>
この行以降はインデントされます。<br>
インデントされます。<br>
</p>
.sample{
padding-left:1em;
text-indent: -1em;
}
ここの行はインデントされません。
この行以降はインデントされます。
インデントされます。
インデント(字下げ)される仕組み
text-indent:-1em
.sample{
text-indent: -1em;
}
左の余白が1文字分詰められています。
この行以降はインデントされます。
インデントされます。
まず始めにtext-indentとは、文章の1行目のインデント(字下げ)を行うプロパティです。
今回はtext-indentに-1emの単位を設定しているため、文章の1行目が1文字分字下げされることになります。
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文字分を元に戻す