max-widthで、横幅の上限を設定

　先日から、CSSに max-width:40em の指定を入れて、横幅が40em以上に広がらないように設定しました。
　これで、本文部分は最大でも35文字前後で改行されるようになりました。

◆導入の経緯

　私のブログでは、リキッドレイアウトを採用していますから、ブラウザの横幅を広げれば、それに沿ってどこまでも記事の幅が広がっていきます。私のパソコン環境は1280x1024の解像度です。その環境で文字サイズを最大にし、ブラウザを最大化した状態で閲覧したときを基準に、デザインや段落分け、改行などを行ってきました。（※個人的に、小さな字は読みにくくて。）

　しかし、先日友人のパソコンで私のブログを見たとき、やたら横幅が広くなって、記事の文章が読みにくいことに気がつきました。友人のパソコンは、ワイドディスプレイで、1680x1050なのです。横幅が広い環境では、利用者もブラウザを最大化していなかったり、ブックマークバーを横に表示していたりするかもしれません。しかし、もし最大化している人がいれば、私のブログは読みにくいわけです。

　ということで、対策として、ブラウザの横幅の上限を40emに設定しました。

　本当のところは、可読性を考えると、もっと横幅を絞った方が良いのかもしれません。ただ、私自身の好みとして、広い画面が好きなので、とりあえずは40emでいきたいと思います。

◆問題点

　ただしこれには一つ問題があって、CSSのmax-widthプロパティは、MS-IE6ではサポートしていないんですよね。MS-IE7やFirefoxなどではサポートされているのですが。うちのブログの統計では、まだ35%の人がMS-IE6なんですよね。

　その対策としては、Javascriptを利用してブログの横幅を設定する、という手もあります。ただ、カテゴリの目次ページを生成するためにすでにJavascriptを使っている現状では、これ以上Javascriptを使うのは、ページの表示が重くなりますから、あまり気が進みません。ですので、MS-IE6を使っていてワイドディスプレイの方は、当ブログを閲覧するときは、適宜好みに応じて表示幅を狭めるなどするよう、お願いします。

◆エラスティック・レイアウト

　表示幅の指定をemで指定しているので、一応、本文部分はエラスティック・レイアウトになってます。ブラウザの文字サイズを変えれば、それに従って記事部分のサイズも変わります。しかし、サイドバーの部分はpx指定の固定幅です。サイドバーの部分もエラスティック・レイアウトにしようかと検討中です。

　全体がエラスティック・レイアウトになっているサイトの一例は、Yahoo!のトップページです。

　※備考
　現状の表示方法に関して、問題がある、あるいはこうして欲しい、といった意見のある方は、コメント欄でコメント願います。