想いのはしりがき

現在鋭意制作中のサイト。

制作作業進行中にちょっと躓き、良い手法はないものか、とググったところ答えが見つかり、感謝。

今後も繰り返し使うだろうし、同じ問題で悩んでいる方に少しでもお役立ていただければ、と思いながら書いています。

Webページの最下部辺りによく見かける、あのナビゲーション。

今回何とかしたかったのは、ページの最後にあるテキストを並べたナビゲーション。

「フッターナビ」等の呼び名があると思いますが、これです。

サイトデザインの流れから、どうしてもこのナビゲーションをセンタリングしたかった。

実はこれまでも同じようにセンタリングしたフッターナビを幾つも作ってきたのだけれど、ひとつ不満が。

これまでは「inline-block」で制作していたのですが、センタリングはできるものの、レスポンシブWebデザインに対応させようとすると、画面幅がこのナビゲーションの幅よりも狭くなった時、各項目の途中で改行がかかってしまいます。

機能的には問題ないのですが、2段に分かれたなら1段目に項目単位で収まるところまで表示して改行し、次の項目は2段目へ、という具合が望ましいのです。

「float: left;」で横並びにすると、上記のような場合、ちゃんと項目単位で改行してくれるのですが、「text-align: center;」も「margin: auto 0;」も効かないのです。全体的に左に寄ってしまう。

そこでググったところ、解決策が示されていました。

<nav id=”footernavi”>
<ul>
<li><a href=”#”>項目1</a></li>
<li><a href=”#”>項目2</a></li>
<li><a href=”#”>項目3</a></li>
<li><a href=”#”>項目4</a></li>
<li><a href=”#”>項目5</a></li>
</ul>
</nav>

上記の場合のCSSですが、

div#footernavi {

position: relative;

overflow: hidden;

}

div#footernavi ul{

float: left;

left: 50%;

position: relative;

}

div#fotternavi li{

float: left;

left: -50%;

position: relative;

}

これでセンタリングができました。

参考サイト

floatで横並びさせたリストをセンタリングするときの方法 | 株式会社LIG

いつも参考にさせていただいているLIGさんです。