【お試し無料】本を、聴こう。

CSSでボックスを横並びでグリッドデザインしちゃう方法まとめ

<景品表示法に基づく表記>本サイトには広告が含まれる場合があります。


CSSで横並びを実現する方法はいくつもありますが、ちょっとした挙動の違いや注意点も含めて見ていきます。利用箇所に合わせて適切なCSSを選択できるように、定番CSSからおにゅーなCSSまで実際に目で見て比較していきましょう。横並びでグリッドデザインなんかもお手軽に実装しちゃえたら便利ですね!

SPONSORED LINK

目次

基本のHTML・CSS

ベースとなるHTMLとCSSです。ボックス3つとその親DIVで構成しています。ピンクのボックスをCSSで横並びを目指します。

<div class="boxWrap">
  <div class="boxCh">BoxA</div>
  <div class="boxCh">BoxB</div>
  <div class="boxCh">BoxC</div>
</div>
.boxWrap .boxCh {
  height: 120px;
  width: 120px;
  margin: 10px;
  padding: 10px;
  border: solid 1px #AAA;
  background: #fe9cab;
}

そのまま表示

BoxA
BoxB
BoxC

はい。もちろんそのまま表示しただけではDIVのブロック要素で縦に並びますね。これをCSSで効率的に横並びのグリッドデザインにしていきましょう。
各CSSで得意な場面と不得手な場面がありますので、レイアウト設計でうまく利用したいですね。

display:flex;

今まで「display:box ⇒ display:flexbox ⇒ display:flex」と移り変わりの激しいCSS3のフレキシブルボックスレイアウトです。その分、本気で確立した仕様に仕上げようとしているのが伺えます。たしかにめちゃくちゃ簡単ですからね。

flex-direction: row;

.boxWrap{
  display: flex;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-direction: row;
  -moz-flex-direction: row;
  -o-flex-direction: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
}
BoxA
BoxB
BoxC

横並びにする為に各要素に指定するのではなく、親要素に指定するだけで実現できます。flex-direction: row;はデフォルト値ですので省略できますが別の指定と分別しやすいように記述しています。

flex-direction: row-reverse;

.boxWrap{
  display: flex;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -o-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
}
BoxA
BoxB
BoxC

横並びが逆順で始まっていると思います。row-reverseを指定するだけなので、複雑なプログラムも必要ありませんので便利ですね。新しい順と古い順の切り替えがCSSだけで実現できそうな予感も心躍ります。

display:table-cell;

要素をテーブルのセルのように扱えて、リキッドレイアウトにも万能なtable-cellで横並びを行います。セル扱いなのでtable-layout:fixedの指定で横幅を自動で均等化配置もできるので、場面によってはとっても使えそうです。

.boxWrap{
  display:table;
}
.boxCh {
  display:table-cell;
}
BoxA
BoxB
BoxC

見事な横並びですがmarginの効果がなくなっています。あくまでテーブル扱いなのでmarginという概念がなくなるわけですね。paddingは生きています。この文章もmarginが消えたおかげでボックスの下にくっつきそうになっているのがおわかり頂けると思います。手軽にグリッドデザインというよりはレイアウトやナビゲーションバーなどにかなり役立ちそうですね。

display:inline-block;

ブロック要素をインライン化して横に並べるCSSですね。基盤となる大きなデザインには向かないかもしれませんが、細かい部分で多用できそうな手軽さと直感的に利用できるので重宝しそうです。

.boxCh {
  display: inline-block;
}
BoxA
BoxB
BoxC

素敵なグリッドでボックスが横並びになっていますね。ちょっとした問題点としてmargin:0でも消えない隙間がdisplay: inline-blockには存在します。ちょっと確認してみましょう。

margin:0;

.boxCh {
  display: inline-block;
  margin:0;
}
BoxA
BoxB
BoxC

margin:0;にも関わらず隙間が生まれてしまうんです。これはHTML側の改行を埋めるか、コメントアウトで埋めることで対処は可能ですが、コーディングしていく上で手間が増えることは否めませんね。

float:left;

皆さんご存知のfloatです。指定すると親DIVの高さが消えたりと力技感がぷんぷんしますが、レイアウトでfloatの存在は大きな武器になっているサイトも多いですよね。ちなみに高さを復元するには、親要素にoverflow: hidden;を指定してあげると表示されますね。

.boxWrap {
  overflow: hidden;
}
.boxCh {
  float: left;
}
BoxA
BoxB
BoxC

どうでしょう。使える場面は多いのですが、IEのバグの話や挙動の話をしていくとfloatを使わずに横並びにする方法の方がいいのかもしれません。floatも大きな基本構造で利用するよりは、各所での細かい配置を指定するほうが理にかなっているかもしれませんね。

まとめ

もうこれからの時代は横並びでレイアウトを組んでいく時代と言っても過言じゃないほど重要な要素になってきています。まぁ嘘ですが。でもレスポンシブやリキッドで利用頻度が高まってきているので、縦長のサイト構成よりも横を上手く利用するサイトの方が見やすいですよね。しかも多様化するデバイスサイズにも臨機応変に対応できますので。せっかくデザインを見直したり新規設計するなら将来性のあるデザインの選択が望ましいですよね!紹介したflexが完全に定着すればものすごく便利ですよね!

今日も知識欲は止まらない。

SPONSORED LINK
トップへ戻る