| Tips 4 | フォームを簡単に整列させたい | JavaScript |
| ＞＞ | point ラベルの長さで自動的に調整する | ||
| ＞＞ | point HTMLに変更を加えることなく利用できる |
フォームを【1】のように整列させるには、table要素を使ったり、CSSで幅を調整するなどする必要があり、なかなかめんどうだ。
【1】完成したところ。フォームがキレイに整列している
そこで、JavaScriptを使って簡単に整列させる方法を紹介しよう。「Janko At Warp Speed」の「Justify elements using jQuery and CSS」（www.jankoatwarpspeed.com/post/2008/07/09/Justify-elements-using-jQuery-and-CSS.aspx）を参考に作成した。元のままでは、日本語のWebページでうまく動作しないので、ここではそのあたりを調整した。
まずはHTMLを準備しよう【2】。そして、CSSで若干調整をする【3】。このままの状態では【4】のように幅がばらばらになってしまう。これにJavaScriptを組み込もう【5】。jQueryが必要なので、ダウンロードするか （jquery.com/）、「AJAX Libraries API」（code.google.com/intl/ja-JP/apis/ajaxlibs/）で取り込んでおく。これで完成だ。
まずはHTMLを準備しよう【2】。そして、CSSで若干調整をする【3】。このままの状態では【4】のように幅がばらばらになってしまう。これにJavaScriptを組み込もう【5】。jQueryが必要なので、ダウンロードするか （jquery.com/）、「AJAX Libraries API」（code.google.com/intl/ja-JP/apis/ajaxlibs/）で取り込んでおく。これで完成だ。
【2】HTML。ここでは、dl要素でマークアップした
【3】CSS。ラベルを回り込ませて横に並べた
【4】元の状態。頭がそろっていないため見にくい
【5】作成するスクリプト。jQueryが必要だ
それでは、スクリプトの内容と仕組みを紹介しよう。まずは、ページ内のlabel要素を調べて、各ラベルの長さを調査する。そして、いちばん長いラベルを見つけたら、すべてのラベルをその長さに設定するというわけだ。そのため、幅を自分で記入する必要もないし、たとえば、さらに長いラベルが追加されると自動的に調整される。非常に便利だ。
[INDEX]
>>> Tips1 ケータイのアクセスを振り分けしたい
>>> Tips2 ログインフォームをおしゃれに登場させたい
>>> Tips3 本格的なiPhoneサイトを簡単につくりたい
>>> Tips4 フォームを簡単に整列させたい
>>> Tips5 引用をかわいく演出したい
>>> Tips6 テキストエリアを小さくしておきたい
>>> Tips7 Internet Explorer 6用のCSSを簡単につくりたい
[INDEX]
>>> Tips1 ケータイのアクセスを振り分けしたい
>>> Tips2 ログインフォームをおしゃれに登場させたい
>>> Tips3 本格的なiPhoneサイトを簡単につくりたい
>>> Tips4 フォームを簡単に整列させたい
>>> Tips5 引用をかわいく演出したい
>>> Tips6 テキストエリアを小さくしておきたい
>>> Tips7 Internet Explorer 6用のCSSを簡単につくりたい
