箇条書きや注意事項を文章で書く場合、テキストの前に『※』や『・』などの記号を使うことが多く1つの文章の量が多いと改行され記号の下から文章が始まってしまいます。
spanタグやbrタグなどで改行位置を決めて、余白を空けることをしていたら時間もかかりますしコードの可読性が低くなります。
こちらの記事では2行目以降から1文字下げる方法について分かりやすくまとめてるので、ぜひご活用ください。
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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;
}まず始めに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文字分を元に戻す
頻繁に使われるようなテクニックではないですが、キャンペーンページなどの注意事項や応募要項などで使われことがあるのでしっかり覚えておきましょう。