WEB系キャンパス

(K)borderと背景画像を使ってナビゲーション装飾とclearfixを使ってfloat解除(CSS覚え書き)

clearfix_nav_top

今回はグラデーションと境界線のみのシンプルなナビゲーションメニューに挑戦します。
今回の課題は「ボタン1つずつに、均等の境界線を引く」「clearfixでfloatを解除」
この2点に絞って進めていこうと思います。

まず、目標とする完成図

clearfix_nav01

  • グラデーションはCSSで背景画像をrepeat-xで繰り返し
  • グラデーションは均一なので、縦幅1pxの画像にする
  • マースオーバー時は背景画像を薄くする。
  • 境界線は全方向2pxにする。

【1】まず、HTMLでマークアップ

＜nav＞を親要素にその中に＜ul＞と＜li＞でリスト作成

ソースを表示
印刷SyntaxHighlighterについて
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>clearfixを使ってfloat解除</title>
6</head>
7<body>
8<nav>
9<ul class="menu">
10    <li><a href="#">メニュー01</a></li>
11    <li><a href="#">メニュー02</a></li>
12    <li><a href="#">メニュー03</a></li>
13    <li><a href="#">メニュー04</a></li>
14    <li><a href="#">メニュー05</a></li>
15    <li><a href="#">メニュー06</a></li>
16</ul>
17</nav>
18</body>
19</html>

【2】CSSでコーディング

ここで、注意するのは、borderの指定位置です。
＜li＞に全方向(top,bottom,left,right)にborderを指定するのが一番、お手頃そうにですが、それをやってしまうと隣り合うボタン同士が2px+2pxで4pxになってしまい、均一感が薄れてしまいます。
clearfix_nav04

それを、回避するために＜li＞はborder-left(左)のみで、＜ul＞には、border-top(上)、border-bottom(下)、border-right(右)を指定します。これで、全方向に2pxの線を引くことができます。

clearfix_nav02

通常通りナビゲーションを装飾するCSSプロパティを記述。
※背景画像は通常とロールオーバーをくっつけて、幅1pxで作成してrepeat-xを指定
※bodyの横幅は中途半端な幅ですが、今回は見逃して下さいm(_ _)m

ソースを表示
印刷SyntaxHighlighterについて
1body{
2    background-color: #f3ebeb;
3}
4 
5nav{
6    margin:0 auto;
7    width:986px;   
8}
9 
10 
11ul.menu{
12    margin:0px;
13    padding:0px;
14    background-color:#ff5b5b;
15    list-style: none;
16    border-top:2px solid #000;
17    border-bottom:2px solid #000;
18    border-right:2px solid #000;   
19}
20 
21ul li{
22    float:left;
23    border-left:2px solid #000;
24    line-height:50px;
25    width:162px;
26}
27 
28ul li a{
29    text-decoration: none;/*リンクの下線を消す*/
30    color:#fff;
31    text-align: center;
32    display: block;/*テキストを中央寄せにするために*/
33}
34 
35 
36 
37ul.menu a:link,
38ul.menu a:visited{
39    background: url(img/btn.jpg)repeat-x left top;
40}
41 
42ul.menu a:hover{
43    background: url(img/btn.jpg)repeat-x left -50px;   
44}

んで、ここまでのプレビューがコレ！！
サンプル(未完成)

はい、うまくできてません！！

原因は＜ul＞にある。

＜ul＞に指定しているborder-bottomとborder-rightがキチンと引けてません。
chromeで要素の検証をすると、分かりますが、＜ul＞に＜li＞をfloatする事によって浮いてしまってる状態なので、＜ul＞に高さがない状態になってしまってます。
clearfix_nav03

【3】ここで、＜ul＞にclearfixを指定して＜li＞のfloatを解除します。

以下のコードを追加して、＜ul＞に新たなclassを指定します。
※classは複数設定する事が出来ます。設定する時は半角スペースを空けます。
※clearfixと書いてるclass名は決まりではありません、名前は自由です。

ソースを表示
印刷SyntaxHighlighterについて
1<ul class="menu clearfix"><!--clearfixを追加-->
2    <li><a href="#">メニュー01</a></li>
3    <li><a href="#">メニュー02</a></li>
4    <li><a href="#">メニュー03</a></li>
5    <li><a href="#">メニュー04</a></li>
6    <li><a href="#">メニュー05</a></li>
7    <li><a href="#">メニュー06</a></li>
8</ul>
ソースを表示
印刷SyntaxHighlighterについて
1.clearfix:after {
2    content: ".";
3    display: block;
4    height: 0px;
5    clear: both;
6    visibility: hidden;
7}
8.clearfix {
9    zoom: 1;
10}

↓上記のコードを記述後に出来たのがコレ！！
サンプル

clearfixのコードについて解説

テキスト要素の「.」※ピリオドを追加して、visibility: hiddenで非表示にして、clear:bothを指定してfloatを解除する。
これで、BOX内でfloatが解除されたので、＜ul＞に高さが指定されたので、指定したborderがキチンと表示できるってわけですね。

まとめ

＜ul＞に高さが表示されずに、こんな現象をよく起こしちゃってたので、＜ul＞にoverflow:hiddenを指定しても、同じように解消されるのですが、今回はclearfixを使っての解除が目標だったので、これでゴールです。使いこなせれば、何かと重宝しそうな手法なので、ガンガン取り入れていこうと思います。以上、＠Kc_fujiでしたm(_ _)m

こちらの記事もあわせてどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です