レシピ
レイアウト
横並びのメニューを作成する
グローバルナビゲーションなどで横並びになったメニューを作成する方法について解説します。
この記事のポイント
- 横並びにメニューを並べる方法が分かる
目次
2種類の方法でメニューを横に並べる
グローバルナビゲーションやフッターナビゲーションなど横方向にメニューを並べる方法について、次の2種類の方法をそれぞれ解説します。
- floatプロパティを使って並べる
- displayプロパティで「inline-block」を使って並べる
今回は次のようなグローバルナビゲーションを作っていきます。

表示幅によってナビゲーションを自動伸縮も行います。

floatプロパティを使って横に並べる
floatプロパティを使って横に並べる方法です。
まずはHTMLのコードから確認します。
HTMLのマークアップ例
<nav id="g_navi">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/concept">コンセプト</a></li>
<li><a href="/menu">メニュー</a></li>
<li><a href="/access">アクセス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
リストをマークアップするul要素とli要素を使ってメニューのボタンを記述し、リスト全体をナビゲーションを表すnav要素で囲っています。
CSSのコード例
#g_navi ul {
overflow: hidden;
margin: 0 auto;
padding: 0 3%;
width: 94%;
max-width: 960px;
}
#g_navi ul li {
position: relative;
float: left;
width: 20%;
}
#g_navi ul li a {
display: block;
padding: 17px 5%;
width: 90%;
color: #fff;
text-align: center;
text-decoration: none;
}
上からCSSの意味を解説していきます。
ul要素のoverflowプロパティは、子孫要素のli要素で使っているfloatプロパティの影響をナビゲーション内に限定するために指定しています。
li要素のfloatプロパティは横並びにする肝となっているプロパティです。
先頭から順に左詰めとなるよう、「float: left;」を指定します。
続くwidthプロパティは、親要素の幅いっぱいにメニューを並べるための指定です。
今回は5つのメニューが並ぶため、「100% / 5」で「20%」としています。
もしメニューボタンが4つだとしたら「25%」になり、6つだと「16.6%」のようになります。
また、この横幅は自動的に計算するようにcalc関数を使って「width: calc(100%/5);」と記述することも可能です。
li要素の子孫要素にあたるa要素については、単体で親要素の幅いっぱいをリンク領域にするために「display: block;」を指定します。
displayプロパティを使って横に並べる
続いて、displayプロパティの「inline-block」を指定して横に並べる方法を解説します。
HTMLは基本的には同じものを使いますが、こちらの方法ではli要素の改行を除いて1行に続けて記述します。
HTMLのマークアップ例
<nav id="g_navi">
<ul>
<li><a href="/">ホーム</a></li><li><a href="/concept">コンセプト</a></li><li><a href="/menu">メニュー</a></li><li><a href="/access">アクセス</a></li><li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
CSSのコード例
#g_navi ul {
margin: 0 auto;
padding: 0 3%;
width: 94%;
max-width: 960px;
}
#g_navi ul li {
position: relative;
display: inline-block;
width: 20%;
}
#g_navi ul li a {
display: block;
padding: 17px 5%;
width: 90%;
color: #fff;
text-align: center;
text-decoration: none;
}
こちらの方法ではul要素にoverflowプロパティを記述しません。
代わりに、li要素のdisplayプロパティで「inline-block」を指定します。
li要素の子孫要素であるa要素は変更ありません。
先述のfloatプロパティを使った方法と比べるとCSSは少しシンプルになりますが、HTMLコードでメニューの要素を1行で記述する必要があるため少しHTMLが見づらくなってしまう点がデメリットと言えそうです。
ちなみに、こちらの方法でli要素の改行を残して表示すると次のよに表示崩れが起こります。

原因はインラインの中に改行コードの幅が含まれ、「20% * 5 + 改行コードの幅」という計算で結果として横幅の合計値が100%を超えてしまうためです。
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。