ブロック要素を横並びにする方法 [CSS]

ブロック要素を横並びにする主な方法を4つ紹介します。

ブロック要素の横並びをよく使う場面はナビゲーションやメインコンテンツとサイドバーの並びやギャラリーページなどがあります。

今回は違いが分かりやすいようにどれも同じ表示になるナビゲーションを例にしています。

実際には用途別に使い分けると良いです。

1. floatを使う

float プロパティを使うことで左右のどちらかに寄せて配置することができます。

float: left;で最初の要素が左に寄り、次の要素がそれの右側に回り込み横並びになります。

float: right;はその逆で右に寄り、左に回り込みます。

注意するところは回り込みを解除しないと常に回り込みの状態なのでレイアウトが崩れる原因になります。

floatの回り込みはclear: both;で解除することができます。

floatを使ったナビゲーションの作り方

ブロック要素の横並びはナビゲーションやメニューなどに使われるので、それを想定したHTMLを書いていきます。

<nav>
    <ul class="clearfix">
      <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>

このHTMLに対してのCSSは以下のようになります。

横並びにしたい要素(ここではli)にfloat: left;を入れて横並びにしています。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
nav ul {
  list-style: none;
}
nav ul li {
  float: left;
  background: #3691ed;
}
nav ul li:hover {
  opacity: .7;
}
nav ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 1em 2em;
}

回り込みの解除が必要

先ほど書いたようにこのままでは回り込みしたままでレイアウト崩れが起きる可能性があります。

その対策として、あらかじめHTML書いたclass="clearfix"に回り込み解除のCSSを書いていきます。

ここでは横並びしたい要素の親要素の直後に回り込み解除したいので、親要素に設定した.clearfix::afterを付けます。

セレクタの後ろに::afterを付けるとその要素(ここではul)の最後にCSSが機能します。

そしてこのセレクタにcontent: ""; display: block; clear: both;の 3つのプロパティと値を記述して回り込み解除の完成です。

content: ""; は基本的に""の中に文字や記号などを入れ、その文字や記号をブラウザに表示させますが、何も記述しない場合は空の状態になります。

display: block; はその空の値をブロック要素にしています。

空のブロック要素にclear: both;を付けることで回り込み解除をしています。

一見ややこしいですが、このclearfixを1つ用意しておくと別の箇所でfloatを使った時にclass="clearfix"を指定するだけで使い回しが利くようになります。

以下はfloatで横並びにしたナビゲーションをブラウザで表示した時のイメージです。

See the Pen 横並び|float by Hitoshi Matsumoto (@aether14) on CodePen.

2. inline-blockを使う

displayプロパティの値にinline-blockを使うことで横並びの配置ができます。

これはブロック要素をインライン要素のように扱うことができる効果を持っています。

HTMLはさっきと同様でナビゲーションを想定した書き方です。

<nav>
    <ul>
      <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>

inline-blockは回り込みをし続けることがないのでclearfixは使いません。

CSSの書き方は以下になります。

nav ul {
  font-size: 0; /* 隙間空けないための対策 */
  list-style: none;
}

nav ul li {
  display: inline-block;
  font-size: 16px; /* 隙間対策でfont-size:0;にした分の対応 */
  background: #3691ed;
}
nav ul li:hover {
  opacity: .7;
}
nav ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 1em 2em;
}

横並びにしたい要素(ここではli)の部分にdisplay: inline-block; を記述するとブロック要素はインライン要素のような機能を持つので横並びになります。

隙間が空いてしまう問題の対策

注意点もあります。inline-blockを使うと要素と要素の間に隙間が空く問題があります。

これの対策として横並びにしたい親要素(ここではul)にfont-size: 0;を入れると隙間が埋まります。

ただし、これをするとliの中身に文字があった場合、文字サイズが0になり表示されなくなるので、必ずlifont-sizeプロパティとその値を書きます。

See the Pen 横並び|inline-block by Hitoshi Matsumoto (@aether14) on CodePen.

3. flexboxを使う

flexboxは比較的新しい書き方になります。

PC、タブレッド、スマホなどデバイズの画面サイズが異なってもそれぞれに合わせたレイアウトやデザインにするレスポンシブWebデザイン対応のサイトを作る場合にflexboxは良く使われます。

HTMLの書き方は他と同じです。

<nav>
    <ul>
      <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は以下のように書きます。

nav ul {
	display: flex;
	list-style: none;
}
nav ul li {
	background: #3691ed;
}
nav ul li:hover {
  opacity: .7;
}
nav ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 1em 2em;
}

横並びにしたい要素の親要素にdisplay: flex;を書きます。

ブラウザに表示すると以下のようになります。

See the Pen 横並び|flex by Hitoshi Matsumoto (@aether14) on CodePen.

flexboxはいろいろな使い方ができるので、別の記事で詳しく紹介していきます。

4. CSS Gridを使う

CSS Gridは古いバージョンのブラウザでなど対応していないものも少なくないですが、これから主流になるかもしれない便利なCSSの書き方です。

これはまた後ほどご紹介します。

カテゴリー: Webタグ: