jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

均等割り付け

概要
均等割り付け。 Excelでおなじみの均等割り付けを行います。
使用方法
コード中の使用例を参照ください。
備考
IE7以下では以下のCSS設置で同様なことが実現出来ましたが、現在のCSSでは同様なことは実現できないようです。
text-align: justify;
text-justify: distribute-all-lines;
注意
単語をspanで分断しますのでSEOを気にされる方はご注意ください。
会社名 ---> <span>会</span><span>社</span>名
実装例
左側の列が均等割り付け
会社名あああ
所在地などいい
設立ううううううううう
電話番号
ニックネームおおおお
TELかかかか

/**
 * 均等割り付け
 *
 * IE8も対応 IE7は未対応
 *
 * 使用例
 *	<table>
 *		<tr>
 *			<th class="justifyline">会社名</th><td></td>
 *		</tr>
 *		<tr>
 *			<th class="justifyline">設立</th><td></td>
 *		</tr>
 *		<tr>
 *			<th class="justifyline">電話番号</th><td></td>
 *		</tr>
 *	</table>
 *
 * @auther ao-system
 */
(function(window,document){
	var targetClass = 'justifyline';
	init();

	function init() {
		//要素と結果を集める。結果を直接適用させると、tableで徐々に幅が異なっていくため
		var allElm = document.getElementsByTagName('*');
		var resultElms = [];
		var resultHtml = [];
		var c = 0;
		for (var i = 0; i < allElm.length; i++) {
			if (allElm[i].className.indexOf(targetClass) != -1) {
				resultElms[c] = allElm[i];
				resultHtml[c] = render(allElm[i]);
				c++;
			}
		}
		//適用
		for (var i = 0; i < resultElms.length; i++) {
			resultElms[i].innerHTML = resultHtml[i];
		}
	}

	function getFontSize(elm) {
		var testDiv = document.createElement('div');
		testDiv.style.width = '1em';
		elm.appendChild(testDiv);
		var fontSize = testDiv.clientWidth;
		elm.removeChild(testDiv);
		return fontSize;
	}

	function render(elm) {
		var words = elm.innerHTML;
		if (words.length == 1) {
			elm.style.textAlign = 'center';
			return;
		}
		var origFontSize = getFontSize(elm);
		var wordsWidth = grabPixelLineSize(words,origFontSize); //文字列の幅を取得する
		elm.style.wordBreak = 'keep-all';	//親要素の禁則処理を無効にする
		var parentWidth = elm.clientWidth;
		var fontRatio = (parentWidth - wordsWidth) / (words.length - 1);
		var chars = words.slice();
		var lineText = '';
		for (var i = 0; i < chars.length - 1; i++) {
			lineText += '<span style="letter-spacing:' + fontRatio + 'px !important">' + chars[i]  + '</span>';
		}
		lineText += chars[chars.length - 1];
		return lineText;
	}

/**
 * 現在の文章の幅を測る
 *
 */
	function grabPixelLineSize(words,origFontSize) {
		var divElm = document.createElement('div');
		divElm.id = 'justifydummy';
		divElm.style.display = 'inline-block';
		divElm.style.margin = 0;
		divElm.style.padding = 0;
		divElm.style.fontSize = origFontSize + 'px';
		divElm.innerHTML = words;
		document.getElementsByTagName('body').item(0).appendChild(divElm);
		var elmWidth = document.getElementById('justifydummy').clientWidth;
		document.getElementsByTagName('body').item(0).removeChild(divElm);
		return elmWidth;
	}

})(window,document);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page