レイアウトについて(1/4) – css3を触ってみて思った4個の利点
このブログをリニューアルして思ったこと
やっぱりCSS3は便利でした。
自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。
- レイアウト組むのが楽ちん
- セレクタが便利
- 画像に頼らず色々出来る
- アニメーションが素敵
といった4点が利点かなー なんて思いました。
本日はレイアウトについて便利だったことを書いてみます。
詳細は続きで。
まず始めに
css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。
css3からは違う概念でレイアウトを組むことが可能になっています。
表示確認には、Firefox3.5、Chrome4を使用しています。
※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっているので、そのような記述が必要となります。（IEは今のところ対応していないので書かないでいいかもですが、念のため…気になる方は抜いちゃってください）
しばらくは4つ書いておけば無難だと思います。
多分下の4つさえ抑えておけばcss3でのレイアウトは困らないかと思います。
- display:box;
- box-flex:1;
- box-ordinal-group:1;
- box-sizing:border-box;
詳細は下で説明します。
子要素を横に並べる「display:box;」
子要素を横並びに表示させます。対象子要素の横幅は指定しない限りはコンテンツの中身に依存します。
サンプルはこちらdisplay:box;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
Mozilla系だと子要素に指定した上下のpaddingがうまいこと表示されていません。
原因がわかり次第解決策を載せたいと思います。
要素をフレキシブルな横幅にする「box-flex:1;」
親要素がdisplay:box;のときに設定した割合で横幅をフレキシブルに変化させる。
兄弟要素にbox-flex:1;とbox-flex:2;があった場合1:2の割合で横幅を使います（33%と66%という感じ）
サンプルはこちらbox-flex:2;
-webkit-box-flex:2;
-moz-box-flex:2;
-ms-box-flex:2;
要素の表示順を決める「box-ordinal-group:1;」
親要素がdisplay:box;のときに子要素の表示させる順番を決める。
z-indexのように優先順位を設定することが可能で、数値の値が低いものほど左側に表示される。
サンプルはこちらbox-ordinal-group:2;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
-ms-box-ordinal-group:2;
width+padding+borderをwidthとしてしまう「box-sizing:border-box;」
width+padding+borderをwidthとして計算する。
たとえばcss2だとwidth:100%;とpadding:20px;とした場合、40pxはみ出てしまいますが、この指定をすることによって、paddingを20px保持しながらはみ出すことなく表示することが可能になります。
サンプルはこちらbox-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
まとめ
- css3をうまく使うことで、カラム落ちも起きにくくなり今までよりもわかりやすくレイアウトが出来ます。
- ただ、IEが対応しておらず、IE9でも今のところ対応が絶望的なため、そこがネック
- でも楽しいし、判りやすいし使ってみたほうが良いよ！
と若干まとめかどうかあやしいですが、こんな感じになります。
他の3項目についてはまたの機会に！
