HTMLクイックリファレンス

トップページ HTMLタグ(ABC順) スタイルシート(ABC順) JavaScript(制作中)
WEBカラー HTMLタグ(目的別) スタイルシート(目的別) 優良デザイン 特殊文字
WEB画像 WEBの現場から インターネット用語 フリーイラスト素材 執筆書籍の紹介

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

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

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

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

text-justifyプロパティでは、どの値を用いるか迷うところですが、 日本語の長文にはinter-ideograph、英文にはnewspaperを用いるのが本来の使用目的にかなっているように思います。 また、改行した複数行の幅を揃えたい場合には、distribute-all-linesを用いるのが良いでしょう。

尚、text-justifyプロパティについては下記のページが参考になります。
http://msdn2.microsoft.com/en-us/library/ms531172(VS.85).aspx

■値

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

■使用例

HTMLソース

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

<p style="text-align: justify; text-justify: auto">
<b>autoの場合</b><br>
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。<br>
autoはブラウザに依存します。IE5やIE6では、半角スペースや全角スペースを調整して均等割付するようです。
</p>

<p style="text-align: justify; text-justify: distribute">
<b>distributeの場合</b><br>
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。<br>
distributeは単語間隔と文字間隔を調整して均等割付します。
</p>

<p style="text-align: justify; text-justify: distribute-all-lines">
<b>distribute-all-linesの場合</b><br>
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。<br>
distribute-all-linesは単語間隔と文字間隔を調整して均等割付します。途中の改行や最終行などの文字数が一行に満たない行も均等に割り付けます。
</p>

<p style="text-align: justify; text-justify: inter-cluster">
<b>inter-clusterの場合</b><br>
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。<br>
inter-clusterはアジアの言語などの単語間隔を持たない言語のテキストを均等割り付けします。
</p>

<p style="text-align: justify; text-justify: inter-ideograph">
<b>inter-ideographの場合</b><br>
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。<br>
inter-ideographは日本語・中国語・韓国語など表意文字のテキストの、単語間隔と文字間隔の両方を調整して均等割付します。
</p>

<p style="text-align: justify; text-justify: inter-word">
<b>inter-wordの場合</b><br>
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。<br>
inter-wordは単語間隔のみを調整して均等割付します。
</p>

<p style="text-align: justify; text-justify: kashida">
<b>kashidaの場合</b><br>
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。<br>
kashidaはアラビア文字のテキストの均等割り付けを意図しています。
</p>

<p style="text-align: justify; text-justify: newspaper">
<b>newspaperの場合</b><br>
Increases or decreases the spacing between letters and between words. It is the most sophisticated form of justification for Latin alphabets.<br>
newspaperは単語間隔と文字間隔を調整して均等割付します。英文などラテンアルファベットに最適な指定方法です。
</p>

</body>
</html>
↓↓↓

ブラウザ上の表示

autoの場合
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。
autoはブラウザに依存します。IE5やIE6では、半角スペースや全角スペースを調整して均等割付するようです。

distributeの場合
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。
distributeは単語間隔と文字間隔を調整して均等割付します。

distribute-all-linesの場合
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。
distribute-all-linesは単語間隔と文字間隔を調整して均等割付します。途中の改行や最終行などの文字数が一行に満たない行も均等に割り付けます。

inter-clusterの場合
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。
inter-clusterはアジアの言語などの単語間隔を持たない言語のテキストを均等割り付けします。

inter-ideographの場合
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。
inter-ideographは日本語・中国語・韓国語など表意文字のテキストの、単語間隔と文字間隔の両方を調整して均等割付します。

inter-wordの場合
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。
inter-wordは単語間隔のみを調整して均等割付します。

kashidaの場合
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定してください。
kashidaはアラビア文字のテキストの均等割り付けを意図しています。

newspaperの場合
Increases or decreases the spacing between letters and between words. It is the most sophisticated form of justification for Latin alphabets.
newspaperは単語間隔と文字間隔を調整して均等割付します。英文などラテンアルファベットに最適な指定方法です。


 

■関連項目

line-height・・・・・・・・・・・・・行の高さを指定する
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・・・・・・・・文字に影をつける
*印のついたものは、現在のところIEとNNでサポートされていないプロパティです。

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

HTMLクイックリファレンス

トップページ HTMLタグ(ABC順) スタイルシート(ABC順) JavaScript(制作中)
WEBカラー HTMLタグ(目的別) スタイルシート(目的別) 優良デザイン 特殊文字
WEB画像 WEBの現場から インターネット用語 フリーイラスト素材 執筆書籍の紹介
HTMLクイックリファレンスについて
©2008 HTMQ