CSS3でDIVを横並びに配置する方法

スポンサードリンク

こんにちは！ぐちです。

CSSで横並びって難しい？

従来はfloatやdisplay:table-cell等を使う必要がありましたがdisplay:boxを使うと簡単に横並びの配置を実現することができます。

難しいことは考えずに(笑)下記のCSSとHTMLを書いてみましょう！

<style type="text/css">
.box {
  /* レイアウトを指定 */
  display: box;
  display: -webkit-box;
  display: -moz-box;

  /* アイテムを左右中央寄せにする */
  box-pack: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;

  background-color:#c0c0c0;
}
.item {
  width: 50px;
  height: 50px;
  font-size: 28px;
  text-align: center;
  line-height:50px;
  color: #000;
  margin: 10px;
}
</style>
<div class="box">
    <div class="item" style="background-color: #f00;">1</div>
    <div class="item" style="background-color: #0f0;">2</div>
    <div class="item" style="background-color: #00f;">3</div>
</div>

下記のように横一列にdivが並びましたね。どうです？すごく簡単でしょ？コードの可読性も高まります。style属性をitemに書いているので汚いですけどね。。

他にも下記のような属性があります。

box-orient

これは縦方向や横方向など子要素の並ぶ向きを指定することができる属性です。例えば下記のように書くと縦方向に並べることができます。

.box {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  /* アイテムを縦一列に並べる */
  box-orient: vertical;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;

  background-color:#c0c0c0;
}

box-pack

横並びにした際に子要素の並び方を左寄せ、中央寄せ、右寄せ、均等間隔のいずれかで指定することができます。

左寄せ

.box {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  box-pack:start;
  -webkit-box-pack:start;
  -moz-box-pack:start;

  background-color:#c0c0c0;
}

中央寄せ

.box {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  box-pack:center;
  -webkit-box-pack:center;
  -moz-box-pack:center;

  background-color:#c0c0c0;
}

右寄せ

.box {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  box-pack:end;
  -webkit-box-pack:end;
  -moz-box-pack:end;

  background-color:#c0c0c0;
}

均等間隔

.box {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  box-pack:justify;
  -webkit-box-pack:justify;
  -moz-box-pack:justify;

  background-color:#c0c0c0;
}

box-align

ボックス内の子要素の縦方向の位置決めを行う属性です。

上寄せ

.box {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  box-pack:justify;
  -webkit-box-pack:justify;
  -moz-box-pack:justify;

  box-align: start;
  -webkit-box-align: start;
  -moz-box-align: start;

  background-color:#c0c0c0;
}
.item:nth-child(2) {
  height: 100px;
  line-height: 100px;
}

下寄せ

.box {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  box-pack:justify;
  -webkit-box-pack:justify;
  -moz-box-pack:justify;

  box-align: end;
  -webkit-box-align: end;
  -moz-box-align: end;

  background-color:#c0c0c0;
}
.item:nth-child(2) {
  height: 100px;
  line-height: 100px;
}

センター寄せ

.box {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  box-pack:justify;
  -webkit-box-pack:justify;
  -moz-box-pack:justify;

  box-align: center;
  -webkit-box-align: center;
  -moz-box-align: center;

  background-color:#c0c0c0;
}
.item:nth-child(2) {
  height: 100px;
  line-height: 100px;
}

ベースライン寄せ

.box {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  box-pack:justify;
  -webkit-box-pack:justify;
  -moz-box-pack:justify;

  box-align: baseline;
  -webkit-box-align: baseline;
  -moz-box-align: baseline;

  background-color:#c0c0c0;
}
.item:nth-child(2) {
  height: 100px;
  line-height: 100px;
}

その他の属性

上記の他にも様々な属性を指定することができ非常に便利なCSSなので覚えておいて損はしません！対応ブラウザの問題等もつきまとうとは思いますがぜひ活用して素敵なUIを作ってみてください。