均等割付でテキストの両端を揃える

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

CSSテクニック一覧
テクニック別リンク

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

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;
}

お薦めの参考書

CSS、webデザイン学習書籍、参考書をアマゾンで購入する

[an error occurred while processing this directive]
このサイトについて

初めまして。そして、ようこそ！京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。

イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。

CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。

（このサイトについて何がありましたら左記のアドレスからご連絡をお願いします）
サイトマップ
- Top　－　acky.infoの表紙のページ
- Create　－　イラストレーションギャラリー
  - モータースポーツイラストレーション　－　F1や車をテーマにしたイラスト
  - ヒューマンイラストレーション　－　人をテーマにしたイラスト
- tips　－　web制作で役立つ技や豆知識を紹介しています
  - CSSテクニック　－　ちょっとした時に役に立つcssや、基本的な事など
  - webの小技　－　知っているとちょっと良くなる、そんな小技
- link
- imode