text-justify: ***;
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 | (アラビア語向け) IE 5.5以上 |
※表意文字 … 日本語や中国語などの文字
※このプロパティは、CSS 2では定義されていません。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p {
width: 40%;
border: 1px #808080 solid;
text-align: justify;
}
p.example1 { text-justify: auto; }
p.example2 { text-justify: distribute; }
p.example3 { text-justify: distribute-all-lines; }
p.example4 { text-justify: inter-word; }
p.example5 { text-justify: inter-cluster; }
p.example6 { text-justify: inter-ideograph; }
p.example7 { text-justify: newspaper; }
p.example8 { text-justify: kashida; }
</style>
</head>
<body>
<p class="example1">(1)auto<br>日本語と英語の表示例です。...</p>
<p class="example2">(2)distribute<br>日本語と英語の表示例です。...</p>
<p class="example3">(3)distribute-all-lines<br>日本語と英語の表示例です。...</p>
<p class="example4">(4)inter-word<br>日本語と英語の表示例です。...</p>
<p class="example5">(5)inter-cluster<br>日本語と英語の表示例です。...</p>
<p class="example6">(6)inter-ideograph<br>日本語と英語の表示例です。...</p>
<p class="example7">(7)newspaper<br>日本語と英語の表示例です。...</p>
<p class="example8">(8)kashida<br>日本語と英語の表示例です。...</p>
</body>
</html>
表示例
(1)auto
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.
(2)distribute
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.
(3)distribute-all-lines
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.
(4)inter-word
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.
(5)inter-cluster
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.
(6)inter-ideograph
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.
(7)newspaper
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.
(8)kashida
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.
- サイト内検索