エラスティックレイアウトを採用してみました

当サイトのレイアウトにはエラスティックレイアウトという手法を使いました。コンテナ要素の幅をem単位で指定しています。該当部分の記述は以下の通り。

div#container {
width: 90%;
max-width: 60em;
min-width: 46em;
margin: 0 auto;
}

コンテンツ全体を囲む div#container に対して max-width と min-width をem単位で指定しています。そうすることで、ブラウザで文字サイズを変更すると div#container の幅が変わるようになります。なお、 max-width/min-width プロパティに対応していないIE6以前などのブラウザでは単に width:90% になるだけです。

また、エラスティックレイアウトで2カラムを実現するためにネガティブマージンをレイアウトに使っています。ネガティブマージンというのは文字通り、マイナス値を指定した margin プロパティのこと。

div#main {
float: left;
width: 100%;
margin: 0 -16em 20px 0;
}
div#sidebar {
float: right;
width: 15em;
margin-bottom: 30px;
}

div#sidebar の幅が15emで、残りの領域は div#main という割り当てとなっています。div#sidebar の width:15em に対して div#main の右 margin:16em 。差分の1emは間のマージン。これだけだと、div#main の右端が div#sidebar に潜ってしまうため、div#main の中身のブロック要素に右 margin を設定します。

div.entry {
margin: 0 16em 30px 0;
}

これで完成。

なお、このレイアウトには以下のサイトを参考にさせていただきました。

2xup.org: 一行あたりの文字数を制限する elastic layout （エラステックレイアウト）

Alternative Design Project: デザインテンプレート1110とネガティブマージン