• web制作

ナビゲーションの作り方【html・css・nav】

大和田
このエントリーをはてなブックマークに追加

何が言いたいかよくわからん記事を書くより、基本を押さえたほうがみんな幸せに。
そんなわけでコーディングの基本ナビゲーションの作り方についてです。

横並びのナビゲーションの作り方〜 float 〜

reset.cssやnomalize.cssは各自使用してください。

よく使われているやつ。

<!-- HTML -->

 <ul class="list-nav00">
  <li><a href="">HOME</a></li>
  <li><a href="">制作実績</a></li>
  <li><a href="">サービス</a></li>
  <li><a href="">会社案内</a></li>
  <li><a href="">ブログ</a></li>
  <li><a href="">お問い合わせ</a></li>
  <li><a href="">採用情報</a></li>
 </ul>

ナビゲーションは上記7つです。

//CSS

.list-nav00{
  width:980px;
  margin:0 auto;
}
.list-nav00:after {//フロート解除用クリアフィックス
  content: "";
  clear: both;
  display: block;
}
.list-nav00 li{
  float:left;
  width:140px; //ナビの幅980px ÷ ナビの数 7
}
.list-nav00 a{
  display:block;
  line-height:70px;
  height:70px;
  text-align:center;
  background:#000;
  color:#fff;
  border-right:1px solid red;
}
.list-nav00 li:first-child a{
  border-left:1px solid red;
}

結果
領域のキャプチャ 3

作り方のコツ

  • a要素にdisplay:block;を指定し高さを決めることでテキストだけでなくボタン全体にリンクをつけることが可能に
  • それに加えてline-height:を高さと同じ数値にすることで中央揃えが!

幅いっぱいバージョンのcss

//CSS(先ほどのcssの一部箇所を変更)

.list-main-nav00{
  width:100%;
}
.list-nav00 li{
  width:14.28%; //ナビの幅100% ÷ ナビの数 7
}

先ほどのcssを少し変えるだけで画面幅いっぱいのナビゲーションに変形します。

このようにfloatで作成することはできますが欠点があります。

欠点

  • テキストが縦二行になるとダメ
  • テキストが一行でも量が多すぎたらダメ
  • リストの数が減ったり増えたりするとおかしくなる

むむむ、対応力に欠ける感じですね。

横並びのナビゲーションの作り方〜 display:table; 〜

こちらもよく使われる方法。
floatに比べると対応力がありますが、使い方に少々癖があります。

<!-- HTML -->

 <ul class="list-nav01">
  <li><a href="">HOME</a></li>
  <li><a href="">制作実績</a></li>
  <li><a href="">サービス<br>サービス</a></li>
  <li><a href="">会社案内会社案内会社案内会社案内</a></li>
  <li><a href="">ブログ<br>ブログ</a></li>
  <li><a href="">お問い合わせ</a></li>
  <li><a href="">採用情報</a></li>
 </ul>

htmlは先ほどと違いテキストが長かったり二行になっているものを使います。

//CSS

.list-nav01{
  width:980px;
  margin:0 auto;
  display:table;
}
.list-nav01 li{
  display:table-cell;
  vertical-align:middle;
}
.list-nav01 a{
  width:300px; //長さは均等割以上のサイズを指定する。
  height:70px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  background:#000;
  color:#fff;
  border-right:1px solid red;
}
.list-nav01 li:first-child a{
  border-left:1px solid red;
}

結果
領域のキャプチャ 2

上記のcssを指定すると、980px内でリストが均等配置され、しかもテキスト量でレイアウトが崩れないナビゲーションが作れます。
a要素のwidthはナビの幅をリスト数で均等割した数値より大きければ大丈夫なようです。

逆にa要素のwidthを少なく設定することでリスト間の空いたナビゲーションも作れたりしますので、そこはかとなく便利です。

ナビゲーションの作り方まとめ

細かいところはとりあえず置いておきまして基本コードまるっとのっけます。
一応レスポンシブ的なものも含めました。

<!-- HTML -->

<ul class="list-nav">
  <li><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
</ul>
//CSS

.list-nav{
  width:980px;
  margin:0 auto;
  display:table;
}
.list-nav li{
  display:table-cell;
  vertical-align:middle;
}
.list-nav a{
  height:70px;
  width:400px;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  background:#000;
  color:#fff;
  border-right:1px solid red;
 }
.list-nav li:first-child a{
  border-left:1px solid red;
}
.list-nav li a:hover{
  background:#999;
}
@media screen and (max-width: 768px){
.list-nav{
  width:100%;
  margin:0 auto;
  display:block;
}
.list-nav li{
  display:table;
  width:100%;
}
.list-nav a{
  height:70px;
  width:100%;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  background:#000;
  color:#fff;
  border-right:none;
  border-bottom:solid 1px red;
}
.list-nav li:first-child a{
  border-left:none;
  border-top:solid 1px red;
}
}

今回display:table押しでナビゲーションを組んでみましたが、当然デザインによっては他の方法が良い場合がありますので、そこは感覚でやっていくしかないかと思います。

正解はひとつ!じゃない!!

rss登録
このエントリーをはてなブックマークに追加