floatを使わないボックスレイアウト

通常2カラム、3カラムのレイアウトを組む場合、floatプロパティを使用しますが、
CSS3のboxプロパティを使用すると、より簡単にレイアウトを組むことができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

<div class="boxarea">
<div class="box1">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</div>
<div class="box2">
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
</div>
<div class="box3">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
</div>
</div>
.boxarea {
display:-moz-box;
display:-webkit-box; 
}

.boxarea div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:5px;
width:200px;
line-height:1.6;
}

.box1 {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
background-color:#FFFFB4;
margin:0px 15px 0px 0px;
}

.box2 {
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
background-color:#E6F5AF;
margin:0px 15px 0px 0px;
}

.box3 {
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
background-color:#CDEBC3;
}

大本のボックスに対してdisplay:box;を指定します。
ボックスの並び順はbox-ordinal-groupにて数字で指定し、簡単に入れ替えが可能です。

※それと1つ注意点としてボックスの幅・高さの計算方式。
display:box;使用した場合、現時点でFirefoxでは、幅・高さにpadding、borderの値が含まれて表示されます。
しかしGoogle Chrome・Safari系では、padding、borderの値が含まれないため表示に違いが出てきます。
box-sizing:border-box;を指定すると、
Chrome・Safari系でもpadding、borderの値が含まれて表示されるので、
現時点ではbox-sizing:border-box;の指定をした方が良いようです。
※なおFirefoxでのdisplay:box;はちょっと挙動に問題があったりするようです。

blog.wonder-boys.netさんの

display:box;の挙動がブラウザによって違うみたい

の記事が参考になりました。

なおIE(IE9でも)ではdisplay:box;は現時点では非対応なので、
まだ実用には難しいかなと個人的には思います。
便利なプロパティだと思うのでIEでも対応できるよう、今後に期待したいところです。

2 Responses to “floatを使わないボックスレイアウト”

  1. 菊池崇 より:

    すばらしい記事ありがとうございます。別件で色々と調べ物をしていたらたどり着きました。flex-box ですが、おそらく執筆の時点で仕様書が書き変わっていませんでしたか?FlexboxのエディターのTabとやり取りをしていたので、変更されていたはずなのですが。個人的には変更して欲しくなかった派ではありますが。

    • kimuray より:

      菊池崇さん、コメント頂きありがとうございます。
      確かにfirefoxで表示を確認したところ、どうも適用されていないようです。
      ご指摘ありがとうございました。
      仕様の方も確認修正しておきたいと思います。

      (追記)
      Firefoxでの表示に関してですが、

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

      -moz-boxを先に記述しないと駄目なようでした。
      自分も少し調べてみましたが、Firefoxではちょっと挙動がおかしかったりするようですね。
      どちらかに統一してほしいなあ、悩ましく思います。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る