|
| クールサンプル |
|
左側にメニューを表示(CSS版)
このサンプルは、スタイルシートを使用してメインコンテンツの下に配置されているナビゲーションメニューを左上に表示します。メニューをメインコンテンツの下に配置すると、本文の重要なキーワードが検索エンジンにインデックスしやすくなります。
ナビゲーションメニューを任意の位置に表示するには、div要素(wrap)内にheader, content, leftsideのdiv要素をネストさせます。#wrapのCSSには、position: relativeを追加して相対位置をwindowではなくwrapのdiv要素に切り替えます。メニューを左上に表示するには、#leftsideのCSSにposition: absolute, left: 3px, top: 55pxを追加します。leftとtopの値を書き換えることにより任意の位置にメニューを表示することができます。
#wrap {
background:#ffffff;
color:#303030;
margin:0 auto;
width:760px;
position: relative;
}
#leftside {
clear:left;
float:left;
width:140px;
margin:0 0 5px;
padding:0;
position: absolute;
left: 3px;
top: 55px;
}
|
|