Webページ上でのテキストの均等割付け【見出し編】

Publish:

Category:JavaScript

Tag:

  • Hatena Bookmark:
  • Twitter:

テーブルの項目のところなんかはよくデザイン上で左右均等にテキストが配置されてたりしてて、Webページでいざ左右均等に文字を配置しようとしたときになかなかいい方法がみつからなくってついつい断念してしまうことがある。そんなとき、細部までこだわりたい時のメモ。

jQueryプラグイン「jQuery.justify.js」で均等割付け

jQueryプラグイン「jQuery.justify.js」で均等割付けをする事ができる模様。

「jQuery.justify.js」の使い方

githubから「jQuery.justify.js」をダウンロードし、HTMLの<head>タグ内で「jQuery.justify.js」ファイルを読み込んで、均等割付けしたい部分を指定してjustifyメソッドを呼び出す。

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

試しに以下の「均等割り付けサンプル」のh3要素にjustify、テーブル要素にjustify-tableクラスを付加して「jquery.justify.js」を適応してみる。

<h3 class="justify">均等割り付けサンプル</h3>
<table class="justify-table">
<tbody>
…
…

均等割り付けサンプル

会社名 ○×△商事
住所 テキストテキストテキストテキストテキストテキストテキスト
電話番号 000-000-0000
FAX 000-000-0000

サンプルを別ウィンドウで開く

ブラウザ対応状況

Internet Explorer 6~8
FireFox 3.6
Chrome 6
Safari 5

Post Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Return to page top