中央揃えのグローバルナビゲーションを作ってみよう

グローバルナビゲーションを作るときによく使うテクニックとしてフロートがありますが、左寄せで配置されます。今回は中央から配置していくテクニックをご紹介致します。

完成イメージはこのようになります。

display inline-block

display inline-blockを利用すればフロートを使わなくても要素を横並びにできます。
対応ブラウザはモダンブラウザ、オールドIE（8以前）は非対応です。

HTMLはこのようにマークアップします。

.nav ul {
    display:block;   /*ポイント!*/
    overflow:hidden;
    position: relative;
    list-style: none;
    padding: 0;
    width:100%;
    text-align: center;   /*ポイント!*/
    letter-spacing: -6px;
}
.nav li {
    display: inline-block;   /*ポイント!*/
    border-bottom: none;
    padding: 0;
    margin: 0;
    text-align: center;
    border-right: 1px solid #ccc;
    letter-spacing:normal;
}

デフォルトの空白を消す

inline-blockでは、デフォルトでマージンが設定されます。下の画像をご覧ください。だいたい、５pxくらいの空白が出来てしまうのです。このままでは、かっこわるいので、空白を消す設定も同時にしておく必要があります。

空白を消すにはletter-spacingを設定する事で対応します。要素のマージンを調整するCSSです。ul部分にマイナスの設定をし、liの部分にnomalを指定する事で空白が消えます。

下記コードは上記のコードに追加で記述してください。

.nav ul {
    letter-spacing: -6px;   /*ポイント!*/
}
.nav li {
    letter-spacing:normal;   /*ポイント!*/
}

このように、空白を消す事が出来ます。