text-justifyプロパティ

TOPページに戻る > CSS

スポンサード リンク

text-justifyプロパティ

文字を両端揃えにする
text-justifyプロパティはIEのみ対応。text-align: justify;を指定していないと適用されません
日本語を両端揃えにするにはtext-justifyの値をinter-ideographにしてください

使い方(書式)

セレクタ { text-justify: 値; }                                    

text-justifyプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11
適用できる要素 ブロック要素
子要素へのスタイルの継承 する

プロパティの値 説明
auto ブラウザが表示を自動調整
inter-ideograph 日本語や中国語を文字間隔を調整して均等割付
日本語の両端揃えは、この値を使います
inter-cluster 東南アジア系の言語を文字間隔を調整して両端揃え
inter-word 単語の間隔を広げて両端揃え
distribute 単語と文字、両方の間隔を調整して両端揃え
distribute-all-lines 単語と文字、両方の間隔を調整して両端揃え
文字数が少ない行や最後の行も両端揃えする
kashida アラビア語の文字を引き伸ばして両端揃えする
newspaper 欧文、英文を両端揃えにする
単語のスペースを広げ、さらに調整が必要な時は文字の間隔も広げる
none 両端揃えをしない

実際の指定方法

ブラウザが表示を自動調整

.hoge { text-justify: auto; text-align: justify; }

日本語の両端揃え

.hoge2 { text-justify: inter-ideograph; text-align: justify; }

東南アジア系の言語を文字間隔を調整して両端揃え

.hoge3 { text-justify: inter-cluster; text-align: justify; }

単語の間隔を広げて両端揃え

.hoge4 { text-justify: inter-word; text-align: justify; }

単語と文字、両方の間隔を調整して両端揃え

.hoge5 { text-justify: distribute; text-align: justify; }

単語と文字、両方の間隔を調整して両端揃え
文字数が少ない行や最後の行も両端揃えする

.hoge6 { text-justify: distribute-all-lines; text-align: justify; }

アラビア語の文字を引き伸ばして両端揃えする

.hoge7 { text-justify: kashida; text-align: justify; }

欧文、英文を両端揃えにする
単語のスペースを広げ、さらに調整が必要な時は文字の間隔も広げる

.hoge8 { text-justify: newspaper; text-align: justify; }

両端揃えをしない

.hoge9 { text-justify: none; text-align: justify; }

box枠

.hogebox {
 width: 500px;                /* 横幅を500pxに指定 */
  border: solid 1px #FF6600;  /* 枠線を表示 */
   }

html部分

<div class="hogebox">
<p>実際の表示</p>
<p class="hoge">文字</p>
<p class="hoge2">文字</p>
<p class="hoge3">文字</p>
<p class="hoge4">文字</p>
<p class="hoge5">文字</p>
<p class="hoge6">文字</p>
<p class="hoge7">文字</p>
<p class="hoge8">文字</p>
<p class="hoge9">文字</p>
</div>

実際の表示

auto

近くのパン屋さんで大好きなのはフランスパンのあんぱんなのよ。甘さがほど良く歯ごたえがあってとってもおいしいの。ぜひ、食べて見てくださいませね。揚げパンもカリカリできなこがついててこれもおしいの。チキンハンバーガーも人気なの。タレが甘辛くて若い人に人気なのよ。うち、まじよ

inter-ideograph

近くのパン屋さんで大好きなのはフランスパンのあんぱんなのよ。甘さがほど良く歯ごたえがあってとってもおいしいの。ぜひ、食べて見てくださいませね。揚げパンもカリカリできなこがついててこれもおしいの。チキンハンバーガーも人気なの。タレが甘辛くて若い人に人気なのよ。うち、まじよ

distribute-all-lines

近くのパン屋さんで大好きなのはフランスパンのあんぱんなのよ。甘さがほど良く歯ごたえがあってとってもおいしいの。ぜひ、食べて見てくださいませね。揚げパンもカリカリできなこがついててこれもおしいの。チキンハンバーガーも人気なの。タレが甘辛くて若い人に人気なのよ。うち、まじよ





(C)2012 ホームページ作成無料