CSSとprototype.jsで「ぶら下げ」レイアウトをやってみた

まずは最近知って便利だと思ったCSSの小技をひとつ。

文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。

.note {
padding-left:1em;
text-indent:-1em;
}

<p class=”note”>※米印を使う場合はこいつが便利。<br />
改行してもこの通り。ちゃんと開始位置が揃ってる。</p>

「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。

他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で用語とその説明を表記する際に使うものだが、脚注に使っても問題ないかと思われます。

dl#footnote dt{
float:left;
clear:left;
}
dl#footnote dd{
padding-left:2.5em;
}

<dl id=”footnote”><dt>※１</dt><dd>記号等を含む２文字以上の要素にぶら下げをしたい場合、
定義型リストを使うのがおすすめ。</dd></dl>

<dt>をfloat:leftで左に配置して、<dd>の開始位置をpadding-left:2.5emで揃えている。clear:leftとしたのは※２などがあった場合に、前のfloat:leftを打ち消すため。でもこれだとdtの幅が変わった場合に対応出来ない。その都度指定すればよいのだが、数が増えた場合に大変な事になるので、ここはjavascriptを使って汎用的なぶら下げを作ってみようと思う。

dl要素を他に使う場合もあるだろうから、クラス名「hang_dl」のdl要素にだけ適用されるものを作る。機能としては、各dlごとにdtの幅を取得して、その値をddのpadding-leftに入れ込めば大丈夫なんではないかと。dtへの「float:left;」と「clear:left;」はcssで指定、一応ddへのデフォルトをリセットするために「margin:0; padding:0;」としておく。サイズの取得はブラウザ対応がちょっとめんどくさいので「prototype.js」を利用。それで書いてみたjavascriptとCSSがこれ↓。

<script type="text/javascript"  xsrc="prototype.js" mce_src="prototype.js"></script>
<script type="text/javascript">
<!--
//windowがonloadされたらseHangDl()を呼び出す
Event.observe(window, 'load', function(){
setHangDl();
});

function setHangDl(){
var hangDls = $$('dl.hang_dl');   //クラス名がhand_dlのdlを取得
var maxes = Array();   //各dlごとのdtの最大幅を入れる配列

//各dlごとにdtとdlを取得
var getDts = function(e,i){ return e.getElementsByTagName('dt'); }
var elDts = hangDls.collect(getDts);
var getDds = function(e,i){ return e.getElementsByTagName('dd'); }
var elDds = hangDls.collect(getDds);

//dtの幅を取得
var getW = function(e,i){
var tmpW = Array();
for(var j = 0; j

一応このページで使ってますがsampleはこちら。javascriptはまだ勉強中なのでもっといいやり方があるのかもしれませんが、これを使うとHTML自体はシンプルになるし、ぶら下げを多用する場面ではいいのではないでしょうか。以下のような、インタビューとか会話でよく使われる文字組にも使えますかね。

しかしまあ、ただこれだけのために「prototype.js」を使うのもちょっと無駄が多い気もするなあ。