[CSS3] display:boxを利用した実装サンプル６つ

こんにちは、@yoheiMuneです。
以前のブログで、display:boxがすごく便利ということで紹介させて頂きました。 今回は、display:boxを使った実装サンプルがいくつかたまったので、その実装サンプルをブログに書きたいと思います。

display:boxを用いたレイアウトサンプル

display:boxを利用すると、簡単に横並びレイアウトを実現することが出来ます（詳細は、こちらを参照）。 今回は上記ブログを書いた後に、スマホ向けサイト構築などに実際に用いたサンプルをブログに書きたいと思います。
display:boxは、-webkit-プレフィックスを用いることでiPhoneやAndroidなど多くの端末で利用できるため、実用性が高いCSS3です。

今回紹介する実装例は、以下の６つとなります。

• リストで左にサムネ、右に情報を表示する例
• タイトルラベルで、右端にアイコンを付ける例
• ボタンラベルを上下センタリングする際に、２行になっても真ん中になる例
• 要素の表示順を入れ替えたい場合の例
• ３つのボタンを均等割で表示したい場合
• ラベルとメーターで、左右に配置して上下中央に揃える。

以下では、１つずつ紹介していきたいと思います。

１、リストで左にサムネ、右に情報を表示する

最初は、display:boxの最もメリットと感じている、横並びレイアウトを簡単に実現する方法です。
こんな感じで、左に画像、右に情報を配置したiPhoneのTableVlewのようなスタイルを簡単に実現することが出来ます。

（ソースコード）

<style type="text/css">
.listItem {
  display: box;
  display: -webkit-box;
  display: -moz-box;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.listItem img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
.listItem .info {
  box-flex:1;
  -webkit-box-flex:1;
  -moz-box-flex:1;
}
.small {font-size: small;}
.bold {font-weight: bold;}
</style>
<div class="listItem">
  <img src="/image/s156.png">
  <div class="info small">
    <p class="bold">Company: Apple</p>
    <p>Apple Inc., formerly Apple Computer, Inc., is an American multinational corporation headquartered in Cupertino, California that designs, develops, and sells consumer electronics, computer software and personal computers.</p>
  </div>
</div>
<div class="listItem">
  <img src="/image/s157.png">
  <div class="info small">
    <p class="bold">Company: Microsoft</p>
    <p>Microsoft Corporation is an American multinational software corporation headquartered in Redmond, Washington that develops, manufactures, licenses, and supports a wide range of products and services related to computing.</p>
  </div>
</div>
<div class="listItem">
  <img src="/image/s158.png">
  <div class="info small">
    <p class="bold">Company: Amazon</p>
    <p>Amazon.com, Inc. is an American multinational electronic commerce company with headquarters in Seattle, Washington, United States.</p>
  </div>
</div>

２、タイトルラベルで、右端にアイコンを付ける例

続いて、タイトルなどで右側にアイコンを表示する例です。
タイトルの長さは可変で、決まって右端にアイコンをおくときに、display:boxを使うと便利です。


（ソースコード）

<style type="text/css">
.title01 {
  display: box;
  display: -webkit-box;
  display: -moz-box;
  /* centerを指定すると、各要素が上下中央に整列する */
  box-align:center;
  -webkit-box-align:center;
  -moz-box-align:center;
  height: 40px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
.title01 p {
  height: 20px;
  line-height: 20px;
  margin: 0;
}
.title01 .content {
  /* 可変の長さ部分は。box-flexを指定するといい感じに伸びる */
  box-flex:1;
  -webkit-box-flex:1;
  -moz-box-flex:1;
  margin-left: 10px;
}
.title01 .iconRed {
  margin-right: 10px;
  padding: 2px;
  color: white;
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
}
.title01 .iconBlue {
  margin-right: 10px;
  padding: 2px;
  color: white;
  background: #1e5799; /* Old browsers */
  background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
}
</style>
<div class="title01">
  <p class="content">春色のワンピース</p>
  <p class="iconRed">オススメ</p>
  <p class="iconBlue">期間限定</p>
</div>

３、ボタンラベルを上下センタリングする際に、２行になっても真ん中になる例

display:boxと、box-align:centerを用いることで、 ボタンのラベルが１行表示でも２行表示でも、ラベルを上下中央に配置することが可能になります。
ラベルの上下中央表示は、heightとline-height使う技よりも簡単かも☆

注文を確定する

注文を
確定する

（ソースコード）

<style type="text/css">
.commitBtn {
  display: box;
  display: -webkit-box;
  display: -moz-box;
  /* centerを指定して、ボタンのラベルを中央表示する */
  box-align:center;
  -webkit-box-align:center;
  -moz-box-align:center;
  height: 50px;
  width: 200px;
  margin: 10px auto;
	text-decoration: none;	
  background: #b4ddb4; /* Old browsers */
  background: -moz-linear-gradient(top,  #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(17%,#83c783), color-stop(33%,#52b152), color-stop(67%,#008a00), color-stop(83%,#005700), color-stop(100%,#002400)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* Chrome10+,Safari5.1+ */
}
.commitBtn .label {
  width: 100%;
  color: white;
  text-align: center;
  margin: 0;
  line-height: 100%;
}
</style>
<a class="commitBtn" href="#">
  <p class="label">注文を確定する</p>
</a>
<a class="commitBtn" href="#">
  <p class="label">注文を<br>確定する</p>
</a>

４、要素の表示順を入れ替えたい場合の例

特定の条件では、モジュールの表示順を入れ替えたいという場合があります。
例えばソーシャルゲームのガチャでは、無料ガチャが引ける場合には無料ガチャを画面上に、引かない場合には有料がチャを上に表示するといった例です。
box-ordinal-groupを使うと、HTMLは変えずに(jQueryとかで面倒なDOM入れ替えをせずに)、CSSの変更で要素を入れ替えられます。

---

（ソースコード）

<style type="text/css">
.moduleList {
  display: box;
  display: -webkit-box;
  display: -moz-box;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-align:center;
  -webkit-box-align:center;
  -moz-box-align:center;
}
.moduleList div {
  width: 100px;
  height: 100px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  text-align: center;
  line-height: 100px;
  font-weight: bold;
}
.first {
  box-ordinal-group: 1;
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
}
.second {
  box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
}
</style>
<div class="moduleList">
  <div class="first">無料ガチャ</div>
  <div class="second">有料ガチャ</div>
</div>
<hr>
<div class="moduleList">
  <div class="second">無料がチャ</div>
  <div class="first">有料ガチャ</div>
</div>

５、３つのボタンを均等割で表示したい場合

複数のボタンをリキッドデザインでスペースとかをいい感じに並べる際にも、display:boxが役立ちます。
均等割の設定（box-pack:justify;）を使うと、ボタン間の間のスペースが自動的に調整されます。

（ソースコード）

<style type="text/css">
.btnList {
  width: 90%;
  margin: 10px auto;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  box-pack:justify;
  -webkit-box-pack:justify;
  -moz-box-pack:justify;
}
.btn1, .btn2, .btn3 {
  display: block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  text-decoration: none;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.8);  
}
.btn1 {
  background-color: #ffff77;
}
.btn2 {
  background-color: #ff77ff;
}
.btn3 {
  background-color: #77ffff;
}
</style>
<div class="btnList">
  <a class="btn1" href="#">ボタン１</a>
  <a class="btn2" href="#">ボタン２</a>
  <a class="btn3" href="#">ボタン３</a>
</div>

６、ラベルとメーターで、左右に配置して上下中央に揃える。

display:boxを使うと、高さの違う要素でも上下中央に表示して表示することが出来て便利な感じです。
以下の例では、ソーシャルゲームの強化とかで良くあるメーターを、高さの違うラベルと左右に並べるサンプルです。
隣の要素の高さに関係なく、上下中央に寄せられるので、応用しやすいスタイルです。


（ソースコード）

<style type="text/css">
.gageStyle {
  display: box;
  display: -webkit-box;
  display: -moz-box;
  box-align:center;
  -webkit-box-align:center;
  -moz-box-align:center;
}
.gageStyle .label {
  margin: 0;
  height: 30px;
  line-height: 30px;
  padding-left: 5px;
}
.gageStyle .gage {
  width: 200px;
  height: 24px;
  border: 1px solid rgba(0,0,0,0.75);
  border-radius: 5px;
  background-color: #ccc;
}
.gageStyle .gage .value {
  height: 24px;
  border-radius: 4px;
  background-color: orange;
}
</style>
<div class="gageStyle">
  <p class="label">ゲージラベル：</p>
  <div class="gage">
    <div class="value" style="width:80%"></div>
  </div>
</div>

最後に

1ヶ月ほど前に知ったdisplay:box。実際に使ってみると便利なことが多くて、良く利用しています。
今はスマホ向けなので積極的に利用できていい感じです。
今後もこんな便利な使い方あったなど、記事を書いていければいいなぁと思う今日この頃。

最後までご覧頂きましてありがとうございました。