cssでサイトのレイアウト

ページレイアウト

cssでサイトのレイアウトをしていきます。私の場合はほとんどがワイド760ピクセルの2コラム、サイドバー形式です。まあ好みなんですが、私にはこれがいちばん見やすいですから。
ワイド760ピクセルというのは、もともとは800ピクセルのディスプレイでスクロールバーが出ても、横スクロールが発生しないというところから出てきたそうなんです。今ではもう少し大きくても実際問題としては差支えがないと思うんですが、(みんな贅沢になったもんだ)ただ、2コラムだとサイドバーに200ピクセルほど、残りのうちの500ピクセルほどが、本文に提供される部分ですが、あまりに横幅があるとテキストが読みにくいんですよね。サイトの基本はテキストだと思っていますから、日本語の文章が読みにくいページはいやなわけです。
これをcssで形になるように書いてやると

<body>
<div id=”container”>
<div id=”header”>
</div>
<div id=”content”>
<div id=”main”>
</div>
<div id=”sidebar”>
</div>
</div>
<div id=”footer”>
</div>
</div>
</body>

となります。横に並ぶサイドバーとメインはどちらを先に書いてもいいのですが、検索エンジンのロボットが、「先に書いてあるものほど重要なものである」という認識をするようなので、それならメニューであるサイドバーは後回し・・・ということになります。サイドバーを左右どちらにするかは、ソースの記載が決めるのではなく、cssのfloatで指定します。
こちらのサイトの見かけは、一見レイアウト構造が違うようですが、サイドバーに続くグラフィックをしいてあるだけで、同じパターンでできています。フッターだけサイドバーの中に取り込みましたが。

コメント&トラックバック

トラックバックURL

コメントにはユーザー登録をしてログインする必要があります。登録は誰でもしていただけますが、「最初にお読みください」のページをご確認の上、サイドメニュー下部の「登録」からご登録ください。。登録がお済みの方はサイドメニューの「ログイン」からお入りの上コメントしてください。