コンテンツへスキップ

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

横並び

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

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

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

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

１. floatを使う

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

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

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

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

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

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

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

<ul>
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
  <li>Menu4</li>
</ul>

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

li {
  float: left;
}

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

回り込みの解除が必要

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

その対策として親要素(ここではul)にclass="clearfix"を付けて、このclassに回り込み解除のCSSを書きます。

<ul class="clearfix">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
  <li>Menu4</li>
</ul>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
li {
  float: left;
}

ここでは横並びさせたい要素の親要素の直後に回り込みを解除したいので、親要素に設定した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. 

floatを使う時はclearfixとセットで使いましょう。

２. inline-blockを使う

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

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

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

<ul>
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
  <li>Menu4</li>
</ul>

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

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

li {
  display: inline-block;
}

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

隙間が空いてしまう対処法① 「font-size:0;」

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

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

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

li {
  display: inline-block;
  font-size: 16px; /* 隙間対策でfont-size:0;にした分の対応 */
}

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

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

隙間が空いてしまう問題の対策②「letter-spacing」

ul {
  letter-spacing: -.4em /* 文字間を詰めて隙間をなくす */
}

li {
  display: inline-block;
  letter-spacing: normal; /* 文字間を元に戻す */
}

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

３. flexboxを使う

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

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

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

<ul>
　　<li>Menu1</li>
　　<li>Menu2</li>
　　<li>Menu3</li>
　　<li>Menu4</li>
</ul>

CSSは以下のように書きます。

ul {
	display: flex;
}

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

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

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

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

レッスンをする

この３つの横並びのレッスンを下記URLに用意しているので利用してください。

https://lesson.smartpocke.com/lesson-sidebyside/

４. CSS Gridを使う

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

タグ: