今日は、昨日のおさらいです。
<ul>タグと<li>タグを使って、こんな感じのメニューを作りたいと思います。
xhtml ↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja"lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>メニュー</title>
<link rel="stylesheet" type="text/css" href="aaa.css">
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<ul>
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
<li class="rline">ddddd</li> ← d列の右にかかるボーダーラインを
<li>aaaaa</li> 消したいので、class要素で指定。
<li>bbbbb</li>
<li>ccccc</li>
<li class="rline">ddddd</li>
</ul>
</body>
</html>
CSS
↓
* {
margin:0; padding:0; ← ブラウザ標準のスタイルシートをクリアするため。
}
body {
line-height:1.8;
text-align:center;
}
ul {
width:523px; ← 120×4＝liの幅、(5×2)×4＝paddingの幅、(1×4)−1＝borderの幅
}
li {
width:120px;
list-style:none;
float:left; ← floatをleftにかけることによって、横並びにできます。
padding:20px 5px; ← ulで指定した横幅に収まるように5pxとりました
font-size:16px; 20pxは上下幅。
border-right:1px solid #fff; ← 行間に線を入れて見やすくします。
border-bottom:1px solid #fff;
background:#0000ff;
color:#fff;
}
.rline {
border-right:none; ← class要素。右の線を無くします。
}
