ニコニコ動画やニコニコ静画で使われている、ヘッダー・ナビゲーション・右サイドバー・フッターを持つ CSS レイアウトを、見よう見まねで実装してみました。こんな感じのやつ。
このレイアウトは Web アプリでよく利用すると思うので、メモしておきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ニコニコ動画風レイアウト</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> <!-- * { padding: 0; margin: 0; } #wrapper { margin: 0 auto; width: 920px; } #header { width: 900px; padding: 10px; height: 50px; margin: 10px 0px 5px 0px; } #navigation { padding: 10px; margin: 0px 0px 5px 0px; } #contents { margin-bottom: 5px; overflow: auto; width: 100% } #main { float: left; margin: 10px; padding: 0px; width: 681px; display: inline; position: relative; } #sidebar { display: inline; margin: 10px; padding: 0px; width: 195px; float: right; } #footer { width: 900px; clear: both; margin: 0px 0px 10px 0px; padding: 10px; } .clear { clear: both; background: none; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>タイトル</h1> </div> <div id="navigation"> ここにナビゲーションを表示します。<br><br> </div> <div id="contents"> <div id="main"> <h2>メイン</h2> <div> ここにメインコンテンツを表示します。 <br><br><br><br><br><br><br><br><br><br> </div> <div class="clear"></div> </div> <div id="sidebar"> <h3>サイドバー</h3> <div> ここに広告やお知らせを表示します。 <br><br><br><br><br><br><br><br><br><br> </div> <div class="clear"></div> </div> </div> <div id="footer"> <address> © 2011 <a href="http://d.hatena.ne.jp/griefworker">griefworker</a> </address> </div> </div> </body> </html>
メイン部分と右サイドバーの高さを揃えていないので、背景色を設定したときは表示が変になるけど、白背景にする予定だから気にしないでいいかな。