text-justify－スタイルシートリファレンス

トップページへ

HTMLタグ（目的別）	CSSプロパティ（目的別）	WEBカラー	WEB画像
HTMLタグ（ABC順）	CSSプロパティ（ABC順）	優良デザイン	特殊文字
HTML5	CSS3	JavaScript	執筆書籍の紹介
HTMLの基本	CSSの基本	About	サイトマップ

トップページ > スタイルシートリファレンス > text-justify

★スタイルシートリファレンス

text-justify･･･均等割付の形式を指定する（IEがCSS3の草案を先行採用）

text-justifyプロパティは、W3Cで審議中の仕様をInternet Explorerが独自に採用したもので、 text-alignプロパティの値がjustifyのとき、テキストの均等割付の形式を指定する際に使用します。

text-justifyプロパティは、CSS3で標準採用されるかもしれません。

■値

auto: ブラウザに依存します。IE5やIE6では、半角スペースや全角スペースを調整して均等割付するようです。
distribute: 単語間隔と文字間隔を調整して均等割付します。
distribute-all-lines: 単語間隔と文字間隔を調整して均等割付します。途中の改行や最終行などの文字数が一行に満たない行も均等に割り付けます。
inter-cluster: アジアの言語などの単語間隔を持たない言語のテキストを均等割り付けします。
inter-ideograph: 日本語・中国語・韓国語など表意文字のテキストの、単語間隔と文字間隔の両方を調整して均等割付します。
inter-word: 単語間隔のみを調整して均等割付します。
kashida: アラビア文字のテキストの均等割り付けを意図しています。
newspaper: 単語間隔と文字間隔を調整して均等割付します。英文などラテンアルファベットに最適な指定方法です。

■使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

p.sample1 , p.sample2 , p.sample3 , p.sample4 , p.sample5 , p.sample6 , p.sample7 , p.sample8 {
width:100px; margin-right:50px; background-color:yellow;
float:left;
text-align:justify;
}
p.sample1 {text-justify:auto;}
p.sample2 {text-justify:distribute;}
p.sample3 {text-justify:distribute-all-lines;}
p.sample4 {text-justify:inter-cluster;}
p.sample5 {text-justify:inter-ideograph;}
p.sample6 {text-justify:inter-word;}
p.sample7 {text-justify:kashida;}
p.sample8 {text-justify:newspaper;}

div.sample0 {clear:both;}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

<div class="sample0">左から auto、distribute、distribute-all-lines、inter-clusterを指定</div>

<p class="sample1">
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。<br>
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
</p>
<p class="sample2">
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。<br>
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
</p>
<p class="sample3">
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。<br>
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
</p>
<p class="sample4">
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。<br>
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
</p>

<div class="sample0">左から auto、distribute、distribute-all-lines、inter-clusterを指定</div>
<div class="sample0">左から inter-ideograp、inter-word、kashida、newspaperを指定</div>

<p class="sample5">
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。<br>
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
</p>
<p class="sample6">
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。<br>
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
</p>
<p class="sample7">
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。<br>
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
</p>
<p class="sample8">
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。<br>
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
</p>

<div class="sample0">左から inter-ideograp、inter-word、kashida、newspaperを指定</div>

</body>
</html>

↓↓↓

ブラウザ上の表示

左から auto、distribute、distribute-all-lines、inter-clusterを指定

私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.

左から auto、distribute、distribute-all-lines、inter-clusterを指定

左から inter-ideograp、inter-word、kashida、newspaperを指定

■関連項目

text-align･･･････････････行揃えの位置・均等割付を指定する
text-justify･････････････均等割付の形式を指定する（IEが独自に採用）
vertical-align････････････縦方向の揃え位置を指定する
text-decoration･････････テキストの下線・上線・打ち消し線・点滅を指定する
text-underline-position･･下線の表示位置を指定する（IE独自の仕様）
text-indent･････････････一行目のインデント幅を指定する
text-transform･･････････テキストの大文字表示・小文字表示を指定する
white-space･････････････ソース中のスペース・タブ・改行の表示の仕方を指定する
letter-spacing･･･････････文字の間隔を指定する
word-spacing････････････単語の間隔を指定する
text-autospace･････････アルファベット等との間隔を指定する（IEが独自に採用）
line-break･･･････････････禁則処理のしかたを指定する（IEが独自に採用）
word-break･･････････････文の改行の仕方について指定する（IEが独自に採用）
word-wrap･･････････････単語の途中で改行するかどうかを指定する（IE独自の仕様）
text-shadow････････････テキストに影をつける

▲ページ先頭へ

トップページ > スタイルシートリファレンス > text-justify

トップページへ

HTMLタグ（目的別）	CSSプロパティ（目的別）	WEBカラー	WEB画像
HTMLタグ（ABC順）	CSSプロパティ（ABC順）	優良デザイン	特殊文字
HTML5	CSS3	JavaScript	執筆書籍の紹介
HTMLの基本	CSSの基本	About	サイトマップ

MuuMuu Domain!

HTMLクイックリファレンスについて