とりあえずソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<!--#include file="meta.txt" -->
<!--#include file="link.txt" -->
<title>ナビゲーションに関する覚え書き</title>
</head>
<body class="TOP">
<h1>CSS:ナビゲーションのスタイル / HOME</h1>
<div id="TOP01" class="Section">
<h2>ナビゲーションのスタイルに関するメモ程度のもの</h2>
<p>できれば、サイドバーなんかにサイトマップを表示できるような機能を、ブラウザが持っていればベターかなと思うわけだが。</p>
<p>ま、とにかく、フレームによるものではなく、埋め込み型のナビゲーションのスタイルの一例。</p>
<p>ナビゲーションを h1 レヴェル見出しの上部とか、文書の先頭付近に普通に書いたりするとうざいので、文書の末尾に置く。スタイルシートでゴニョゴニョして、上部付近に表示させる。</p>
<p>ほんでもって、いちいちリソース毎にナビゲーションを書くのは管理が大変なので、SSI でインクルードするわけ。</p>
<p>すると、ナビゲーションのリンク先がその文書自身を参照したりしちゃって、そいつはユーザビリティ的にどうなのよ、とか格好つけちゃったりするので、ナビゲーションのリンク先が自身を参照する場合には、リンクにならないように、表示しないとか、何らかの方法を考えてみた。</p>
<p>なんか、ナビゲーションがナビゲーションに見えないので、ユーザビリティ的にどーよ、って気もするけれど、急造なのでカンベン。</p>
<ul>
<li><a href="sample.css" title="サンプル" type="text/plain">サンプル CSS</a></li>
<li><a href="Navi.txt" title="なび" type="text/plain">ナビゲーション部分</a>( SSI によるインクルード)</li>
</ul>
</div>
<!--#include file="Navi.txt" -->
<div class="Footer">
<address><!--#config timefmt="%Y-%m-%dT%T" -->last modified <!--#echo var="LAST_MODIFIED" -->+09:00 カナかな団首領</address>
<ul>
<li><a href="/shokodei/diary/doc/" title="目次">カナかな団の躁鬱CSSとかHTMLとか</a></li>
</ul>
</div>
</body>
</html>
おまけ・スタイルシート
@charset "Shift_JIS" ;
<!--#if expr="($HTTP_USER_AGENT = /compatible; MSIE 6/) && ($HTTP_USER_AGENT = /Windows/)" -->/* 補正用CSS読み込み */
@import url("winIe6.css");<!--#endif -->
body {
margin : 0 ;
padding : 0 ;
font-size : 100% ;
line-height : 150% ;
color : white ;
background-color : black ;
}
a img {
border-style : none ;
}
/* 見出し h1 レヴェル */
/* 大見出しは、ナビゲーションの背景もかねる */
h1 {
margin : 0 ;
padding : 10px 0 20px 20px ;
text-align : left ;
height : 40px ;
font-size : 24px ;
font-family : "Century Old Style" , "New York" , "Georgia" , "Bodoni SvtyTwo ITC TT-Book" , "Baskerville" , "Times New Roman" , /*"Kozuka Mincho std" ,*/ "Hiragino Mincho Pro" , "小塚明朝R" ,/* "小塚明朝 std R" ,*/ "ヒラギノ明朝 Pro W3" , "MS P明朝" , serif ;
font-weight : bold ;
background-color : black ;
background-image : url(h1-background-image.png) ;
background-position : bottom left ;
background-repeat : repeat-x ;
color : white ;
}
/* 本文 */
div.Section {
margin : 0 0 0 0 ;
padding : 6px 20px 20px 20px ;
background-color : white ;
color : #333322 ;
}
/* 見出し h2 レヴェル */
h2 {
padding : 4px 0 4px 0 ;
font-family : "Century Old Style" , "New York" , "Georgia" , "Bodoni SvtyTwo ITC TT-Book" , "Baskerville" , "Times New Roman" , "Kozuka Mincho std" , "Hiragino Mincho Pro" , "小塚明朝R" , "小塚明朝 std R" , "ヒラギノ明朝 Pro W3" , "MS P明朝" , serif ;
border-top : 1px solid gray ;
border-bottom : 1px solid gray ;
}
/* フッター */
div.Footer {
padding : 6px 20px 10px 20px ;
}
/* ナビゲーション */
/* 絶対配置 */
div.Navigation {
position : absolute ;
top : 50px ;
left : 0 ;
width : 96% ;
height : 20px ;
margin : 0 ;
padding : 0 ;
z-index : 1 ;
font-size : 12px ;
background-color : #808080 ;
background-image : url(Navi-background-image.png) ;
background-position : top left ;
background-repeat : repeat-x ;
}
/* ナビゲーションはリスト */
div.Navigation ul {
margin : 0 ;
padding : 0 0 0 20px ;
}
div.Navigation ul li {
float : left ;
list-style-type : none ;
margin : 0 5px 0 0 ;
padding : 0 ;
display : block ;
width : 64px ;
height : 20px ;
}
div.Navigation ul li a {
display : block ;
padding-top : 0 ;
width : 62px ;
height : 20px ;
text-align : center ;
}
/* お約束の疑似クラス */
a:link {
color : blue ;
text-decoration : none ;
background-color : silver ;
}
a:visited {
color : purple ;
text-decoration : none ;
background-color : silver ;
}
a:hover {
color : white ;
text-decoration : none ;
background-color : red ;
}
a:active {
color : white ;
text-decoration : none ;
background-color : green ;
}
/* ロールオーバー */
div.Navigation ul li#HH a {
background-image : url(Navi-linkH.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
div.Navigation ul li#AA a {
background-image : url(Navi-linkA.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
div.Navigation ul li#BB a {
background-image : url(Navi-linkB.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
div.Navigation ul li#CC a {
background-image : url(Navi-linkC.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
div.Navigation ul li#DD a {
background-image : url(Navi-linkD.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
/* WinIE は a 要素にホバー指定が無いと効かない */
div.Navigation ul li a:hover {
background-color : transparent ;
}
/* マウスオーバー時にイメージ非表示、背景画像が見える */
div.Navigation ul li a:hover img {
visibility : hidden ;
}
/* 該当ページのナビアンカーは表示しない */
body.TOP div.Navigation ul li#HH {
background-image : url(Navi-linkH-background-on.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
body.AAAA div.Navigation ul li#AA {
background-image : url(Navi-linkA-background-on.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
body.BBBB div.Navigation ul li#BB {
background-image : url(Navi-linkB-background-on.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
body.CCCC div.Navigation ul li#CC {
background-image : url(Navi-linkC-background-on.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
body.DDDD div.Navigation ul li#DD {
background-image : url(Navi-linkD-background-on.png) ;
background-repeat : no-repeat ;
background-position : top left ;
}
body.TOP div.Navigation ul li#HH a ,
body.AAAA div.Navigation ul li#AA a ,
body.BBBB div.Navigation ul li#BB a ,
body.CCCC div.Navigation ul li#CC a ,
body.DDDD div.Navigation ul li#DD a {
display : none ;
}