【CSS】文頭や2行目以降を1文字分、字下げ（インデント）する方法

今回はCSSを使用して、リストや段落など指定した箇所のテキストを1文字分、字下げ（インデント）する方法の例です。

CSSで字下げ（インデント）する方法の例

以下はソースコードの例となり、p要素の文頭が1文字分、字下げされます

p{
    text-indent: 1em;
}

上記例では、text-indentプロパティで 1emを指定し、一行目のみテキストを1em右に寄せています。

文頭に、記号や数字などを使用した際に、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は、文字の高さを基準にした単位で、1emは1文字分となります。