レイアウトについて(1/4) – css3を触ってみて思った4個の利点

CSS, 備忘録, 初心, 戯言

このブログをリニューアルして思ったこと

やっぱりCSS3は便利でした。
自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。

  1. レイアウト組むのが楽ちん
  2. セレクタが便利
  3. 画像に頼らず色々出来る
  4. アニメーションが素敵

といった4点が利点かなー なんて思いました。

本日はレイアウトについて便利だったことを書いてみます。
詳細は続きで。

まず始めに

css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。
css3からは違う概念でレイアウトを組むことが可能になっています。
表示確認には、Firefox3.5、Chrome4を使用しています。

※ちなみに説明する中で「-webkit-」(Webkit系)「-moz-」(Mozilla系)「-ms-」(IE系)などのプロパティがありますが、ブラウザごとの独自規格扱いになっているので、そのような記述が必要となります。(IEは今のところ対応していないので書かないでいいかもですが、念のため…気になる方は抜いちゃってください)
しばらくは4つ書いておけば無難だと思います。

多分下の4つさえ抑えておけばcss3でのレイアウトは困らないかと思います。

  1. display:box;
  2. box-flex:1;
  3. box-ordinal-group:1;
  4. box-sizing:border-box;

詳細は下で説明します。

子要素を横に並べる「display: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:1;」
サンプルはこちら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:1;」
サンプルはこちら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保持しながらはみ出すことなく表示することが可能になります。
width+padding+borderをwidthとしてしまう「box-sizing:border-box;」
サンプルはこちらbox-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;

まとめ

  1. css3をうまく使うことで、カラム落ちも起きにくくなり今までよりもわかりやすくレイアウトが出来ます。
  2. ただ、IEが対応しておらず、IE9でも今のところ対応が絶望的なため、そこがネック
  3. でも楽しいし、判りやすいし使ってみたほうが良いよ!

と若干まとめかどうかあやしいですが、こんな感じになります。
他の3項目についてはまたの機会に!

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。