10月9日

css

自習（リストとナビゲーション）

先生のブログやテキストの解説を見ながら、横並び・縦並びナビゲーションのソースを全てタイピングしてみる。
ツールでチェックすると、スペルミス、空白漏れ、セミコロン漏れ、がそれぞれ1箇所あった。

IE対策の記述はIE9では以下のとおり省略しても問題ないようですが、実務では現在も記述する必要があるのでしょうね。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>縦並びボタン</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	color: #333333;
	font-size: 75%;
	font-family: sans-serif;
	line-height: 1.5;	
	background-color: #ffffff;
}
#nav {
	margin: 50px 0 0 50px;
	width: 130px;
}
#nav ul {
	list-style-type: none;
	border-top: 1px solid #cccccc;
}
#nav li {
	border-bottom: 1px solid #cccccc;
	background: #cc0000 left center no-repeat;
}
#nav a {
	color: #333333;
	text-decoration: none;
	padding: 4px 0 4px 10px;
	display: block;
	background: #ffffff left center no-repeat;
}
#nav a:hover {
	color: #ffffff;
	background-image: none;
	background-color: transparent;
}
</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>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>
</body>
</html>