日本人は表組が大好きです。 クリスマスのチキンより表組みが好きなんです。（嘘

そんな表組の中で時折見かけるのが下表のようなデザイン。

[caption id=“attachment_285” align=“alignnone” width=“303” caption=“表1”]表1[/caption]

見出し部分を均等割り付けです。 均等割り付けなんかイヤだ！といってもやらなきゃいけないときもあるわけで。

普通、こういう表現をする場合スペースなんかで間隔を揃えてしまいがちですが、アクセシビリティを考えるとあんまりよろしくありません。

そんなとき、CSSプロパティのletter-spacingを利用して文字間隔を揃えます。 しかし、手動でやるのは文字数やフォントサイズが変わるたびに値を調整しないといけないため、あまり効率的ではありません。

そんなときに使えるのが本jQueryプラグインになります。

jQuery.justify.js [ダウンロード]

※IE6, 7, 8, firefox 3.5, Safari 4, Google Chorme 4での動作を確認しています。

[ad]

使い方

headタグの中に、スクリプトファイルを読み込んで均等割り付けしたい部分のセレクタを指定してjustifyメソッドを呼び出すだけ。

<script type="text/javascript" src="js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.justify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.justify th').justify(); 
});
</script>

以下のようなHTMLソースがあれば、thタグの部分が均等割り付けされます。

<table border="1" class="justify">
	<tr>
		<th>会社名</th>
		<td>Example Inc</td>
	</tr>
	<tr>
		<th>所在地</th>
		<td>佐賀県佐賀市鍋島区蓮池町1-1</td>
	</tr>
	<tr>
		<th>代表電話番号</th>
		<td>123-456-7890</td>
	</tr>
	<tr>
		<th>代表取締役</th>
		<td>山田太郎</td>
	</tr>
</table>

実際に下表のように均等割り付けされます。

会社名 Example Inc
所在地 佐賀県佐賀市鍋島区蓮池町1-1
代表電話番号 123-456-7890
代表取締役 山田太郎

やっていることは、セレクタで指定されたHTMLエレメントの最大幅と文字の幅を計算して適切なletter-spacingを与えているだけです。

本プラグインの使い方等、ご質問があればコメントを入れていただくか、 twitterにて@nojimage宛につぶやいていただければ、たぶんご返答いたします。