【CSS】文頭や2行目以降を1文字分、字下げ(インデント)する方法
今回はCSSを使用して、リストや段落など指定した箇所のテキストを1文字分、字下げ(インデント)する方法の例です。
CSSで字下げ(インデント)する方法の例
文頭を1文字分、字下げする例
以下はソースコードの例となり、p要素の文頭が1文字分、字下げされます
p{
text-indent: 1em;
}
上記例では、text-indentプロパティで 1emを指定し、一行目のみテキストを1em右に寄せています。
2行目以降を1文字分、字下げする例
文頭に、記号や数字などを使用した際に、2行目以降の文章を1文字分、字下げしたい場合があると思います。
以下は、そのような場合に使用できるソースコードの例となります。例では、p要素の2行目以降から1文字分、字下げされます。
p{
padding-left: 1em;
text-indent: -1em;
}
上記例では、p要素にpadding-leftプロパティで1emを指定し、左側に1emのスペースをつくり、text-indentプロパティで -1emを指定し、一行目のみテキストを-1em左に寄せています。そのことにより、p要素の2行目以降から1文字分、字下げされます。
単位のemについて
今回の例で使用している単位のemは、文字の高さを基準にした単位で、1emは1文字分となります。