CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

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

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

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を参考にしたい方はこちらをご覧下さい。