ZDNet Newsの例:論理レイアウトへの移行の手引き
サンプルとして用いているページの著作権は、そのページの著者にあります。ここでは各ページを、表を用いたレイアウトの規範として引用するものであり、著作権法 第32条にある引用の範囲を超えるものではありません。
2003年12月17日の状態を元に、CSSへの変換を試みます。
さてさて、今度はいかな具合でございましょうか。
2003年12月17日のZDNetNewsのレイアウト(123KB)
中央に主な記事を並べていて、その分左右のエリアが細分化されているようです。3ラインに統一されているので、CSSへの変換は比較的楽であると予想されます。しかし、カレンダー部分は、文字を大きくするとどうしてもはみ出してしまいます。文字サイズを「最大」にすると・・・そーら、はみ出した。CSSの難儀なところは、大きくすると表示位置が違ってきたり、どこかの上に乗っかってしまったりするところです。
さて、本題に入りましょうか。レイアウト自体はシンプルな3段の段組です。それ以上の説明は不要でしょう。
基本部分
まずは、骨格です。ちょっとだけ増やしましょう。
HTMLの基本部分
基本文字サイズは・・・またも1段階小さいようです。今回は、前回のスタイルシートに加えて、id="body"の基本スタイル、リンクの色、そして文字の基本サイズに対する小細工、リンク画像周りの線消しを含めます。というわけで、基本スタイルシートは以下。
CSSの基本部分
枠組みを配置する
それでは、本番行ってみましょうか。おお、イメージ・マップに最適なものが有るじゃありませんか。というわけで、まとめてイメージ・マップにします。ロゴが微妙な高さでバランスをとってありますので、文字部分の高さは固定します。
ロゴ周りの大見出しの作成
の、CSSファイル
次はメインとなる、3段組の部分です。全体をdivで囲みます。段組になっていない部分から片づけてしまいましょう。
段組エリアの直前まで作成
の、CSSファイル
お次はメインとなる段組ですが・・・右の列は置いておくとしても、左の列と真ん中の列のウェイトが微妙です。左の列を作る前に真ん中の列、右の列の先頭へのリンクを付けておくのがよいと思います。
というわけで、作り始めてみましょう。
段組始動!
の、CSSファイル
後は、中身を作っていくだけです！ どんどん作りましょう。
リストに見えるものはリストで!
の、CSSファイル
「互換性」として仕様がアバウトなままになっている、リスト・マーカーが意外なネックになっていることが明らかになってきました。display:markerが使えれば、これ以上強力な味方はないんですがねぇ・・・早くUAに対応してもらいたいです。
「最近の注目ニュース」では、マーカーをリンク対象として下線を引くことが出来ませんので、仕方なくロジカルな手法を用いています。
共通クラスはまとめていきます。そうしないと、この種のレイアウトでは、いくらでも無意味にスタイルシートが膨らんでいきます。カレンダー・テーブル部分は、頭の日曜日をわざとthとして微調整します。気になる人は、任意のクラスにしても良いでしょう。
しかし、HTMLはそれほど表現豊ではなく、間違った意味で使わなければならないケースも多く、divとspanプラスclassで表現しようとすると、とんでもないことになるということに留意してください。それらクラスを御しきれ、ソースが冗長になっても正しさを求めるのであれば、それを留め立てするものではありませんが。
では、仕上げにかかります。下部のグローバル・リンクと著作権表記です。まとめてやってしまいましょう。グローバル・リンクには、インラインのリストが使えそうですので、今回はそれに挑戦してみましょう。
インラインのリストを作る
の、CSSファイル
インラインなのに、マーカーが付いてます。これは、実は背景画像を使って小細工をしているのですよ。このように、画像のマーカーを持つ要素では、背景画像を使ってマーカーを代替し、微調整することが可能なのです。
というわけで、完成です! ぱっぱらぱっぱっぱ〜。
微調整
では、微調整・・・と、文字を拡大すると、ものすごいことになりますね。因みに、単位emでも同じような現象が起こります。可変長の文字サイズで上手に作用するものは、実はパーセントだけなのです。
InternetExplorer5.5では、左に寄ってしまうのは仕方がないとして、右エリアのトップ10リスト、表をちょっと修正したほうが良さそうです。また、フロートにパディングの指定が効かないようですので、マージンに変更します。
今度は、Netscape7.1で・・・おっとぉ、全面真っ青だ。顔も真っ青。げ、clear:allですって。癖でたまにやってしまうんですよね。
最後にOperaで確認。7.2では全く問題なし。って、ズームしたら背景が真っ黒くなります。黒なんてどこにも指定してないんですが・・・何故？？ 6でも同様のことが起こる模様。リンクの反応がヘンですが、それはこの際、良しとしましょう。テーブル部分を修正します。下の大分類リンクの背景が、何故か適用されませんが、支障はないので放置します。以上、
完了だっ
の、CSSファイル