超超初心者のころナビで困ったこと色々思い出してみた

最初のころは理解に苦しんだul li の横並び(float)などなどは、自分としてはとても混乱したところかな、と思います。
例えば、横並びにはなったけど、高さ(height)が反映されないよー!とか。

今回は、ナビゲーションを2つご紹介します。

グローバルナビを作りたいとき

ナビ例

<ul id="gnav">
	<li><a href="#">HOME</a></li>
	<li><a href="#">会社概要</a></li>
	<li><a href="#">お問い合わせ</a></li>
</ul>

 

#gnav li {
float: left;
}
#gnav li a {
background-color: #A2D48E;
color: #FFFFFF;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
display: block;
text-decoration: none;
font-weight: bold;
margin-right: 1px;
}

横並びにはなったけど、高さ(height)が反映されない理由は高さを持たない要素「a」に対してCSSを書いているのに、display: block;を指定していないからです。display: block;とすれば、高さを持てる要素に変身します。
4方にmarginを指定したというのに上下にもに反映されないときなど、是非ここを見直してみてください。

フッターのちょっとした横並びリンクを作りたいとき

_r2_c2

<ul id="footer-nav">
	<li><a href="#">HOME</a></li>
	<li><a href="#">会社概要</a></li>
	<li><a href="#">お問い合わせ</a></li>
</ul>

 

#footer-nav li {
display: inline;
margin-right: 5px;
}

先ほどのblockとは反対の発想で、liをinlineにしてあげることで横にずらりーと並んでくれます。
便利ですね!

この2つの基本に基づいて、ナビゲーション作り色々やってみてください。
何個かパターンを作ってみたら、体感として「こうすればいいんだ」と、理屈が身につくと思います。

この記事にコメントを残す