CSS:ナビゲーションのスタイル / ソース

ナビゲーションのスタイルに関するメモ程度のもののソース

とりあえずソース


<!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 ;
}