WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

文字の2行目以降を字下げする

「※」や「・」、「☆」等が文字の先頭にきた時に
2行目以降を字下げすると読みやすい。

<p>・テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
p {
  text-indent: -1em;
  padding-left: 1em;
}

text-indent: -1em;

text-indentで1行目の文字を1em(1文字)分マイナスする。

padding-left: 1em;

padding-leftで文字全体を1em分右に移動させると
2文字目以降が字下げしたような見た目にすることができる。


文字によって「1em」の部分は調整する。
(text-indentとpadding-leftの値はプラストマイナス以外は同じにする)