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

Pocket
LINEで送る

※注意事項ダミーテキスト注意事項ダミーテキスト注意事項ダミーテキスト注意事項ダミーテキスト注意事項ダミーテキスト

とか、

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

とか、
チェックバック時に「頭揃えて」と指示されて『やっぱりか…』となりがちな、ぶら下がりインデント。
実装方法が複数あるので(ケースバイケースでもあるんですが)、メモとしてまとめ。

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

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

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

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

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

こちらも文頭の文字数が決まっているとき用。spanで囲んだ文頭のインデントさせたい幅を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

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

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.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です。子要素で文頭の文字を指定するので、「※」など使用する文字が決まっているときに。

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

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

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

おまけ。
上記を流用して、SPサイズではtext-align: left;でPCサイズではtext-align: center;に指定してみた(ここではBootstrapのclass指定text-left text-md-centerを使用しました)
※ブラウザ幅を伸び縮みさせてみてください。

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

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

Pocket
LINEで送る

back to top