web codery

ナビゲーションを中央寄せする簡単な方法【リキッドレイアウト対応】

category: HTML/CSS

今回は、ブラウザ幅に合わせてコンテンツの幅を変化させる「リキッドレイアウト」でも機能する横並びにしたナビゲーション(いわゆるグローバルナビゲーション等)を作るCSSの指定方法です。

コード⇒配置イメージ⇒説明の順で書いていきます。
※コードの説明を簡略化するため、リセットスタイルやliの中に入れるであろうa要素は省きます。

/* HTML */
<div class="nav">
  <ul>
    <li>Home</li><li>Abount</li><li>Contact</li>
  </ul>
</div>
/* CSS */
.nav {
  width: 100%;
}
.nav ul {
  text-align: center;
}
.nav ul li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 25%;  /* 任意のwidth */
}

inline-blockという指定をすると、簡単にいってしまうと、幅・高さの指定ができるinlineの要素といった感じになります。witdh指定はできますが並び方はinlineと同じになるので、ナビゲーション中の各要素をtext-aline: center;で中央寄せすることができ、floatを指定しなくても横並びになってくれます。IE6,7はinline-block否対応なので、*付き指定(IE6,7用CSSハック)でdisplay: inlineとzoomを指定しています。
※CSSハックについては、IE用CSSハックの簡単な書き方とIE10以上への対応を参照してみてください。

注意点は、各liの間に改行を入れてしまうと隙間が開いてしまうので、liの後に改行を入れずにコード上も横並びにする必要があることです。liをfloatで配置しているときには起こらない現象ですが、displayがinlineの要素の並びやテキスト中の改行は空白文字扱いになるのでこういったことが起こります。コードの可読性などの問題で改行を入れたい場合は、改行部分をコメントアウトする方法で対応できます。(これもちょっと見づらいですが…)

/* HTML */
<div class="nav">
  <ul>
    <li>Home</li><!--
    --><li>Abount</li><!--
    --><li>contact</li>
  </ul>
</div>

以上、ナビゲーションを中央寄せする簡単な方法でした。

管理人にメッセージを送る





ページトップ