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!のトップページです。
※備考
現状の表示方法に関して、問題がある、あるいはこうして欲しい、といった意見のある方は、コメント欄でコメント願います。
| 固定リンク
「日記・その他」カテゴリの記事
- TS-XW Racer Sparco P310 Competition Mod を購入(2017.12.31)
- SSDを増設し、Windows10を導入した(2015.12.27)
- Kobo Aura H2O を購入した(2014.12.31)
- 「ゴールドブレンド 挽き豆包み」を購入した(2013.12.07)
- 村田園の万能茶が最近のお気に入り(2013.11.27)
コメント