論理レイアウトへの移行の手引き:＠ITの例-後編
サンプルとして用いているページの著作権は、そのページの著者にあります。ここでは各ページを、表を用いたレイアウトの規範として引用するものであり、著作権法 第32条にある引用の範囲を超えるものではありません。
CSSが2KBを超えてきました。そろそぉろ、ややこしくなって来る頃です。
どうしましょうか。@importなどで分割するのも良さそうです。管理がややこしくなりそうだったら、適当に分割していきましょう。
ああ、でも、分割しすぎないように。怪速UAであるWindows版InternetExplorerは、少し@importが増えただけで、何故か負担がものすんごく増えるからです。リンクされているCSSファイルから、多くて2つまで。それ以上はやめておいたほうが良いかもです。
ここでは、ファイル数の増加を抑える為に、1ファイルで通します。
お次は検索ボックス、と思いきや・・・ちょっと待ってください。「−新着記事 − 12月17日 IT用語・記事検索
」とあります。そうです、検索ボックスと次の見出しとが同居しているのです。さぁ困った。
順番的には、検索ボックスを先に置いて、次に新着記事の見出しです。というか、記事の配置上、それ以外はあり得ないわけですが。これでは、floatでは(バグのせいで)ほとんどのブラウザでうまくいきそうにありません。そこで、負のマージンのご登場です。検索ボックスの下のマージンを、見出しエリアに十分入り込むまで小さくします。しかし、見出しには帯が付いており、検索ボックスに負のマージンを与えると、見出しの下に潜り込んでしまいます。ここは、position: relativeとz-indexで回避します。他のエリアには全く影響を与えずにz-indexの値だけを増加させ、順番を変えるのです。
検索ボックスと新着見出しの配置
の、CSSファイル
次に、各テーマへのリンク、最も幅をきかせているエリアに踏み入れます。前回の反省を生かし、あらかじめ左フロートボックス、右フロートボックスに分割しておきます。
詳細記事ボックスの大枠を構成
の、CSSファイル
まず、「新着記事」ですが、リンクとその説明で構成されています。と来れば、適役は一人しかいません。定義語リスト、つまりdlです。「意味が違うぞゴルァ」なんて声は聞こえませーん。「FYI」も同様の構成になっていますので、同じノリで行きましょう！
「新着記事」と「FYI」をスタイルする
の、CSSファイル
むぅ・・・どうやらWindows版InternetExplorerには、floatの下に何かが無いと、内容が表示されないことがあるようです。「new!」や矢印には、是非とも:beforeを使用したいところですが、InternetExplorerがまっったく対応していません・・ InternetExplorerの次期バージョンでは、対応していることを切に望みます。
さて、左の段は終わりました。次は右の段を作りましょう。こちらは簡単です。
右の段を構成する
の、CSSファイル
記事イメージは、本当はimg:first-childとしておいたほうが良いのですが、Windows版InternetExplorerがしばしば無視してしまう為、敢えて避けています。
次は「ハイブックス」です。横幅が固定されていなければとても面倒な事に巻き込まれるところですが、幸い固定幅ですので、これを生かして、固定幅の本のエリアを3つ作って、すべて左にフロートさせます。
「ハイブックス」エリアを作る
の、CSSファイル
仕上げに、リンク集です。これは簡単です。芸を効かせてリストに変換したいところですが、:beforeが以下省略な事情によりまして。
ふぅー、ひとまず完成です。ご苦労様、自分。
微調整
さてさて、それではWindows版InternetExplorer6.0以外で確認してみましょうか。Windows版InternetExplorer5.5では問題なし。5.0は、やはり対応出来ませんね。でも、閲覧に支障のあるレベルではありません。Netscape7.1で微調整。さてと、次はOperaで・・・ほっほぅ、6.xでも意外と見られる表示になっているではございませんか。一方、7.2での表示がダメですねー。それでは、ちょいと細工をしましょうか。
実はこのレイアウトは、本当にUAがCSS2に準拠しているなら、全く異なる表示になります。それに対応する為には、更に面倒な小細工が必要となります。そして現在、それをきちんと解釈出来るUAはおそらくありませんし、あったとしてもとても無理のあるCSSを書くことになるでしょう。