[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ

リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。

それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです!

サイトのキャプチャ

How to shrinkwrap and center elements horizontally

デモ

デモは上から display:inline-block, position:relative, display:table, display:inline-flexで、ナビゲーションを水平の真ん中に配置しています。

サイトのキャプチャ

デモページ:幅1200pxで表示

表示サイズを変更しても、真ん中配置です。

サイトのキャプチャ

デモページ:幅780pxで表示

実装: display:inline-block

ラッパーに「text-align:center」を指定できるのであれば、「display:inline-block」を使用することができます。

HTML

ナビゲーションのリスト要素を内包するdivを一つ用意します。

<div class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        …
    </ul>
</div>

CSS

ラッパーに「text-align:center」、アイテムはfloatで横並びにし、inline-bklockでまとめます。

.navbar {
    text-align:center;
}
.navbar ul {
    display:inline-block;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

サポートブラウザ

IEはこのままではhasLayoutで動かないため、inline-blockをinlineに変更しzoom:1を加えるとIE7/8でも動作します。

.navbar ul {
    display:inline;
    zoom:1;
}

実装: position:relative

もう一つよく使用されるテクニックが「position:relative」です。
ラッパーに「text-align:center」を指定できないのであれば、このテクニックでしょう。

HTML

このテクニックでは、ラッパーを2つ必要とします。

<div class="navbar">
    <div>
        <ul>
            <li><a href="/">Home</a></li>
            …
        </ul>
    </div>
</div>

CSS

スタイルシートは少しトリッキーで、内側のラッパーをfloatし「left:50%」に配置し、リストを「left:-50%」で最初のポジションに戻します。

.navbar {
    overflow:hidden;
}
.navbar > div {
    position:relative;
    left:50%;
    float:left;
}
.navbar ul {
    position:relative;
    left:-50%;
    float:left;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

サポートブラウザ

このテクニックもほとんどのブラウザで動作しますが、IE7用には下記を必要とします。

.navbar {
    position:relative;
}

実装: display:table

もし最小限のマークアップで実装するなら、このテクニックです。

HTML

HTMLはかなりシンプルで、無駄なものは一切ありません。

<ul class="navbar">
    <li><a href="/">Home</a></li>
    …
</ul>

CSS

「display:table」を使用することで、内容に合わせて自動的に幅を調整し、margin:autoで真ん中に配置します。

.navbar {
    display:table;
    margin:0 auto;
}
.navbar li {
    display:table-cell;
}
.navbar li + li {
    padding-left:20px;
}

サポートブラウザ

「display:table」を使用しているため、IE7以下は機能しません。

実装: display:inline-flex

最後のテクニックは、flex layoutです。

HTML

これは「display:inline-block」と非常に似ており、HTMLは全く同じです。

<div class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        …
    </ul>
</div>

CSS

スタイルシートはベンダープレフィックスを使用し、記述します。

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

サポートブラウザ

このテクニックは対応ブラウザが一番限られています。Opera12.1, IE9以下は機能しません。しかし、こういうテクニックがあると知っておくのは非常に大事なことです。

top of page

©2017 coliss