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で指定します。
こちらのサイトの見かけは、一見レイアウト構造が違うようですが、サイドバーに続くグラフィックをしいてあるだけで、同じパターンでできています。フッターだけサイドバーの中に取り込みましたが。

サイトの文字の大きさ

基本となる文字の大きさを定義して、サイト全体の文字レイアウトを統一します。見出しは基本文字に対しての相対的なサイズ指定としておくと、基本文字サイズを変更したときに見出しのcssを触らなくても、それぞれの相対的な大きさは保つことができます。

本文:サイト訪問者が見やすいように、文字の大きさをユーザー側で変えられる相対指定とします。
ヘッダー・コントロール・フッター:文字の大きさの変化がレイアウトの破綻の原因となりやすいので、絶対指定とします。
私は・・・ですよ。世間一般でそうするのがあたりまえとされているわけではありませんので、そこんとこよろしく。

body {
font-size: 0.75em;   /* 基本文字サイズを12ピクセルにリセット */
}
h1 {
font-size: 2em; /* h1は基本文字サイズの2倍 */
}
h2 {
font-size: 1.8em;
}



基本となる文字の大きさ サイズリセットの数値
10px 0.625em この文字は10pxです。
11px 0.688em この文字は11pxです。
12px 0.75em この文字は12pxです。
13px 0.813em この文字は13pxです。
14px 0.875em この文字は14pxです。
16px normal この文字は16pxです。

hタグの文字サイズを指定するときの目安

基本文字サイズ 2.0倍 1.8倍 1.6倍 1.4倍 1.2倍 1.1倍 1.06倍
10px 20px 18px 16px 14px 12px 11px 11px
11px 22px 20px 18px 15px 13px 12px 12pc
12px 24px 22px 19px 17px 14px 13px 13px
13px 26px 23px 21px 18px 16px 14px 14px
14px 28px 25px 22px 20px 17px 15px 15px
基本文字サイズ 2.0倍 1.8倍 1.6倍 1.4倍 1.2倍 1.1倍 1.06倍
10px 20px 18px 16px 14px 12px 11px 11px
11px 22px 20px 18px 15px 13px 12px 12pc
12px 24px 22px 19px 17px 14px 13px 13px
13px 26px 23px 21px 18px 16px 14px 14px
14px 28px 25px 22px 20px 17px 15px 15px