スポンサーリンク

グローバルナビなど横並びのメニューを作成するときに float や position を使う方法がありますが、今回は一行追加するだけで横並びになる便利なコードを紹介します♪


 

display:inline-block; を使って横並びにする方法

【 display:inline-block; 】
インラインレベルのブロックコンテナを生成します。インライン要素のような表示形式ですが内部はブロックボックスで高さや横幅、margin、paddingを指定できます。

css の li に display:inline-block; を追加します。

HTML

<nav>
    <ul class="global-nav">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
    </ul>
</nav>

CSS

.global-nav li {
    display: inline-block;
	list-style: none;
}
.global-nav li a {
	display: block;
	text-decoration: none;
	background: #ff69B4;
	color: #fff;
    padding: 15px 30px;
}
.global-nav li a:hover {
	opacity: 0.5;
}

横並びにできました。ただ li と li の間に隙間が空きます。この隙間を詰めたいときは li の親要素 ul に font-size:0; を指定し、 li に任意のサイズで font-size:***px; を指定します(ここでは font-size:14px;に指定しています)。

CSS

.global-nav {
	font-size: 0;
}
.global-nav li {
    display: inline-block;
	list-style: none;
	font-size: 14px;
}
.global-nav li a {
	display: block;
	text-decoration: none;
	background: #ff69B4;
	color: #fff;
    padding: 15px 30px;
}
.global-nav li a:hover {
	opacity: 0.5;
}

これで隙間が詰まりました♪いっちょあがりです。

 

FlexBoxの display:flex; を使って横並びにする方法

【 FlexBox 】
FlexBoxは「CSS Flexible Box Layout Module」の略称です。その名の通りフレキシブル(柔軟)にボックスレイアウトを組めるCSSの一つです。 display:flex; はそのFlexboxを定義するために使うものです。

css の ul に display:flex; を追加します。

HTML

<nav>
    <ul class="global-nav">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
    </ul>
</nav>

CSS

.global-nav {
	display: flex;
}
.global-nav li {
	list-style: none;
}
.global-nav li a {
	display: block;
	text-decoration: none;
	background: #ff69B4;
	color: #fff;
    padding: 15px 30px;
}
.global-nav li a:hover {
	opacity: 0.7;
}

こちらは li と li の間に隙間が空きません!
Flexboxはその他にもできる事がたくさんあります。そして、Flexboxに対応したブラウザが増えてきました。これから実務で使う機会が増えてくると予測されるのでいろいろチェックしてみてください♪

 

尚、Smart Pocke はシンプルな内容で簡潔に紹介することを心掛けています。
それに伴い、この記事では古いブラウザに対応する際に必要なベンダープレフィックス( -webkit- や -moz- )などの記述を省かせてもらっています。上記の方法で動作が上手くいかない場合などは他に対処する必要がありますのでご了承ください。

ベンダープレフィックスについての参考サイト
CSS webkitとかmozって何?

スポンサーリンク