文章の1行目の先頭にだけ余白を入れたい時ってたまにあると思います。
この余白を『インデント(字下げ)』と呼びます。
色々な方法があるかと思いますが、今回はそんな時に便利なCSSのプロパティがあるのでそれをご紹介します。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
1行目の先頭を1文字分インデント(字下げ)する方法
早速ですが今回使うCSSはtext-indent
になります。
実際にこれを使うとどうなるかを見てみましょう(スクロールすると4種類確認できます)
See the Pen
テキストの1行目だけ1文字分の余白を入れる方法 by junpei (@junpei-sugiyama)
on CodePen.
何パターンかあるので、1つずつ見ていきます。
HTMLは共通でこちらになります。
<div class="container">
<p>
テキストが入ります。
</p>
</div>
1行目の先頭だけ1文字分インデント(字下げ)
これが基本となります。
p {
text-indent: 1em;
}
単位はpxや%も使えますが、1文字分の場合は現在のフォントサイズに対する倍率である単位"em"を使います。
1行目の先頭だけ1文字分マイナス方向にインデント(字下げ)
単位をマイナスにすれば逆方向になります。
p {
text-indent: -1em;
}
1行目の先頭以外1文字分インデント(字下げ)
これは先ほどの応用になります。
p {
padding-left: 1em;
text-indent: 1em;
}
全体に1文字分字下げして、text-indent
で先頭だけ1文字分戻す感じなので、最初の行以外が1文字分字下げされたように見えます。
1文字分インデント(字下げ)(letter-spacingを設定している場合)
最後に letter-spacing
を設定している場合です。
p {
letter-spacing: .3em;
text-indent: 1.3em;
}
例えば letter-spacing
が0.3em
だったとします。
この場合 text-indent
が1em
だと少しズレてしまうので、letter-spacing
と text-indent
の差が1em
になるようにします。
プライバシーポリシーなどで番号付きのリストなどは擬似要素で書けば問題ありませんが、そうではない時には今回ご紹介した方法が役に立つかと思います。
まとめ
今回は1行目を1文字分インデント(字下げ)する方法を解説しました。
あまり使う機会はないかも知れませんが、覚えておいて損はないかと思います。
以上になります。