CSSで文章の改行位置を揃える(均等割付を指定する)

ICT(Information and Communication Technology)とは、情報・通信に関連する技術一般の総称である。従来用いられてきた「IT」とほぼ同様の意味で用いられるもので、「IT」に替わる表現として日本でも定着しつつある。ITの「情報」に加えて「コミュニケーション」(共同)性が具体的に表現されている点に特徴がある。ネットワーク通信による情報・知識の共有が念頭に置かれた表現であるといえる。

上記の文章の様に改行位置が揃っていなくて、読みづらかったり見栄えが悪かったりすることがありますよね。このスタイルシートを使えば改行位置を揃えて綺麗な文章にすることができます。

改行位置を揃える(均等割付をする)CSS

Firefox、Safari、Opera、Chromeなどのブラウザ用のCSSとIE6~8用のCSSを指定するだけです。text-justifyはCSS3の草案で出されたプロパティですが、IEが先行実装しているもので、text-align:justifyを指定した上で、text-justifyプロパティを指定しないと実際に均等割付にならないようです。日本語の長文にはinter-ideograph、英文にはnewspaperを用いるのがいいみたいです。

 
p {
    text-align: justify; /* for modern browser */
    text-justify: inter-ideograph; /* IE6~8 */
}
 

サンプル

ICT(Information and Communication Technology)とは、情報・通信に関連する技術一般の総称である。従来用いられてきた「IT」とほぼ同様の意味で用いられるもので、「IT」に替わる表現として日本でも定着しつつある。ITの「情報」に加えて「コミュニケーション」(共同)性が具体的に表現されている点に特徴がある。ネットワーク通信による情報・知識の共有が念頭に置かれた表現であるといえる。

追記
ただし、レイアウト的には綺麗でも、ユーザーによっては読みづらい文章になりうるので、十分考慮して使うのが良いと思います。

TRACKBACK URL トラックバック用URL

1
中3 と Biglobe そして ジャストシステム:気になるニュースクリップ。世間は騒がしいですが、自身の胸のうちは ・・・ 【気になるニュースクリップ】
 気になるニュースクリップ。
 引き続き・・・
◆第5回 Rubyを最大63%高速化した中学生は超多忙!
 ( by @IT自分戦略研究所 )
 ・筑波大学
創るmetaboy on 2009/10/29 10:09:00

COMMENT LIST

POST YOUR COMMENT

送信内容
vericode

おすすめCSSサイト

あわせて読みたいブログパーツ

TopPageへ

更新情報RSSアイコン

閉じる