2009年12月1日火曜日

ulタグとliタグ

今日は、昨日のおさらいです。
<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要素。右の線を無くします。
}

0 件のコメント:

コメントを投稿