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

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

基本の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も大きな基本構造で利用するよりは、各所での細かい配置を指定するほうが理にかなっているかもしれませんね。

3D立体パズルサグラダ・ファミリア

posted with カエレバ

ハートアートコレクション 2012-10-12

Amazon

楽天市場

Yahooショッピング

まとめ

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

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