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

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

管理人:sofu

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の「情報」に加えて「コミュニケーション」(共同)性が具体的に表現されている点に特徴がある。ネットワーク通信による情報・知識の共有が念頭に置かれた表現であるといえる。

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

blog comments powered by Disqus

PageTop