[新着] Webテンプレートを仮オープンしました
text-justify は、均等割付の形式を指定するプロパティです。
このプロパティを指定する場合は、同時に text-align プロパティで justify を指定しておく必要があります。
p {
text-align: justify;
text-justify: distribute-all-lines;
}
| text-justify | auto … （自動）デフォルト |
|---|---|
| distribute … （単語間隔と文字間隔を調整｜タイ語などのアジア言語向け） | |
| distribute-all-lines … （途中改行や最終行も調整｜表意文字向け） | |
| inter-word … （単語間のみによる調整） | |
| inter-cluster … （単語間隔を持たない言語向け｜アジア言語向け） | |
| inter-ideograph … （単語間隔と文字間隔を調整｜表意文字向け） | |
| newspaper … （単語間隔と文字間隔を調整｜英文に最適） | |
| kashida … （アラビア語向け）IE5.5〜 |
※表意文字（意味を表している文字） … 日本語、中国語、韓国語など
【均等割付について】
文字間隔を自動的に調整し、均等な割り付けを行います。
■text-align: justify のみを指定した場合
日本語 … 効果は見られませんでした。
英語 … 単語間隔の調整が行われます。
■text-align: justify + text-justify: 〜 を指定した場合
日本語 … 文字間隔の調整が行われます。
英語 … 単語間隔と文字間隔の調整が行われます。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p {
width: 50%;
border: 1px #c0c0c0 solid;
text-align: justify;
}
#example1 { text-justify: auto; }
#example2 { text-justify: distribute; }
#example3 { text-justify: distribute-all-lines; }
#example4 { text-justify: inter-word; }
#example5 { text-justify: inter-cluster; }
#example6 { text-justify: inter-ideograph; }
#example7 { text-justify: newspaper; }
#example8 { text-justify: kashida; }
-->
</style>
</head>
<body>
<p id="example1">■auto<br>日本語と英語の表示テスト ...</p>
<p id="example2">■distribute<br>日本語と英語の表示テスト ...</p>
<p id="example3">■distribute-all-lines<br>日本語と英語の表示テスト ...</p>
<p id="example4">■inter-word<br>日本語と英語の表示テスト ...</p>
<p id="example5">■inter-cluster<br>日本語と英語の表示テスト ...</p>
<p id="example6">■inter-ideograph<br>日本語と英語の表示テスト ...</p>
<p id="example7">■newspaper<br>日本語と英語の表示テスト ...</p>
<p id="example8">■kashida<br>日本語と英語の表示テスト ...</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
■auto
日本語と英語の表示テストです。ブラウザの幅を動かすと、違いが分かりやすいです。
It is the display test of Japanese and English. When moving the width of the browser, the difference is easy-to-understand.
■distribute
日本語と英語の表示テストです。ブラウザの幅を動かすと、違いが分かりやすいです。
It is the display test of Japanese and English. When moving the width of the browser, the difference is easy-to-understand.
■distribute-all-lines
日本語と英語の表示テストです。ブラウザの幅を動かすと、違いが分かりやすいです。
It is the display test of Japanese and English. When moving the width of the browser, the difference is easy-to-understand.
■inter-word
日本語と英語の表示テストです。ブラウザの幅を動かすと、違いが分かりやすいです。
It is the display test of Japanese and English. When moving the width of the browser, the difference is easy-to-understand.
■inter-cluster
日本語と英語の表示テストです。ブラウザの幅を動かすと、違いが分かりやすいです。
It is the display test of Japanese and English. When moving the width of the browser, the difference is easy-to-understand.
■inter-ideograph
日本語と英語の表示テストです。ブラウザの幅を動かすと、違いが分かりやすいです。
It is the display test of Japanese and English. When moving the width of the browser, the difference is easy-to-understand.
■newspaper
日本語と英語の表示テストです。ブラウザの幅を動かすと、違いが分かりやすいです。
It is the display test of Japanese and English. When moving the width of the browser, the difference is easy-to-understand.
■kashida
日本語と英語の表示テストです。ブラウザの幅を動かすと、違いが分かりやすいです。
It is the display test of Japanese and English. When moving the width of the browser, the difference is easy-to-understand.
