サイドバーを固定にしたサンプル

Category ：
CSS リファレンス

サイドバーを固定にしたサンプル

今回はWebサイトのサイドにある部分を固定にするサンプルを作ってみました。

IE6も対応なので、解説していきたいと思います。

…ここからが続き

サイドバーを固定にしたサンプルの解説

今回固定する部分はココになります。

サイドバーを固定にしたサンプル

XHTML

<div id="subContents">
<h3>カテゴリー</h3>
<ul class="category">
<li><a href="/log/css/" title="CSS リファレンス一覧">CSS リファレンス</a> [26]</li>
<li><a href="/log/web-design/" title="Webデザインの一覧">Webデザイン</a> [32]</li>
<li><a href="/log/css-beginner/" title="CSS ビギナー(初心者)向け一覧">CSS ビギナー向け</a> [20]</li>
<li><a href="/log/photoshop/" title="Photoshopの一覧">Photoshop</a> [6]</li>
<li><a href="/log/xhtml/" title="(X)HTMLの一覧">(X)HTML</a> [7]</li>
<li><a href="/log/web/" title="Web関連情報の一覧">Web関連情報</a> [18]</li>
<li><a href="/log/javascript/" title="Javascriptの一覧">Javascript</a> [30]</li>
<li><a href="/log/convenience/" title="便利な情報の一覧">便利な情報</a> [10]</li>
<li><a href="/log/movable-type/" title="Movable Typeの一覧">Movable Type</a> [15]</li>
<li><a href="/log/info/" title="お知らせの一覧">お知らせ</a> [8]</li>
<li><a href="/log/flash/" title="Flashの一覧">Flash</a> [5]</li>
<li><a href="/log/zakki/" title="雑記の一覧">雑記</a> [7]</li>
<li><a href="/log/php/" title="PHPの一覧">PHP</a> [2]</li>
<li><a href="/log/book-soft/" title="お勧め書籍、ソフトの紹介一覧">お勧め書籍、ソフト</a> [10]</li>
<!--/ .category--></ul>
<!--/ #subContents--></div>

htmlは普通の記述で大丈夫です。

CSS

/* subContents要素
----------------------------------------------------------- */
div#subContents	{
	width: 200px;
	background: #F7F7F7;
	padding: 10px;
	position: fixed;
	top: 100px;
	z-index: 20;
}
* html div#subContents    {   
    position: absolute;   
    top: expression(eval(document.documentElement.scrollTop+100));   
}

* html div#headerに記述してある部分がIE6対応部分ですね。
これに付いてはCSS : positionの「absolute」「relative」「fixed」のリファレンスで説明していますので、そちらをご覧下さい。

残りの部分に関しては、普通にCSSでレイアウトをしているだけです。
CSSを参考にしたい方はこちらをご覧下さい。

Comments