2行目以降を字下げする - CSS
以下の2つのプロパティを使って、実現する
- padding-leftプロパティ
- text-indentプロパティ
padding-leftプロパティ
その要素をどの程度ずらすか設定できる
padding-left: 1em;
は「1文字右にずらす」という意味。左側のpaddingを1文字分あけるという意味でもある。
また、padding-leftには負の数を設定することはできない
1emは1文字分の幅
text-indentプロパティ
テキストの1行目の開始位置をどの程度ずらすか設定できる。インデントの幅を指定できるということ。
text-indent: -1em;
は「1行目の開始位置を1文字左にずらす」という意味。
padding-leftを使って、1文字分右にずらす
適用前
適用後
.note { padding-left: 1em; }
確かに1文字分、右にずれている!!
text-indentを適用してみる
1行目の開始位置を1文字分、左にずらす
.note { padding-left: 1em; text-indent: -1em; }
おぉ!きれいになっている!!!
最終的なソース
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>※を揃える</title> <style> body { font-family: sans-serif; } p { text-align: justify; } .note { padding-left: 2em; text-indent: -2em; } </style> </head> <body> <p class="note">※画像はイメージです。実際の商品とは異なることがあります。クレームはお断りしております!</p> </body> </html>
遊んでみた
2と-2を設定
以下のようなCSSに変えてみた
.note { padding-left: 2em; text-indent: -2em; }
- 要素全体が2文字分、右へずれる
- 1行目の開始位置が2文字分、左へずれる
以下のような表示になる!
text-indentは字下げをするときに使う
text-indentは名前の通り、インデントを行うことができるため、text-indentだけを使えば1行目だけ字下げができる
.note { text-indent: 1em; }
参考文献
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログ (1件) を見る