スタイルシート変更

2008年11月3日(月) 16時28分 by level
B ?

今日11月3日でえむもじらは6周年の記念日を迎えました。それにあわせて、久しぶりにスタイルシートを更新しました。本当はまったく新しいデザインにもチャレンジしてみたいのですが、その気力もないので、マイナーな修正のみです。

これまで、ブラウザごとに微妙に位置がずれていたのと、サイドバーがはみ出してコンテンツにかぶさることがある問題の修正、それに少しだけ見栄えの改善です。

基本方針は以下のとおり:

  • html 上、サイドバーのコンテンツはメインコンテンツよりも後におく
  • フォントサイズの絶対指定はせずにブラウザのデフォルトに従う
  • サイドバーは左に置く。右に置いたほうがアクセスしやすそうだが、コンテンツ領域に大きな画像をおいてサイドバーに重なるのがいやなため(結構そういうサイトは見かける)。大きな画像は縮小すればよいのだが、見栄えのする縮小版を作るのは意外と面倒だし、その手間も馬鹿にならない。(ちなみに、代替スタイルシートで右サイドバーバージョンもある)
  • サイズの基準は em で指定する。
  • コンテンツエリアの幅は max-widthmin-width で指定する。横スクロールは避けたいが、全画面表示時にどーんと横いっぱいに広がるのも避けたいという希望の折衷案。
  • ブラウザ独自拡張は使用しない方針だが、CSS3 の機能を使用するために、ベンダープリフィックスつきのプロパティ(border-radiusbox-shadow)を使用。(ただし、最終的に box-shadow は不採用:後述)

ブラウザ間の互換性向上:em の指定方法の見直し

ボックスのサイズの指定を em で行うのは注意が必要です。em はその要素に指定されているフォントに依存したサイズで font-size などに依存します。問題は font-size はボックスごとに変わることがあるということで、そのため 1em という指定が、ボックスごとに変わりうるということになります(例えばデフォルトでは p と h1 に対する font-size は明らかに異なり、1em も異なる値を表します)。

例えばこれまではサイドバーに以下のような CSS を指定をしていました。

<div id="sidebar">
</div>
#sidebar{
 font-size : smaller;
 width     : 13em;
}

この場合、まず 100% のフォントサイズに対して、smaller による縮小フォントサイズが計算され、その縮小フォントサイズによってこのボックスの幅が決まります。ところが、おそらく smaller がどの程度のサイズになるかはブラウザ依存であるので(詳細は未確認)、ブラウザごとに 13em の値が異なってしまっていたようです。全体的な調整は Firefox を基準に行っていたので、他のブラウザではバランスが崩れてしまっていました。

これは、以下のように font-size% 指定にすれば回避できると思われますが、そもそも、ページ全体のレイアウトを決めるのに、80% に対する 13em100% に対する 50em などと指定するのは無理があります。同じ em で指定しても、実は単位系が異なっているわけですから。

#sidebar{
 font-size : 80%;
 width     : 13em;
}

そこで、サイドバーに対する html の構造を以下のように2重の div 構成に変更しました。

<div id="sidebar">
 <div id="sidebar-content">
 </div>
</div>

ここで、ページレイアウトに対する指定は外側の div で行い、コンテンツに対する指定は内側の div で行うようにします。

#sidebar{
 width     : 13em;
}
#sidebar-content{
 font-size : 80%;
}

#sidebar では font-size はデフォルトの 100% なので、em を指定しても他の部分と同じ単位系となります。

教訓:em でページレイアウトを指定する場合は font-size(と font-family なども含めて)を統一する。

はみだしたコンテンツの重なりを考慮

これまでは、はみ出したコンテンツの重なりを考慮していなかったので、デフォルトの後に出現したものが上に来るようになっていました。これを z-index を指定して明示的にメインコンテンツが上になるようにし、かつ、メインコンテンツの背景色を透過ではなく明示的に指定して裏側に回りこんだコンテンツを見えなくしました。

見た目の改善

今までのデザインを踏襲したうえで、見栄えを改善。

まず、上辺と左辺に 5px のえむもじらカラーの枠を設定し、サイト名を表示する h1 と合体。本当はぼかしを入れたかったのですがこれは後述の理由などにより断念。画像でやれば簡単なのでしょうが、あえて画像を使用せずに実施しました。

主要な見出し要素に text-shadow を設定しました。Firefox 3.1、Safari、Opera でのみ有効です。不思議なことに Google Chrometext-shadow をサポートしていません。

いろんな要素に border-radius で角丸を指定しました(参考)。Firefox、Safari、Chrome で有効。

上辺の外枠と、主要な見出し要素に box-shadow で影をつけてみましたが最終的には不採用としました。一番問題だったのは、幅が100%の要素(厳密に言うとウィンドウ右端いっぱいまで描画される要素)に box-shadow を適用すると必ず横スクロールバーが表示されてしまうことです。これはウィンドウサイズを変更しても変わりません。おそらく、影を描画するために要素の幅を広げる必要があるのでしょう。 box-shadow の仕様に問題があるのか、ブラウザの実装に問題があるのかわかりませんが、Firefox 3.1 と Safari で同じ現象が確認できました。

もともと、小さめのウィンドウでも横スクロールが出ないように、max-widthmin-width で調整しているのに、常時横スクロールバーが出るのは致命的です。

その他、サイドバーの構成や、各種要素に対するスタイルシートを微調整しました。

各ブラウザでの表示

各ブラウザでのスクリーンショット。いずれもメイリオの 14px を設定しているので横サイズはぴったり合っていますが、IE7 だけはフォントサイズの細かい指定ができないのでずれています。

Firefox 3.1(trunk)
Firefox 3.1
Firefox 3.0

text-shadow だけ効いていません。

Firefox 3.0
Safari

問題なし。

Safari
Google Chrome

なぜか text-shadow が効いていません。また、テストページを表示させると、border のある要素に border-radiusbox-shadow を同時指定するとおかしくなります(ヘッダ5の後半)。

Google Chrome
Opera

border-radius に未対応。

Opera
IE7

一番できは悪いが許容範囲。

IE7
目指していたもの

これが当初目指していたものの途中結果。代替スタイルシートの「えむもじら(box-shadow)」相当です。スタイルシートを切り替えた瞬間に横クロールバーが出るのが確認できます。(現在のデザインで横クロールバーの直接の原因となるのは上辺の枠+ぼかしですが、これの対策を行うと、次はウィンドウ幅を狭めたときの見出しの h1 要素がひっかかってきます。margin-right などでぼかしのための隙間を作っておけばよさそうですが、、、)

ちなみに、現状では左辺の枠は html の border-left で描いているのでここの右側にぼかしを入れるのは無理です。

Firefox 3.1

コメント (2)

1 11/03 19:25 ATO
(c1) [2008/11/03 19:25:54] by ATO

大分見易くなりました。すばらしい。

2 11/06 17:34 フォント
(c2) [2008/11/06 17:34:34] by フォント

XP+IE7でメイリオ以外(MSゴシック MS明朝 MSPゴシック MSP明朝 MSUIGothic)だと
タイトルバックと上辺5pxとの間に1pxの隙間が空きますね。

トラックバック

トラックバックは検索対象外です。