web関係、制作関係でのよしなしごとを書いています。
2007/12/27 初稿
何も指定していない場合のテキストは左端は揃いますが右端は綺麗に揃いません。
これを均等割付で綺麗に揃えるためには以下のコードを記述します。
p{
text-align:justify;
text-justify:inter-ideograph;
}
text-alignは文字の表示位置をコントロールするプロパティです。通常はcenterと指定して中央寄せなどに使用しますが均等割付にするためには両端揃えのjustifyと指定します。Firefoxではこれで均等割付ができます。
text-justifyはtext-align:justify;の時の均等割付の形式を指定するプロパティです。これを単語間隔と文字間隔を自動調整するため日本語に最適とされるinter-ideographと指定します。
CSS3に実装予定のプロパティですがIEには先行実装されています。この二つを指定しないとIEでは均等割付ができません。
こちらもCSS3に実装予定でIEに先行実装のプロパティですが禁則処理のプロパティline-breakをstrictと指定すると禁則処理をしてくれます。
上記の均等割付と併せて禁則処理も指定しておくよ良いでしょう。
なお、Firefoxでは標準仕様で禁則処理に対応しています。
p{
line-break: strict;
}
初めまして。そして、ようこそ!京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。
イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。
CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)