疑似クラス@10月4日

HTML&CSS

ナビゲーションをつくるとき、必ず設定するのが「擬似クラス」

◎ a href="#"←＃を使うと、エラーになる飛び方をしない。
(ヌルリンク）指定されてないリンク
◎　list-style-type:none ←ulに対して指定（liの方では無い）
◎　div#nav ← divを取るのは、スピードアップのため。
◎　疑似クラスの順番は絶対！

* a:link { プロパティ : 値 ; }　
* a:visited { プロパティ : 値 ; }　
* a:hover { プロパティ : 値 ; }　
* a:active { プロパティ : 値 ; }　
↓
子孫セレクタで指定する
li a:hover { color : #f00 ; text-decoration : underline ; }

縦並び

<?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-transitional.dtd">
<html xmls="http//www.w3.org/19999/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;
}
#nav ul {
    list-style-type: none;
}
#nav li {
    margin-bottom: 10px;
	line-height: 1.0;
}
#nav li a:link {
    color: #0000ff;
	text-decoration: none;
}
#nav li a:visited {
    color: #8a2be2;
	text-decoration: none;
}
#nav li a:hover {
    color: #FF8800;
	text-decoration: underline;
}
#nav li a:active {
    color: #ff0000;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
	<li><a href="#">メニューのリンク１</a></li>
	<li><a href="#">メニューのリンク2</a></li>
	<li><a href="#">メニューのリンク3</a></li>
	<li><a href="#">メニューのリンク4</a></li>
	<li><a href="#">メニューのリンク5</a></li>
</ui>
</div>
</body>
</html>

横並び

display inline
簡単に横並びが出来る。
navi幅を決めないと、ブラウザのサイズで改行されるよ。

<style type="text/css">
<!--
div, ul, li, a {
    margin: 0;
    padding: 0;
}
#nav ul {
    list-style-type: none;
}
#nav li	{
    display: inline;
    margin-right: 20px;
}
#nav li a {
    font-size: 0.875em;
    text-decoration: none;
}
#nav li a:link {
    color: #0000FF;
    text-decoration: none;
}
#nav li a:visited {
    color: #8A2BE2;
    text-decoration: none;
}
#nav li a:hover {
  color: #FF8800;
  text-decoration: underline;
}
#nav 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>