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

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

  • 2007-03-03 (土) 23:21
  • CSS

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

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

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

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

※米印を使う場合はこいつが便利。
改行してもこの通り。ちゃんと開始位置が揃ってる。

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

他には開始位置を揃えるいわゆる「ぶら下げ」を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>※1</dt><dd>記号等を含む2文字以上の要素にぶら下げをしたい場合、
定義型リストを使うのがおすすめ。</dd></dl>

※1
記号等を含む2文字以上の要素にぶら下げをしたい場合、
定義型リストを使うのがおすすめ。

<dt>をfloat:leftで左に配置して、<dd>の開始位置をpadding-left:2.5emで揃えている。clear:leftとしたのは※2などがあった場合に、前の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
※1 
prototype.js使用。 class名がhang_dlのdlにのみ適用します。
改行してもこの通り。ちゃんと開始位置が揃ってる。
※2 
1行でも。
※3 
3行になっても、
ちゃんと
ぶら下げ出来てます。
※10 
dtの幅が違っても一番長いものに合わせます。
一つのdtに複数のddを使っても大丈夫。

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

インタビュアー:
こんな会話のようなぶら下げも、
padding-leftを指定しなくてもこの通り。
答える人:
見た目の微調整はCSSで出来ます。

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

add to hatena hatena.comment (441) add to del.icio.us (149) add to livedoor.clip (86) add to Yahoo!Bookmark (0) Total: 676

Comments:0

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://loconet.web2.jp/blog/archives/2007/03/cssprototypejs.html/trackback
Listed below are links to weblogs that reference
CSSとprototype.jsで「ぶら下げ」レイアウトをやってみた from webデザイナーのナナメガキ
trackback from まとめデータベース.jp 08-04-26 (土) 23:58

prototype.jsに関する情報源のまとめ…

prototype.js関連のUrl一覧

Prototype 【別窓】

prototype.jsとは – はてなダイアリー 【別窓】 (more…)

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

Search
Feeds
Meta

Return to page top