Web製作ラボ
12
5/30, 2012
hayashiLabo
スタイルシートによるナビボタン
ちょっとまともなナビボタン
をスタイルシートで作る
ナビボタン
ulとli
タグ →リスト（箇条書き）
<ul>
<li>ナビ1</li>
<li>ナビ2</li>
<li>ナビ3</li>
</ul>
a
タグ →リンクの記述
<li><a href="#">ナビ1</a></li>
上記#のところに、相対指定またはhttp指定でリンクを書く
ナビボタンのHTML記述
<ul>
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
</ul>
をnavigation IDに書く
ナビボタンのCSS
#navigation ul { list-style-type:none; }
#navigation li { display:inline; } /*おまじない*/
#navigation a {
display:block; /*縦にブロックで並ぶ*/
text-decoration:none; /*下線消す*/
font-size:small; /*フォント小さめ*/
background-color:#866;
margin:2px 0px; /*上下に2px、左右なし [上][右][下][左]*/
width:5em;
padding:0.5em 0 0.5em 0.5em; /* [上][右][下][左] emはフォント
の高さを１*/
border:1px solid #433;
color:black;
}
ナビボタンのCSS
（初期）
#navigation ul { list-style-type:none; }
リストのマーカーの種類 （circle, square, lower-romanなど）
#navigation li { display:inline; }
block（改行入り）かinline（改行なし）
noneは非表示 など
aタグに対する擬似クラス
例：
#navigation a:hover {
display:block; /*縦にブロックで並ぶ*/
text-decoration:none;
background-color:#caa;
color:black;
}
上述の :hover を擬似クラスと呼んでいる
link visited hover active の順に上書き指定

通信教材発送日・WEB配信日（PDF）

備考 (株)フォレスト

画像のサイズとデプス