10/4 ☼　CSS　ナビゲーションと擬似クラス

CSS

昨日のおさらい

  • ボックス内にボックスがある場合、マージン値の大きいボックスのマージンが採用される。
  • wrapperにmargin-bottomを指定すると、fotterのclear:bothはいらない。「clear: both」も「wrapper { overflow: auto　margin-bzottom:」も役割は同じ。

リストのナビゲーション

擬似クラス
ナビゲーションをつくるとき、マウスの反応を作る。
リンクボタン（アンカー内容）に適用。
文字色、アンダーラインを付けるか付けないかなどを設定する。

  • アンダーライン付けないとき　text-decoration : none ;
  1. アンダーライン付けるとき　text-decoration : underline ;

１a:link：未アクセスの状態
２a:visited：アクセス済の状態
３a:hover：マウスが上に乗った時の状態。アンダーバー付ける場合が多い。
４a:active：マウスを押した瞬間の状態。指定しない場合が多い。

必ずこの順番通りに記述する。

記述例

li a:link　{ color : #00f ; text-decoration : none ; }
li a:visited 　{ color : #369 ; text-decoration : none ; }
li a:hover　{ color : #f00 ; text-decoration : underline ; }
li a:active 　{ color : #f60 ; text-decoration : underline ; }

縦並びメニュー

リストの黒丸や番号を完璧に消すために下記記述する。
「ul」「 ol」に指定する。(li単体には指定しない)

ul {
    list-style-type: none;
}

20111004233823

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//W3c//DTD XHTML 1.0 Transitional//EN""http//WWW.W3.org/TR/xhtml1/DTD/xhtml1-transition.dtd">
<html xmins="http;//www.w3.org/1999/xhtml"xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>縦並びメニュー：文字の場合</title>

<style type="text/css">
<!--
div,ul,li,a {
    margin: 0;
    padding: 0;
}

#nav {
   font-size: 1em;
   margin: 50px 0 0 50px;
}

ul {
    list-style-type: none;
}

li {
    margin-bottom: 10px;
    line-height: 1.0;
}

li a:link {
    color: #0000FF;
    text-decoration: none;
}

li a:visited {
    color: #8A2BE2;
    text-decoration: none;
}

li a:hover {
    color: #FF8800;
    text-decoration: underline;
}

li a:active {
    color: #FF0000;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
</body>
</html>

横並びメニュー

fotterの文字だけのリンクなどに使う。
ブラウザの大きさによって改行されてしまうのに注意。

リストの黒丸や番号を完璧に消すために下記記述する。
「ul」「 ol」に指定する。(li単体には指定しない)

ul {
    list-style-type: none;
}

文字の横並びのとき、縦に重ねっているものを横にするために記述する。

li {
    display: inline;
}

20111004235127

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//W3c//DTD XHTML 1.0 Transitional//EN""http//WWW.W3.org/TR/xhtml1/DTD/xhtml1-transition.dtd">
<html xmins="http;//www.w3.org/1999/xhtml"xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>横並びメニュー：文字の場合</title>

<style type="text/css">
<!--
div,ul,li,a {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

li {
    display: inline;
    margin-right: 20px;
}

li a {
    font-size: 0.975em;
    text-decoration: none;
}

li a:link {
    color: #0000FF;
    text-decoration: none;
}

li a:visited {
    color: #8A2BE2;
    text-decoration: none;
}

li a:hover {
    color: #FF8800;
    text-decoration: underline;
}

li a:active {
    color: #FF0000;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
</body>
</html>

<a href="#">の#は値を持たない数値で押しても飛ばない。エラーが出ない。