MYCOM PC WEBの例:論理レイアウトへの移行の手引き

サンプルとして用いているページの著作権は、そのページの著者にあります。ここでは各ページを、表を用いたレイアウトの規範として引用するものであり、著作権法 第32条にある引用の範囲を超えるものではありません。

2003年12月27日の状態を元に、CSSへの変換を試みます。どれどれ。
2003年12月27日のMYCOM PC WEBトップページ凝縮版(64.4KB)
なるほど。ZDNetNewsと似た、3段の段組です。今回は、その構成のアバウトさから見て、3つの中では最も簡単な構成になりそうです。

基本部分

HTMLの基本部分は同じなので飛ばします。CSSの基本部分を少し換えます。んで、リンクの色は、:linkが#2350ab、:visitedが#505050、:activeが#f90と。珍しく、基本リンクの色が微妙に凝った数値です。
最初から小細工100%

枠組みを配置する

では、構成を見ていくことにしましょう。うーむ、今度は頭に「PC WEB」の文字が見あたりません。隠しでh1として置いておくことにしましょう。フラットでリニア(笑)なHTMLには、こういったテクニックも所々で必要になります。
簡単そうな、広告の手前までやってしまいましょう。
隠しh1があるよ
の、CSSファイル
「MYCOM」ロゴ画像をわざわざ最初に置いて、それを右にフロートしている点に注目してください。直線的に見た場合、こうでないとおかしいのです。
検索ボックスは、位置が微妙なので、右からずらす方法を採りました。背景画像の色が白と大きく異なりますので、背景色の指定も忘れないように!　背景画像に合わせて、ボックスの高さを固定してしまいます。Windows版InternetExplorerでは属性セレクタが使えないので、各部品にクラスを指定してスタイルを指定しています。

次は、少しばかりややこしいエリアです。とにかく広告を先に見て欲しい、という意図が伺えます。しかし・・・そのようなレイアウトが可能なのでしょうか。広告は左上部分、左下部分、「NEWS HEADLINE」見出し部分を含む1行テキスト広告の3パートに分割出来ます。やってみましょう。
広告ボックスで四苦八苦
の、CSSファイル
ふぅー、大体こんなものでしょう。ポイントと言えるのは、左下の広告の画像をブロック化している点くらいです。
難しいのはここからです。右の大きな目次を抜けた後、左側の特集へ抜け、その後中央へ、それが終わったらまた右のエリアへ戻る必要があります。何が難しいのかと言いますと、それぞれのボックスがフロートしながら上のボックスに侵入しなければならない点です。「上のマージンを負にすればいい」？　残念ながら、仕様上フロートはコンテナ・ブロックからはみ出すことは出来ません。ここでは、少しばかりややこしいテクニックを使用します。それは後回しにするとして、
まず右のボックスを作る
の、CSSファイル
::last-childはまだ使えないので、classで対応します。後回しにしていた段組みに取りかかるとしましょう。最初の記事のみを使います。
格段の最初の記事を使って段組み!
の、CSSファイル
おーー、出来ましたー。ブラボー。それでは、どのような手法を使ったのか、ちょっと解説してみます。
スタイルシートを見てみましょう。おや？　3エリアを取り囲むボックスに、全く移動しないのにposition:relative;があります。なんでしょう、不思議ですね。
次に、左のボックスです。上に負のマージンを使って、右の線を上のボックスのものにくっつけます。あれ？　また全く場所指定しないposition:absolute;が登場します。position:absolute;は、全く場所指定しないと、もとの位置のままなのです。それでいて、それ以降のボックスは、そのボックスが存在しないかのように振る舞うという作用のみを抽出することが可能なのです。もちろんのこと、幅指定は必須ですので、お忘れ無きように。
真ん中のボックスは、単純に相対位置指定しているだけです。何故わざわざtopとパディングで調整しているのかというと、文字を大きくした時に重ならないようにする為です。
「たとえどんなに離れていようとも、キミに対する愛は変わらないよ」「アナタ・・」ひしっ
・・・おあとが宜しいようで。
では、右のボックスです。position:absolute;でtop:-145px;？　「ちょっと待ってよ。はみ出してしまうじゃないのよサ」という、そこのあなたに説明してあげましょう(エラそう)。さっき、ちらりと無意味そうなposition:relative;が見えましたね。それが効果を発揮するのが、正にここなのです。祖先の要素の中で'position'の値が[static]以外の要素がある場合、そのうち最も近い要素を基準のボックス(コンテナブロック)とするのです。後続するブロックへの影響如何で、[relative]、[absolute]を使い分けます。詳しくは、リファレンス>関連記事>コンテナブロックをご覧ください。このブロックでも、愛の寸劇(笑)を実演します。
何故真ん中のブロックと右のブロックで'position'を使い分けたのかは、宿題にしておきましょうか。ヒント。幸い、このページでは、後続するブロックがありませんので、実際には右端のラインがなければ使い分ける必要はありません。

山は越えました。あとはドンドンがつがつタイプしていくだけです。
ドンドンがつがつドンドン
の、CSSファイル
完成！　と思いきや、んのぐぁーー、背景画像が出たり出なかったり、ボーダーが出たり出なかったり。謎UAの本領発揮といったところですか。

微調整

まず、Netscape。7.1から。ぜんぜん駄目。珍しいです。ここに来て、実はdtを特殊なブロックとして処理しているらしいことが分かります。6は大丈夫そうです。7になった時の仕様変更で何かあったようです。しかし、私はNetscape6の為のハックを知りません。
どうも上方向への相対配置に不備があるようです。入れ物は移動していますが、中身がそれに伴っていない、といった反応です。リンクが機能しなくなるから、質が悪い。しかしリンクが機能しないではいけません。・・結果、すごく無様な格好になってしまいました。

で、次、Opera7.2で、と。うわぁっ、何故かNetscapeとまったく同じ現象が・・・まさかと思って、仕様書を読み直す。絶対配置も、相対配置も、コンテナ・ブロックからはみ出してはいけないなんて事は、一言も書いてありません。Windows版InternetExplorerのみが正しい解釈をする、希有な例、ということになります。仕方がないので、Netscape同様の小細工を施します。
Opera6では・・・LIの解釈に問題があるものの、7よりもまともに解釈されています。これだから、Opera7は、実はGeckoをベースにしてるんじゃないかと思ってしまう。

というわけで、完成版です。
未完成
の、CSSファイル
なんとも面白くない終わり方です。

今回は、意味を重視した順序でレイアウトしました。順番を考慮しないのであれば、物理レイアウトと五十歩百歩、だからです。論理レイアウトというのは、スタイルシートがあってもなくても、どのUAでも読むのに支障のないレイアウトということだと思います。それはつまり、(テーブル部分を除いて)直線的、一次元的な記述をするということで、HTML単体で見るならば、記事の前後関係に帰着するわけです。最も、順番がめちゃくちゃでやたら横に伸びるテーブル・レイアウトよりは、ずっとましだとは思いますが。利便性を考えるのであれば、例えば段組の場合は、今までになんどか述べてきましたとおり、各段へのリンクを置いておくのも良いでしょう。