注意書きなどで使うぶら下がりインデント、CSSでの実装方法まとめ

たとえば

※注意事項ダミーテキスト注意事項ダミーテキスト注意事項ダミーテキスト注意事項ダミーテキスト注意事項ダミーテキスト
Q: 質問事項ダミーテキスト質問事項ダミーテキスト質問事項ダミーテキスト質問事項ダミーテキスト質問事項ダミーテキスト

など、テキストをそのまま流し込んで実装すると(例えデザインの通りだとしても!)、チェックバック時に「頭揃えて」と修正指示をされ『やっぱりか…』となりがちな、ぶら下がりインデント。
2行目以降の頭揃えの実装方法ですが、複数あるので(ケースバイケースでもあるんですが)メモとしてまとめます。

case01: padding-leftとtext-indentを使う

一番オーソドックスなやり方。文頭の文字数が確定しているなら使える。FONT環境によってはズレが発生してしまうことも(例えばMacのヒラギノでは「※」の文字がなぜか一回り小さい)

<p class="caution01">※ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
p.caution01 { 
  padding-left:1em; /* ケースによって調整する */
  text-indent:-1em; /* ケースによって調整する */
}
Demo

※ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

case02: 上記の改良型。文頭の文字をinline-blockで幅指定。

こちらも文頭の文字数が確定している場合に。文頭のインデントさせたい文字をspanで囲み、CSSでspanをdisplay:inline-block;した上で幅を設定する。

<p class="caution02"><span>※</span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
p.caution02 { 
  padding-left:1.25em; /* ケースによって調整する */
  text-indent:-1.25em; /* ケースによって調整する */
}
p.caution02 span {
  display: inline-block;
  width: 1.25rem; /* ケースによって調整する */
  text-indent: 0;
}
Demo

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

case03: 子要素とpositionを使う(左寄せ編)

こちらは子要素を使って文頭の文字の表示を指定するので、「※」や「注:」など使用する文字が確定しているケースでおすすめ(あるいはケースごとにCSSの記述を書く)。HTMLもスッキリ。

注意点:text-align:center;の場合、文頭の文字が左端に飛んでってしまう。

<p class="caution03">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
p.caution03 { 
  position:relative;
  padding-left:1.25em; /* ケースによって調整する */
}
p.caution03:before{
  position:absolute;
  content:"※"; /* 文頭に表示したい文字を""内に記述する */
  left:0;
  top:0;
}
Demo

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

追記210528: contentに日本語(全角文字?)を指定すると文字化けすることがある

まだ自分では遭遇していない事象ですが、対処方法をまとめたブログ記事がありましたのでご参照ください。

case04: 子要素とpositionを使う(中央寄せ編)

前述case03の注意点「text-align:center;の場合、文頭の文字が左端に飛んでってしまう」へ対応したバージョン。
今度は逆にtext-leftにしたときに頭が揃わなくなるし、複数行のときも揃い方がイマイチなので、文字数が少なくてtext-align:center;限定のぶら下がりインデント実装用です(だいぶニッチなケースですね)。
簡単に言うと、p要素に指定していたposition:relative;と子要素の指定を、内側に追加したspanタグに移行させています。

<p class="caution04"><span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>
p.caution04 { 
  line-height: 1rem; /* ケースによって調整する */
  text-align: center;
}
p.caution04 span { 
  position:relative;
  padding-left:1rem; /* ケースによって調整する */
}
p.caution04 span:before{
  position:absolute;
  content:"※"; /* 文頭に表示したい文字を""内に記述する */
  left:0;
  top:0;
}
Demo

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

case05: display:table;を使う

文頭の文字数が増えても対応可なのでケースごとにCSSの記述を増やさなくて済む。HTMLがちょっと煩雑になるのが気にならなければ。

注意点:text-align:center;の場合、文頭の文字が左端に飛んでってしまう。

<p class="caution05"><span class="icon">※</span><span class="text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>
p.caution05 { 
  display: table;
}
p.caution05 span.icon {
  display: table-cell;
  padding-right: 0.3em; /* ケースによって調整する */
  white-space: nowrap;
}
p.caution05 span.text {
  display: table-cell;
  width: 100%;
}
Demo

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

(注)ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

注意事項その3:ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

case06: 子要素とFlexboxを使う(左寄せ編)

IEで崩れそうで敬遠していましたが、いよいよFlexboxです。子要素で文頭の文字を指定するので、「※」など使用する文字が決まっているときに。
こちらもcontentで全角文字を使う想定なので、case03の追記をご参照ください。

<p class="caution06"><span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>
p.caution06 { 
  display: flex;
}
p.caution06:before {
  content:"※"; /* 文頭に表示したい文字を""内に記述する */
  left:0;
  top:0;
  margin-right: 5px; /* ケースによって調整する */
}
Demo

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

case07: 子要素とFlexboxを使う(中央寄せ編)

justify-content: center;を指定します。

<p class="caution07"><span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>
p.caution07 { 
  display: flex;
  justify-content: center;
  text-align: center;
}
p.caution07:before {
  content:"※"; /* 文頭に表示したい文字を""内に記述する */
  left:0;
  top:0;
  margin-right: 5px; /* ケースによって調整する */
}
Demo

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

おまけ

レスポンシブ時のtext-align指定の切り替え

上記「case07: 子要素とFlexboxを使う(中央寄せ編)」を流用して、ブラウザ幅767px以下ではtext-align: left;で768px以上ではtext-align: center;に指定してみた(ここではBootstrapのclass指定text-left text-md-centerを使用しています)
※ブラウザ幅を伸び縮みさせてみてください。

<p class="caution0 text-left text-md-center"><span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>
Demo

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト