テキストの両端を均等にそろえるCSS

CSS2008年3月21日

WEBデザインの原則「整列」「グリッドレイアウト」でも述べましたが、Webサイトを制作する際、文字画像にしろテキストにしろ、両端をきれいにそろえておくのはとても大切なことです。
画像はしっかりそろえているのに、肝心のテキストがそろっていなければせっかくのいいデザインも それだけで台無しになってしまいます。
IEで多くのサイトを見ると、意外とこういったところを見落としているサイトを多く見かけます。ところが、実はこの問題は2行のCSSを追加するだけで簡単に解決することができます。

bodyでもwrapperでもどこでもいいので、下記のCSSを記述しましょう。

text-align:justify;
text-justify: inter-ideograph;

• font-familyの指定
• デフォルトで記述しておくと便利なCSS(スタイルシート)

この記事を読んでいる方にオススメの記事

• CSSCSS3でborder（ボーダー）のグラデーションを実現
• CSSIE8における拡大縮小バグ
• CSS角丸背景を画像1枚で実装
• CSSfloatさせた要素を簡単にfloat解除させる「clearFix」
• CSSレスポンシブWebデザインについて
• CSS設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」

「CSS」の他の記事を読む

• ※承認制のため、即時には反映されません。