トップページ  > CSS3  > text-justify

★CSS3リファレンス

text-justify …… 行端揃えの形式を選択する
Internet Explorer5Internet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9

text-justifyプロパティは、text-alignプロパティの値にjustifyを指定した際の、行端揃えの形式を選択する際に使用します。

■値

auto
ユーザーエージェントは、パフォーマンスとプレゼンテーション品質のバランスをとって行端揃えのアルゴリズムを決定する(初期値)
inter-word
主に単語区切りスペースの間隔を変更して行端揃えをする
inter-ideograph
主に単語の区切りスペース、および、単語区切りスペースが無い文では 書記素(言語を記述する際の文字・数字・記号などの基本単位)の境界の間隔を変更して行端揃えをする
inter-cluster
主に単語の区切りスペース、および、 タイ語・ラオ語・クメール語・ミャンマー語などのクラスタスクリプトにおける 書記クラスタ(単語間にスペースは無いが個別単位を形成する部分)の境界の間隔を変更して行端揃えをする
distribute
主に単語の区切りスペースと、 デーヴァナーガリー・ベンガル文字・グルムキー文字・アラビア文字などでの記述を除くすべてのスクリプトにおける 書記クラスタの境界、その両方の間隔を変更して行端揃えをする
kashida
主にカシダや他の筆記体を引き伸ばしたものを使用することで、アラビア語などのスクリプトを引き伸ばして行端揃えをする
tibetan
(メモ:この値は次回の草案では削除される可能性が高いそうです)

■適用対象・値の継承・初期値

初期値
auto
適用対象
すべての要素
値の継承
する

■使用例

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

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

div.sample0 {clear:both;}

HTMLソース

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

<div class="sample0">左から auto、inter-word、inter-ideograph、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、inter-word、inter-ideograph、inter-clusterを指定</div>
<div class="sample0">左から distribute、kashida、tibetanを指定</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>

<div class="sample0">左から distribute、kashida、tibetanを指定</div>

</body>
</html>
↓↓↓

ブラウザ上の表示

左から auto、inter-word、inter-ideograph、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、inter-word、inter-ideograph、inter-clusterを指定
左から distribute、kashida、tibetanを指定

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

左から distribute、kashida、tibetanを指定
▲ページ先頭へ
トップページ  > CSS3  > text-justify
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ