課題CSS18の解説

• 以下の画像と同じように表示させるCSSを記述しなさい
• 擬似クラスで指定
• 幅は適宜設定

.nav {
	margin: 50px;
}
.nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.nav li	{	
	font-size: 0.875em;
	display: inline;
	margin: 0 0 0 10px;
	padding:5px 0 5px 10px;
	border-left: 1px solid #999;
}
.nav li.first {
	border-left: none;
}
.nav li a:link	{
	color: #000;
	text-decoration: none;
}
nav li a:visited {
	color: #90C;
}
.nav li a:hover {
	color: #FA0;
}
|<

**ポイント
+メニューの最初の項目だけclass属性をしておく⇒borderの扱いを上書き
+メニュー全体の幅は固定しない
+横にテキストを並べるときは「display:inline」
+.nav li と .nav li.firstの順番は固定。逆だとfirstの設定が反映されない（.nav liで上書きしてしまう）



*p3*[授業まとめ][課題][CSS2.1]課題CSS18の解説

**ポイント
先生の解答
>|css|
.nav	{
	font-size: 0.75em;
	margin: 50px;
}
.nav ul	{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.nav li	{
	float: left;
}
.nav li a	{
	color: #000;
	text-align: center;
	text-decoration: none;
	display: block;
	width: 120px;
	line-height: 25px;
	border-right: solid 1px #AAA;
}
.nav li.first a:link	{
	border-left: solid 1px #AAA;
}
.nav li a:hover	{
	background-color: #E8EEB6;
}

ポイント

1. liはfloat:left、li a はdisplay:blockにする

テキストの87ページあたりからを確認しておく

自分のメモ

子孫セレクタを復習しておきたほうがいい