html

ニコニコ動画やニコニコ静画で使われている、ヘッダー・ナビゲーション・右サイドバー・フッターを持つ 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>
                    &copy; 2011 
                    <a href="http://d.hatena.ne.jp/griefworker">griefworker</a>
                </address>
            </div>
        </div>
    </body>
</html>

メイン部分と右サイドバーの高さを揃えていないので、背景色を設定したときは表示が変になるけど、白背景にする予定だから気にしないでいいかな。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style>  </style> </head> <body>  <div id="header"> Top | MyPage | Logout </div>  <div style="height:26px;"></div>  <div id="main"> aaaaaaaa bbbbbbbb cccccccc dddddddd eeeeeeee ffffffff gggggggg hhhhhhhh </div> </body> </html>

present

ニコニコ動画みたいなCSSレイアウト

Twitterやニコニコ動画みたいにヘッダーを固定する方法