Profile

【CSS】コピペOK！2行目以降だけを字下げ(インデント)する方法

【CSS】2行目以降だけを字下げ(インデント)する方法

箇条書きの文章などで2行目以降だけを字下げ(インデント)したいときは、CSSで2行追加するだけで実現できます。

目次

2行目以降を字下げのサンプル

  • ●宝塚歌劇団には現在「花組」「月組」「雪組」「星組」「宙組」の5つの組が存在します。1921年に2組制で公演が行われるようになったことで花組と月組が誕生。その後1924年に雪組、1933年に星組、1998年に宙組が誕生しました。
  • ●宝塚のオフィシャルショップ「キャトルレーヴ」はフランス語で「4つの夢」という意味ですが、これはキャトルレーヴがオープンした1994年当時はまだ宙組がなく「花月雪星」の4組体制だったためです。

コピペはこちらから

<ul>
  <li>●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。</li>
  <li>●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。</li>
</ul>

li {
  /* デフォルトのリストのマークを無しにする */
  list-style-type: none;

  /* 字下げ */
  padding-left: 1em;
  text-indent: -1em;
}

2行目以降を字下げの仕組み

そもそもtext-indentとは？

簡単に言うと文書の1行目のみに字下げ幅を指定するものです。今回の使い方では「-1em」とマイナスの数を指定しましたが、試しに普通に正の数を指定してどうなるか見てみます。まずは何もしていない状態。

  • ●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。
  • ●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。

ここに「text-indent: 1em」を指定するとこうなります。 ↓

  • ●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。
  • ●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。

1行目のみ1文字分の字下げが出来ています。これが本来の使い方なのですが、要素の先頭、つまり1行目のみに効くというtext-indentの性質を利用したのが今回の方法。では実際に「2行目以降の字下げ」をやってみます。

padding-leftで左に余白を作る

まずはpadding-leftで左側に1文字分の余白を作成。一度全体を右にずらすようなイメージ。

  • ●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。
  • ●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。
li {
  padding-left: 1em;
}

text-indentで1行目のみ左に戻す

次に、text-indentに「-1em」というマイナスの値を指定します。text-indentの性質上「1行目のみに効く」ので、結果的に1行目のみマイナス方向（左側）に1文字分詰めることができます。

これで完成。2行目以降のラインが揃うとすっきりして気持ちいいです。

  • ●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。
  • ●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。
li {
  text-indent: -1em;
}

まとめ

注意事項や規約など、箇条書きはwebページでもよく出てくるのでこの字下げは便利です。ちなみにこの「2行目以降の字下げ」はぶら下げインデントという呼び方があるそうで、今回調べていて初めて知りました。

関連記事