CSS3勉強会のフォローアップ其の3

またまた勉強会のフォローアップ続きです。

フレキシブルボックスレイアウト

dispaly:flex　フレキシブルボックスレイアウト

displayプロパティの値にflexを指定するだけで子要素は横に並びます。

.flex01{
     width:500px;
     display:-webkit-flex;
     display:flex;
     border:1px solid #000;
}
.flex01 > p{
     padding:1em;
}

<div class="flex01">
<p>フレキシブルボックスレイアウトのサンプルテキストです。</p>
<p>フロートやポジションを使用しなくても段組みが作れるようになります。</p>
<p>フレキシブルボックスレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。</p>
</div>

フレキシブルボックスレイアウトはまだ仕様が固まっていないようなので今後に注目しましょう。

その他今すぐ使えるCSS3

box-sizing　ボックスサイジング

ボックスモデルの横幅の計算方法が選べます。
box-sizing:content-box　css2.1までの計算方法
box-sizing:border-box　widthで指定した幅にpaddingとborderのサイズを含める

.boxsizing01{
     width:500px;
     padding:1em;
     border:1px solid #000;
     -webkit-box-sizing:content-box;/*css2.1*/
     -moz-box-sizing:content-box;/*css2.1*/
     box-sizing:content-box;/*css2.1*/
     margin-bottom:1em;
}
.boxsizing02{
     width:500px;
     padding:1em;
     border:1px solid #000;
     -webkit-box-sizing:border-box;/*css3*/
     -moz-box-sizing:border-box;/*css3*/
     box-sizing:border-box;/*css3*/
}

<div class="boxsizing01">
box-sizing:content-box;/*これまで通り*/
</div>
<div class="boxsizing02">
box-sizing:content-box;/*css3*/
</div>

transform　変形

移動・拡大縮小・回転・歪みなどの変形が指定できます。

.transform00{
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:translate(0,0);/*移動なし*/
     -moz-transform:translate(0,0);/*移動なし*/
     transform:translate(0,0);/*移動なし*/
     margin-bottom:1em;
}
.transform01{/*移動*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:translate(40px,20px);/*右に40px下に20px移動*/
     -moz-transform:translate(40px,20px);/*右に40px下に20px移動*/
     transform:translate(40px,20px);/*右に40px下に20px移動*/
     margin-bottom:1em;
}
.transform02{/*拡大縮小*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:scale(1.5,0.5);/*幅が1.5倍。高さが0.5倍*/
     -moz-transform:scale(1.5,0.5);/*幅が1.5倍。高さが0.5倍*/
     transform:scale(1.5,0.5);/*幅が1.5倍。高さが0.5倍*/
     margin-bottom:1em;
}
.transform03{/*回転*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:rotate(45deg);/*45度回転*/
     -moz-transform:rotate(45deg);/*45度回転*/
     transform:rotate(45deg);/*45度回転*/
     margin-bottom:1em;
}
.transform04{/*拡大縮小で変形の基準点を変更*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:scale(1.5,0.5);
     -moz-transform:scale(1.5,0.5);
     transform:scale(1.5,0.5);
     -webkit-transform-origin:0 0;/*左上基準（デフォルトは中心50%50%）*/
     -moz-transform-origin:0 0;/*左上基準（デフォルトは中心50%50%）*/
     transform-origin:0 0;/*左上基準（デフォルトは中心50%50%）*/
     margin-bottom:1em;
}

<div class="transform00">
移動なし
</div>
<div class="transform01">
右に40px下に20px移動
</div>
<div class="transform02">
幅が1.5倍。高さが0.5倍
</div>
<div class="transform03">
45度回転
</div>
<div class="transform04">
変形の基準点を変更
</div>