グローバルナビゲーションはユーザーのユーザビリティ（利便性）を高める為に必ず設定しておきたい機能です。
ナビゲーションにはサイドに配置されたものや、上部に横並びになっているものなどがありますが、今回はfloatを使った横並びのナビゲーションの作り方を説明します。
リストはSEO対策も考慮して「ul」タグで作りましょう。「p」タグでも作ることは出来ますが、検索エンジンに正しい情報を伝える為にはリスト形式にする方が有効です。
なお、中央揃えのナビゲーションの作り方も掲載しています。ページの一番下をご覧ください。
下のコードを使ってみてください。HTMLは「ulとli」で作成します。
ulについての詳細はolとulタグの書き方をご覧ください。
CSSのflotで「li」を横並びにします。
#glnavi ul{
height:43px;
margin:0px; /*ulとliにmargin 0 padding0を指定することで空白を消します。*/
padding:0px;
border-left:1px solid #ccc;
}
#glnavi li{
float:left;
width:8em;
margin:0px;
padding:0px;
border-right:1px solid #ccc;
text-align:center;
background-color:#D5FFDF;
list-style-type:none;
}
#glnavi li a{
display: block;
width:100%;
padding:6px 0;
line-height:2em;
border-bottom:0px solid #646871;
text-decoration:none;
text-align:center;
color:#000;
}
#glnavi li a:visited{
padding:6px 0;
color:#FFFFFF;
}
#glnavi li a:hover,a:focus {
background:#D5DFFF;
padding:6px 0;
color:#ccc;
}
#glnavi li a:active{
padding:6px 0;
color:red;
}
/*------------Micro clearfix--------------*/
.cf {
zoom: 1;
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
このようになります。
説明
ここでのポイントは「ul」と「li」のマージンとパディングを０pxに指定して初期の設定を消しておくことと、 「a」に「display: block」を指定してブロックレベルとして扱うようにすることです。これを指定することで、全体がクリック領域になります。
「ul」に「height」を指定した高さを決めます。さらに、「border-left:1px solid #ccc」を指定して左側にボーダーを入れます。
「li」に「border-right」を指定して右側にボーダーを入れます。
今回は「background-color」にしましたが、「background：url()」で画像にしたり、CSS3でグラデーションやボックスシャドウを内側につけたりすると、さらにきれいなナビが作れます。
floatの回り込みを解除
最後にリストの回り込みを解除する２つの方法を紹介します。
clearの詳細は「clearの使い方」についてをご覧ください。
１.clear:bothを指定して解除する方法
#glnaviに続くボックスに「clear:both」を指定してします。但しこの方法はよけいなタグを作るためお勧めしません。
.clear{ clear:both; }
２.マイクロクリアフィックスで解除する方法
HTMLのclass部分に「cf」をいれます。CSSに上記の/*——Micro clearfix—–*/以下を記述します。この記述はスタイルシートの上部に記述しておくといいでしょう。回り込みを指定した上のボックスに「class=”cf”」を追加します。
/*------------Micro clearfix--------------*/
.cf {
zoom: 1;
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
こちらの方が簡単で、コードも綺麗になります。綺麗なHTMLコードを書くことで検索エンジンのクローラーが理解し易くなります。
現在選択しているページのナビゲーションのデザインを変える方法
下のサンプルでは開いているページをグレーで表示しています。
HTMLはこのようになります。開いているページの li に class を追加します。現在開いてるページごとに指定する必要があります。
HTMLの li に指定したクラス current に、CSSの方でカラーなどを指定します。
#glnavi .current a {
background: #cccccc;
}
関連記事
上記の内容は左から配置されるグローバルナビゲーションでしたが、中央揃えにすることもできます。よろしければ下の記事も参考にしてください。
中央揃えのグローバルナビゲーションを作ってみよう
