16日目 | CSS 横並びリンクメニューの復習

授業

1種類のhtmlで、4種類の横並びメニューを4種類のCSSで実現

作成のポイント：横並びリンクメニューを作るときはdisplay:inline;が鉄則
●課題1
完成形

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>style4</title>
<link rel="stylesheet" href="css/style4.css" media="screen, print">
</head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">リストメニュー1</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>
</ul>
</div>
</body>
</html>

CSS

charset "UTF-8";

#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;

●課題2
完成形

CSS

@charset "UTF-8";

#nav{
  font-sixe: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;
}

●課題3
完成形

CSS

@charset "UTF-8";

#nav{
  font-size:0.75em;
	width:760px;
	height:30px;
	background-color:#393;
}

#nav  ul{
  margin:0;
  padding:0;
	list-style-type:none;
}

#nav li{
    float:left;
}

#nav li a:link{
	  color:#FFF;
		text-align:center;
		text-decoration:none;
		display:block;
		line-height:30px;
		width:120px;
		border-right:solid 1px #FFF;
}

#nav li a:hover{
	background-color:#3c6;
}

●課題4
完成形
背景画像はIllustratorで作成しました。li aと li a:hoverで見せる画像をずらすのがポイント

CSS

@charset "UTF-8";

#nav{
  font-size:0.8em;
	width:760px;
	height:40px;
	margin:50px 0 0 50px;
	border-top:solid 1px #aaa;
	border-bottom:solid 1px #aaa;
	border-left:solid 1px #aaa;
}

#nav  ul{
  margin:0;
  padding:0;
	list-style-type:none;
}

#nav li{
    float:left;
}

#nav li a{
	  color:#000;
		line-height:40px;
		text-align:center;
		text-decoration:none;
		display:block;
		width:151px;
		background-image:url(../img/haikei.jpg);
		background-repeat:repeat-x;
		border-right:solid 1px #aaa;
}

#nav li a:hover{
	background-position:0 -50px;
}

Photoshopでボタン画像を作る練習

選択範囲○、選択範囲□を組み合わせ色を塗る、フィルター‐その他‐スクロール垂直方向数値は画像高さサイズの半分で終端がくるんくるんとなる

カーブを少し変えたボタン