【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文字分となります。

参考サイト、参考書籍

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はコチラから。