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

空白を消去したナビゲーション

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

完成イメージはこのようになります。
水平に中央揃えグローバルナビゲーションの例

display inline-block

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

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

デフォルトの空白を消す

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

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

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

このように、空白を消す事が出来ます。
空白を消去したナビゲーション