webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

ナビゲーションボタンを画像に置き換える

ナビゲーションボタンを画像に置き換え、2カラムレイアウトに組み込みましょう。

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムの練習</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<div id="container">
<header></header>
<nav>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="food"><a href="#">Food</a></li>
<li id="info"><a href="#">Info</a></li>
<li id="access"><a href="#">Access</a></li>
</ul>
</nav>
<div id="content"></div>
<div id="sidebar"></div>
<footer></footer>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/*リセット部分*/
html,body,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}

/*レイアウト部分*/
#container {
  width:800px;
  margin:0 auto;
}
header {
  width:800px;
  height:300px;
  background:url(img/header.png) no-repeat;
}
ul {
  width:800px;
}
li {
  width:200px;
  height:50px;
  float: left;
}
li a {
  display:block;
  line-height:50px;
  text-align:center;
  color:#222;
  border-right:1px solid #000;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
li#home a {
  background:url(img/home.png) no-repeat;
}
li#food a {
  background:url(img/food.png) no-repeat;
}
li#info a {
  background:url(img/info.png) no-repeat;
}
li#access a {
  background:url(img/access.png) no-repeat;
}
li#home a:hover {
  background:url(img/home_h.png) no-repeat;
}
li#food a:hover {
  background:url(img/food_h.png) no-repeat;
}
li#info a:hover {
  background:url(img/info_h.png) no-repeat;
}
li#access a:hover {
  background:url(img/access_h.png) no-repeat;
}
li:last-child a {
   border-right: none;
}
#content {
  width:600px;
  height:400px;
  background:#0099CC;
  float:left;
}
#sidebar {
  width:200px;
  height:400px;
  background:#FF3333;
  float:right;
}
footer {
  width:800px;
  height:100px;
  background:#663366;
  clear:both;
}