浜松のデザイン会社、エンジェルデザインです。集客と増益につなげる広告戦略とデザインはエンジェルデザインにお任せくださいませ。

サイト制作の備忘録

フッターナビ

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

 

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

 

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

フッターナビ

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さんです。