まずは最近知って便利だと思ったCSSの小技をひとつ。
文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。
.note {
padding-left:1em;
text-indent:-1em;
}
<p class="note">※米印を使う場合はこいつが便利。<br />
改行してもこの通り。ちゃんと開始位置が揃ってる。</p>
※米印を使う場合はこいつが便利。
改行してもこの通り。ちゃんと開始位置が揃ってる。
「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。
他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、
タグの入れ子を使ってもいいが、
- の定義型リストを使うのがおすすめ。Definition Listの略で用語とその説明を表記する際に使うものだが、脚注に使っても問題ないかと思われます。
dl#footnote dt{
float:left;
clear:left;
}
dl#footnote dd{
padding-left:2.5em;
}
<dl id="footnote"><dt>※１</dt><dd>記号等を含む２文字以上の要素にぶら下げをしたい場合、定義型リストを使うのがおすすめ。</dd></dl>
- ※１
- 記号等を含む２文字以上の要素にぶら下げをしたい場合、
定義型リストを使うのがおすすめ。
- をfloat:leftで左に配置して、
- の開始位置をpadding-left:2.5emで揃えている。 clear:leftとしたのは※２などがあった場合に、前のfloat:leftを打ち消すため。でもこれだとdtの幅が変わった場合に対応出来ない。その都度指定すればよいのだが、数が増えた場合に大変な事になるので、ここはjavascriptを使って汎用的なぶら下げを作ってみようと思う。
