CSS:ナビゲーションツールバー | 初心者でもわかりやすい/WEBデザイン勉強ノート

初心者でもわかりやすい/WEBデザイン勉強ノート

WEBデザイン勉強中、ひよっこWEBデザイナーの勉強ブログです。

ナビゲーションバーの制作

HTML

<ul id="***">
 <li>***</li>
 <li>***</li>
 <li>***</li>
 <li>***</li>
 <li>***</li>
</ul>



CSS

#ulのid名{
width:横幅を指定;
list-style-type:none; ←リストのマークタイプを指定(noneでなしにする)
margin-left: 0px;
padding-left: 0px;
font-size:フォントサイズを指定 px;
}

#ulのid名 li{
width:ここのボタンの横幅指定;
float:left;
text-align:center;
border: ボーダーを好みのものを指定;
}

#ulのid名 li a{
display:block;
width:横幅指定;
padding: px;
text-decoration: none;
background-color: #背景色を指定;
color: #文字色を指定;
}


初心者でもわかりやすい/WEBデザイン勉強ノート
初心者でもわかりやすい/WEBデザイン勉強ノート