« 国産万年筆 / 三社の細字の特徴と違い | トップページ | 「AURORA オプティマ」のレビュー »

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

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


◆導入の経緯

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

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

217

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

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


◆問題点

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

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


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

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

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


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

|

« 国産万年筆 / 三社の細字の特徴と違い | トップページ | 「AURORA オプティマ」のレビュー »

日記・その他」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/515552/42332525

この記事へのトラックバック一覧です: max-widthで、横幅の上限を設定:

« 国産万年筆 / 三社の細字の特徴と違い | トップページ | 「AURORA オプティマ」のレビュー »