« ZABADAK | Main | デフォルト02:クリスマス »

デフォルト01:エレガンス

 しばらく集中連載のかたちで、デフォルトのスタイルについて個別にまとめていくことにします。余裕があれば、自作スタイルシートを適用させる場合の注意点も追加していきたいと思っています。
 記事の関心はおもに「閲覧者が製作者の意図したようなデザインで読めるかどうか」にあります。そのため本文の色・サイズ、段組レイアウトの安定という2点がポイントになっています。
 記事中のカッコ内には、当該のスタイルclassもしくはid名を表示しました。自作スタイルを作成する際の参考にしてください。

 まずエレガンスから始めるとしましょう。

 エレガンスはIE6/5.x双方で3段カラムのページを閲覧することのできるスタイル(その1)です。
 手間をかけたくない人にはオススメです。

エレガンス3段の見え方
修正を加えなくとも、IE5.xで3段組として閲覧できる
 
 エレガンスは本文背景(#container)色が黒、本文が白、リンク色が白(下線付き)となっています。本文とリンクを区別するのは下線のみなので、これを消してしまうと閲覧者はリンクを探すことが難しくなります。
 本文記事が挿入されるスペース(#center)と左右のサイドバーのスペース(#left/#right)の長さはトータルで800、それぞれ200・400・200。デフォルトの状態ではサイドバーが吹き飛ぶことはないと思います。
 行間は本文・サイドバーでそれぞれ150%( .content p制御)・100%( .sidebar li制御)。なぜかこの「エレガンス」では、サイドバーテキストの行間(line-height)に余白がなく、指定されたfont familyではサイドバーのテキストの行間が詰まって見えてしまいます。リストにメモをつける場合はご注意ください。

エレガンスの解説図
左図はIE6、右図はIE5(推測)の見え方

 IE5でフォントが大きく表示されても、レイアウトがくずれるところまではいきません。むしろIE6でもIE5でもサイドバーの行間が詰まりすぎている方が問題かもしれません。この問題の原因についてすでに記したように、デフォルトのスタイル指定の不徹底にあるようです。
 エレガンスの本文フォント指定( .content p)は「Georgia, 'Times New Roman', serif」となっていますので、フォントの視認性は許容範囲内だと思われます。
 他の問題点としては、ページのヘッダ部分(#Banner)の縦幅を決定している要素が38pxと固定になっていますので、Mozillaなどのブラウザではタイトル・サブタイトルの下半分が隠れて見えなくなってしまう可能性があります。

 その他のエレガンスの特徴として、「タイトル・サブタイトルが中央寄せになっている」点が挙げられるかと思います。自作スタイルを適用せずにこの特徴を生かしても良いかもしれません。

|

« ZABADAK | Main | デフォルト02:クリスマス »