【CSS】テキストの2行目以降を字下げする（ぶら下げインデント）方法

text-indentを使用する方法

<p class="indent">※サンプル文章サンプル文章サンプル文章サンプル文章</p>

.indent {
  /* ブロック全体を右に移動させる */
  padding-left: 1em;
  /* 1行目のみ左に移動させる */
  text-indent: -1em;
}

.indent {
   /* marginを使用しても上記と同じことが出来る */
  margin-left: 1em;
  text-indent: -1em;
}

• メリット

  • コードがシンプル。

• デメリット

  • フォントの種類によってはインデントの位置がずれる場合がある。

備考

• text-indentプロパティにhangingキーワードを指定する方法もある。
• しかし、2021年7月現在において、まだブラウザのサポートが進んでいない。

Can I use... Support tables for HTML5, CSS3, etc

<p class="indent">※サンプル文章サンプル文章サンプル文章サンプル文章</p>

.indent {
  /** hangingキーワードを指定すると、1行目以外をインデントする */
  text-indent: -1em hanging;
}