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が完全に定着すればものすごく便利ですよね!

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

関連トピック

css

サイト全体がずれる css スクロールバー ページの高さが長い場合

ページの高さが長い場合にスクロールバーが表示され、 サイト全体がずれる現象の対処方法メモ 一画面で収まる内容のセンタリングされたペー

html

仮バナー・模擬バナーを設置してサイズ確認しながらコーディング

サイトデザインで、この部分にこのサイズの画像を置いたらどういう配置なるかな? という場面で好きな画像サイズを即配置できる便利サイト。

font-family

CSSのfont-familyで流行で主流の設定はコレだ!

現時点のベストfont-familyだとを色々なサイトを参考に考察してみます。 そんなに急激に変わるものではないですが、常に最新のfo

css-shadow

CSSの枠線は薄っすらシャドウで影を付けるボーダーデザインが素敵

CSSだけで再現できる影付きボーダーはフラットデザインでは中々表現しにくい高級感を出したり、フラットを勘違いした古臭さを除去できると

liquid-layout

リキッドレイアウト作成方法と簡易テンプレート

可変カラムに対応したリキッドレイアウトの作り方と超簡易テンプレートです。 「レスポンシブかリキッドで悩んでいる」という意見は半分間違い

css

スマホでoverflow:auto;を手軽に実装する

スマホでoverflow:auto;を手軽に実装するには、 Android2.X系のバグとか色々あってとっても面倒です。 最近はAn

breakpoint

レスポンシブのブレイクポイントを設定する前に知っておくべきこと

Googleも推奨するレスポンシブウェブデザインですが、最初の設計がしっかりしていれば将来性も上がってメンテナンスにも有利なサイト運営が

公開日:2014/08/24