HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


文字の均等割付け

CSSの書き方

text-justify:値 ;

CSSの詳細情報
プロパティ名 text-justify 読み方 テキスト・ジャスティファイ
初期値 auto 意味 文字均等割付
auto/distribute/distribute-all-lines/inter-word/
inter-ideograph/inter-cluster/kashida/newspaper
対象 ブロックレベル要素
CSSレベル CSSレベル3 対応ブラウザ Windows MAC
継承 する IE 5.0以上 --

解説

文字を均等に割り付ける方法を指定するスタイルシートです。「text-align」プロパティのサブプロパティなので、「text-align」プロパティが記述されていなければ、動作しません。さらに、「text-align:justify;」としたときに有効となります。

IE独自だが、CSSレベル3で導入予定

現時点(2006年2月)では、このプロパティはInternetExplorer以外のブラウザでは対応していません。IEがCSSレベル3のプロパティを先行して対応している形となります。ただし、CSSレベル3での正式な「text-justify」プロパティでは、「distribute-all-lines」という値は実装しません。

設定できる値

text-justify」プロパティで設定できる値は以下の表のようになります。

キーワード 割付方法
auto Webブラウザに依存
distribute 単語間および文字間を調節して均等割り付けする
distribute-all-lines 文字数が1行分に満たない場合でも、distributeと同じ方法で均等割り付けする
inter-word 単語間を広げて均等割り付けする
inter-ideograph 日本語や中国語の文字間のみ均等割付する
inter-cluster 東南アジア言語向けの均等割付
kashida アラビア語向けの均等割付
newspaper 単語間および文字間を調節して均等割り付けする(英語等に適している)

※引用元:藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P123、2005

CSS/HTMLサンプル

p { width:600px; text-align:justify; text-justify:distribute-all-lines; }

段落要素の文字列を単語間及び文字間で均等割付 サンプル