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

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

text-justify・・・均等割付の形式を指定する(IEがCSS3の草案を先行採用)
Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9

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.

私には夢がある。私の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.

私には夢がある。私の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.

私には夢がある。私の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を指定

私には夢がある。私の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.

私には夢がある。私の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.

私には夢がある。私の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.

私には夢がある。私の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.

左から 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
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ