TOP ＞ スタイルシートで文字をデザイン ＞ 均等割り付けを使用する（IEのみ）
均等割り付けを使用する（IEのみ）
行のそろえ方を指定するで紹介したとおり、 『text-align』 プロパティにjustifyを指定した場合には均等割付の設定になります。 均等割付はCSSレベル3で採用予定の機能で、InternetExplorerのみが先行対応してます。実際、 ワープロなどでは重宝する均等割り付けですが、Webページでは使いづらいかもしれません。
しかし、『text-align』 プロパティにjustifyを指定しただけでは均等割り付けにはなりません。『text-justify』というプロパティをあわせて指定しなければなりません。 このプロパティにキーワードを指定することでいろいろな割付方法が実現されます。 キーワードと均等割付の方法は以下の表のように対応しています。
| キーワード | 均等割付の方法 |
| auto | Webブラウザに依存 |
| distribute | 単語間・文字間を調整して均等に |
| distribute-all-lines | 文字数が一行に満たなくても調整のうえ均等に |
| inter-word | 単語間を広げて均等に |
| inter-ideograph | 日本語や中国語の文字間だけ均等割付する |
| inter-cluster | 東南アジア言語向け均等割付 |
| kashuda | アラビア語向け均等割付 |
| newspaper | 英語等に適した均等割付 単語間・文字間を調整して均等に |
均等割り付けを使用する（IEのみ）
【書き方】
text-justify : キーワード;
"均等割り付けを使用する（IEのみ）"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 .c1{width: 400px; text-justify:auto; background-color: #99ff99;} .c2{width: 400px; text-align: justify; text-justify:distribute; background-color: #ff99ff;} .c3{width: 400px; text-align: justify; text-justify:distribute-all-lines; background-color: #9999ff;} .c4{width: 400px; text-align: justify; text-justify:inter-ideograph; background-color: #ffff99;} .c5{width: 400px; text-align: justify; text-justify:inter-word; background-color: #ff9999;} .c6{width: 400px; text-align: justify; text-justify:newspaper; background-color: #999999;} 【HTML本文】 <html> <head> <title>均等割り付けを使用する（IEのみ）のサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/218.css" type="text/css"> </head> <body bgcolor="silver"> <p>InternetExplorerのみですが文字を均等割付をすることが出来ます。</p> <p class="c1">キーワード:auto<br />日本語はこんなふうになります。 Abc Defghi JklmnopQrstuvWxyz1234567890</p> <p class="c2">キーワード:distribute<br />日本語はこんなふうになります。 Abc Defghi JklmnopQrstuvWxyz1234567890</p> <p class="c3">キーワード:distribute-all-lines<br />日本語はこんなふうになります。 Abc Defghi JklmnopQrstuvWxyz1234567890</p> <p class="c4">キーワード:inter-ideograph<br />日本語はこんなふうになります。 Abc Defghi JklmnopQrstuvWxyz1234567890</p> <p class="c5">キーワード:inter-word<br />日本語はこんなふうになります。 Abc Defghi JklmnopQrstuvWxyz1234567890</p> <p class="c6">キーワード:newspaper<br />日本語はこんなふうになります。 Abc Defghi JklmnopQrstuvWxyz1234567890</p> </body> </html> |
[
スタイルシートで文字をデザイン ]
