論理レイアウトへの移行の手引き:＠ITの例-前編
サンプルとして用いているページの著作権は、そのページの著者にあります。ここでは各ページを、表を用いたレイアウトの規範として引用するものであり、著作権法 第32条にある引用の範囲を超えるものではありません。
2003年12月17日の状態を元に、CSSへの変換を試みます。元となるレイアウトは、以下のものです。
2003年12月17日の＠ITのレイアウト(57.6KB)
「ひぃぃ〜〜〜っ！！」、モニタ越しに悲鳴が聞こえてきそうです。大丈夫。実は基本は大して難しくないのです。それさえきちんとマスターすれば、大体のレイアウトは実現できます。手順は、大きく以下の通りです。
- 基本文字サイズを調べる
- 大きな枠組みを四角で囲む(必要に応じてグループ化)
- 枠線付きのdivを使って、枠組みを配置する
- 内容を論理レイアウトに変換する
- 微調整
ハイ。以上で終了です。「え〜〜！？」、今度はそんな声が聞こえてきそうです。では、早速実践してみましょう。
基本部分
まずは、嫌気がさすほど見ている骨格です。
HTMLの基本部分
あーもう見飽きた。さっさと進みましょうか。
基本文字サイズは・・・1段階小さいフォントのようです。ついでに、前景色、背景、全体のマージンも指定しておきます。というわけで、基本スタイルシートは以下。
CSSの基本部分
大きな枠組みを四角で囲む
さて、取り敢えずまとまっていそうなところをボックスで囲んでみましょうか。
とりあえず四角で囲む(55.9KB)
グループ化したほうが良さそうな部分が2つほど見えました。ニュース・特集・PR部分と、新着記事・脇記事・FYI部分です。序でなので、ロゴと横の一連の広告もグループ化します。
グループ・ボックス(53.2KB)
枠組みを配置する
準備は完了です。ではdivを使ってボックスを配していきましょう。position、状況によってfloatを使って配置していきます。余白は、padding、marginを用いて調整します。枠線を付けるのは、視覚的に見やすくする為で、無論、後で消します。
では、まず全体の幅を固定する為に、全体用のdivを入れます。
全体用のボックスを作る
の、CSSファイル
・・・。何かヘンな文字列が見えましたが、取り敢えず無視してください。
次に、ロゴの入った1列目のボックスを作ります。ここは小さいので、全部論理に変換してしまいましょう。iframeは使えないので外します。
1列目のロゴとPR用のボックスを作る
の、CSSファイル
うーん、広告の文字が間に入っているせいで、うまく横に並んでくれませんね。幸い、広告は一番上で、しかも、それよりも前にあるのは固定幅の画像だけです。ここは各広告をdivで囲い、position:absoluteプラス、ピクセル位置指定のコンビで逃げます。
1列目のPR用のボックスを調整する
の、CSSファイル
次は目次です。っとと、全部目次に見えてしまいますねぇ。・・んーっと、それじゃ全部ってことで。えーっと、スミマセン、左の色の付いたエリアのことです。背景は、全体の背景に任せます。でないと、目次よりも右のエリアのほうが長くなった時に、目次下の部分がヘンに余ってしまいます。では目次を絶対位置指定します。え？ 何故かって？ 何故でしょうね。種明かしは後回しです。幸い、その上にはロゴしか有りませんので、ピクセル位置指定出来、また微妙な誤差が出ることはありません。
目次ボックスを作る
の、CSSファイル
短めですが、大体こんなところでしょう。画像の目次にolを、矢印付きリストにulを使って、スタイルを区別しています。olとulの使い分けは、長々としたclassを使わないで済む分、ソースを書く煩わしさが違います。うまく使い分けてください。
さて、お待ちかねの本体部分です。目次部分を絶対配置しているので、上下位置の微調整は不要です。目次分の左余白を採ることで、あたかも段組をしているように見えるという仕掛けです。
右エリアを統括する、大きなボックスを作る
の、CSSファイル
何かまたヘンな文字列が見えますが、幻影です、気にしないでください。
実は、当サイトもそのようにしてレイアウトされています。他にも方法はありますが、訳あってこの方法で段組をしています。
では、ここで、一度スタイルシート抜きで見てみてください。目次がダラダラ続いて、メイン・エリアはかなり下の方にあります。実際の目次はもっともっと長いですがら、ややもすれば3スクロールしなくてはいけません。目の使える人はまだ良いですが、目の使えない人はこれを長々と聞かされるかも知れません。読み飛ばせる工夫をしておきたいところですね。どうしましょうか。ほんの少し、首をひねってみてください。
メイン・エリアに足を踏み入れます。まずは、特集とニュース、テキストPRの入ったエリアです。左右に分かれていますが、その大きさからして、左にある特集を先に見て欲しいのは自明の理です。と言うわけで、ソース上は以下のような順序にします。
メイン・エリア冒頭にある記事群の順序を決める
の、CSSファイル
「PR」はリストっぽく見えるので、番号無しリストにまとめます。リストに見えるものは片っ端からリストに変換してください。それで対応出来なかったとすれば、以前の物理レイアウトに無理があったということです。
しかし、正直、たかだか1行の広告の為に3つものiframeを使っていたのは驚きでした。
「more→」をわざわざ最後に持ってきている点に留意してください。
では、これにスタイルを指定していきます。
メイン・エリア冒頭にある記事群をスタイルする
の、CSSファイル
一つ、大きな変更点がありました。それは、「特集」と「PR」をグループ化したことです。そうしないと、floatした時に「ニュース」の先頭が「特集」ではなく「PR」の隣に来てしまうからです。positionを使ったテクニックもありますが、Windows版InternetExplorerが付いて来ませんでした。
「more→」は、レイアウトの関係から、ニュースの見出しの脇には置けませんでした。決して私の能力不足では、・・・あるかも知れません。てへ。