フェンリル

Developer's Blog

CSS3 の使えると便利なプロパティ

WebDevBlogTitle

こんにちは!WEB 担当の青野です。

そろそろ CSS3 でのコーディングも(趣味で)するようになってくると思うので、
レイアウトコーディング時などで個人的によく使いそうなものや、すべてのブラウザでサポートしてほしいものをまとめてみました。

ブラウザのバージョンは、以下の環境での確認となっています。

Safari:5.0.5
Google Chrome:12.0.742.100
Firefox:4.0.1&5.0
Opera:11.11
Internet Explorer:9

background-size

背景画像のサイズを指定する。

対応ブラウザ

Safari、Chrome、Firefox、Opera、IE9

説明

background-size: 横幅 縦幅;
auto
長さ指定(100px など)
% 指定
contain(縦横比を保持し、背景表示領域に収まる最大サイズで表示)
cover(縦横比を保持し、背景表示領域を完全に覆う最小サイズで表示)

コード

  1.  .demo1 {
  2.   background: url(./images/css3_ico.jpg);
  3.   background-size: 20px 30px;
  4.  }
  5.  .demo2 {
  6.   background: url(./images/css3_ico.jpg);
  7.   background-size: contain;
  8.  }
  9.  .demo3 {
  10.   background: url(./images/css3_ico.jpg);
  11.   background-size: cover;
  12.  }

背景画像のサイズを指定する:background-size: 20px 30px;

背景画像のサイズを指定する:background-size: contain;

背景画像のサイズを指定する:background-size: cover;


background-origin

背景画像の基準になる位置を指定する。

対応ブラウザ

Safari、Chrome、Firefox

説明

background-origin:
padding-box (padding を含めた領域)
border-box (border を含めた領域)
content-box (content 領域のみ)

コード

  1.  .demo1 {
  2.   background: url(./images/css3_ico.jpg) no-repeat;
  3.   background-origin: padding-box;
  4.  }
  5.  .demo2 {
  6.   background: url(./images/css3_ico.jpg) no-repeat;
  7.   background-origin: border-box;
  8.  }
  9.  .demo3 {
  10.   background: url(./images/css3_ico.jpg) no-repeat;
  11.   background-origin: content-box;
  12.  }

背景画像の基準位置:background-origin:padding-box;

背景画像の基準位置:background-origin:border-box;

背景画像の基準位置:background-origin:content-box;


background

背景画像を複数指定する。

対応ブラウザ

Safari、Chrome、Firefox、Opera、IE9

説明

background: 指定を, カンマで, 区切る;

コード

  1.  .demo {
  2.   background: url(./images/img1.png) no-repeat left top, url(./images/img2.png) no-repeat right top, url(./images/img3.png) no-repeat left bottom;
  3.  }

背景画像の複数指定:background-image:url(./images/img1.png) no-repeat left top, url(./images/img2.png) no-repeat right top, url(./images/img3.png) no-repeat left bottom;


border-image

border に使用する画像を指定する。

対応ブラウザ

Safari、Chrome、Firefox、Opera、IE9

説明

以下のプロパティは border-image で一括指定できる。
border-image-sourse(border に使用する画像を指定する)
border-image-slice(画像の端から内側へスライスする距離を指定し、画像を9つのイメージパーツに分割する)
border-image-width(border 画像の太さを指定する)
border-image-repeat(stretch:伸縮(デフォルト)、repeat:繰り返し、round:整数で繰り返し並ばない場合は拡大縮小して並ぶ、space:整数で繰り返し並びスペースが空く場合は均等にスペースが入る)

コード

  1.  .demo1 {
  2.   -moz-border-image: url(./images/frame.png) 3 7 11 7 / 3px 7px 11px 7px; /* Firefox用 */
  3.   -webkit-border-image: url(./images/frame.png) 3 7 11 7 / 3px 7px 11px 7px; /* Safari,Google Chrome用 */
  4.  }

border-image に使用した画像
border-image に使用した画像

border に使用する画像を指定する:border-image: url(./images/frame.png) 3 7 11 7 / 3px 7px 11px 7px;


border-radius

border を角丸に指定する。

対応ブラウザ

Safari、Chrome、Firefox、Opera、IE9

説明

border-radius:水平方向 / 垂直方向;

コード

  1.  .demo1 {
  2.   border-radius: 5px / 5px;
  3.   border: 2px solid #999;
  4.  }

border を角丸に指定する:border-radius: 5px / 5px;


box-shadow

box に影をつける

対応ブラウザ

Safari、Chrome、Firefox、Opera、IE9

説明

box-shadow:横 下 ぼかし値 影の色;

コード

  1.  .demo1 {
  2.   -webkit-box-shadow: 1px 1px 3px #000; /* Safari用 */
  3.   box-shadow: 1px 1px 3px #000;
  4.  }

box に影をつける:box-shadow: 1px 1px 3px #000;


box-align / box-pack

子要素の配置を指定する

対応ブラウザ

Safari、Chrome、Firefox

説明

このプロパティは、「display:-moz-box;」、「display:-webkit-box;」を指定する必要がある。
box-align:(start:上、center:中央、end;下)
box-pack:(start:左、center:中央、end:右)

コード

  1.  .demo1 {
  2.   display:-moz-box; /* Firefox用 */
  3.   display:-webkit-box; /* Safari,Chrome用 */
  4.   -moz-box-align: start; /* Firefox用 */
  5.   -webkit-box-align: start; /* Safari,Chrome用 */
  6.   -moz-box-pack: start; /* Firefox用 */
  7.   -webkit-box-pack: start; /* Safari,Chrome用 */
  8.  }
  9.  .demo2 {
  10.   display:-moz-box; /* Firefox用 */
  11.   display:-webkit-box; /* Safari,Chrome用 */
  12.   -moz-box-align: center; /* Firefox用 */
  13.   -webkit-box-align: center; /* Safari,Chrome用 */
  14.   -moz-box-pack: center; /* Firefox用 */
  15.   -webkit-box-pack: center; /* Safari,Chrome用 */
  16.  }
  17.  .demo3 {
  18.   display:-moz-box; /* Firefox用 */
  19.   display:-webkit-box; /* Safari,Chrome用 */
  20.   -moz-box-align: end; /* Firefox用 */
  21.   -webkit-box-align: end; /* Safari,Chrome用 */
  22.   -moz-box-pack: end; /* Firefox用 */
  23.   -webkit-box-pack: end; /* Safari,Chrome用 */
  24.  }


box-direction

子要素配置の順序を指定する

対応ブラウザ

Safari、Chrome、Firefox

説明

このプロパティは、「display:-moz-box;」、「display:-webkit-box;」を指定する必要がある。
box-direction:
normal(デフォルト)
reverse:逆

コード

  1.  .demo1 {
  2.   display:-moz-box; /* Firefox用 */
  3.   display:-webkit-box; /* Safari,Chrome用 */
  4.   -moz-box-direction: normal; /* Firefox用 */
  5.   -webkit-box-direction: normal; /* Safari,Chrome用 */
  6.  }
  7.  .demo2 {
  8.   display:-moz-box; /* Firefox用 */
  9.   display:-webkit-box; /* Safari,Chrome用 */
  10.   -moz-box-direction: reverse; /* Firefox用 */
  11.   -webkit-box-direction: reverse; /* Safari,Chrome用 */
  12.  }


box-flex

子要素配置の横幅を比率で指定する

対応ブラウザ

Safari、Chrome、Firefox

説明

このプロパティは、親要素に「display:-moz-box;」、「display:-webkit-box;」を指定する必要がある。
box-flex:値;

コード

  1.  .demo1 {
  2.   -moz-box-flex: 2; /* Firefox用 */
  3.   -webkit-box-flex: 2; /* Safari,Chrome用 */
  4.  }
  5.  .demo2 {
  6.   -moz-box-flex: 3; /* Firefox用 */
  7.   -webkit-box-flex: 3; /* Safari,Chrome用 */
  8.  }

box-flex: 2;

box-flex: 3;


box-reflect

要素を反転させる

対応ブラウザ

Safari、Chrome

説明

box-reflect:
above:上
below:下
left:左
right:右

コード

  1.  .demo1 {
  2.   -webkit-box-reflect: right; /* Safari,Chrome用 */
  3.  }

box-reflect


box-sizing

要素の横幅、縦幅の算出方法

対応ブラウザ

Safari、Chrome、Firefox、Opera、IE9

説明

box-sizing:
content-box:border、padding の大きさを含まない
border-box:border、padding の大きさを含む

コード

  1.  .demo1 {
  2.   box-sizing: content-box; /* Chrome、Opera、IE9用 */
  3.   -webkit-box-sizing: content-box; /* Safari用 */
  4.   -moz-box-sizing: content-box; /* Firefox用 */
  5.  }
  6.  .demo2 {
  7.   box-sizing: border-box; /* Chrome、Opera、IE9用 */
  8.   -webkit-box-sizing: border-box; /* Safari用 */
  9.   -moz-box-sizing: border-box; /* Firefox用 */
  10.  }

これは300pxです。これは300pxです。これは300pxです。padding:20px;です。padding:20px;です。padding:20px;です。

これは300pxです。これは300pxです。これは300pxです。padding:20px;です。padding:20px;です。padding:20px;です。


box-orient

box 要素のレイアウト方向を指定する

対応ブラウザ

Safari、Chrome、Firefox

説明

このプロパティは、「display:-moz-box;」、「display:-webkit-box;」などで box 要素に指定する必要がある。
box-orient:
vertical(子要素を縦に並べる)
horizontal(子要素を横に並べる)

コード

  1.  .demo1 {
  2.   display:-moz-box; /* Firefox用 */
  3.   display:-webkit-box; /* Safari,Chrome用 */
  4.   -moz-box-orient:vertical; /* Firefox用 */
  5.   -webkit-box-orient:vertical; /* Safari,Chrome用 */
  6.  }
  7.  .demo2 {
  8.   display:-moz-box; /* Firefox用 */
  9.   display:-webkit-box; /* Safari,Chrome用 */
  10.   -moz-box-orient:horizontal; /* Firefox用 */
  11.   -webkit-box-orient:horizontal; /* Safari,Chrome用 */
  12.  }

てすと1

てすと2

てすと3

てすと1

てすと2

てすと3


box-ordinal-group

box 要素の子要素の順番を指定する

対応ブラウザ

Safari、Chrome、Firefox

説明

このプロパティは、「display:-moz-box;」、「display:-webkit-box;」などで box 要素に指定する必要がある。
このプロパティは HTML 記述の順番に関係なく表示される順番を指定することができる。
box-ordinal-group:1(順番)

コード

  1.  .demo1 {
  2.   display:-moz-box; /* Firefox用 */
  3.   display:-webkit-box; /* Safari,Chrome用 */
  4.  }
  5.  demo1 p:nth-child(1) {
  6.   -moz-box-ordinal-group:1; /* Firefox用 */
  7.   -webkit-box-ordinal-group:1; /* Safari,Chrome用 */
  8.   background:black;
  9.  }
  10.  demo1 p:nth-child(2) {
  11.   -moz-box-ordinal-group:3; /* Firefox用 */
  12.   -webkit-box-ordinal-group:1; /* Safari,Chrome用 */
  13.   background:yellow;
  14.  }
  15.  demo1 p:nth-child(3) {
  16.   -moz-box-ordinal-group:2; /* Firefox用 */
  17.   -webkit-box-ordinal-group:2; /* Safari,Chrome用 */
  18.   background:green;
  19.  }

てすと1

てすと2

てすと3


column

カラムプロパティの指定をする

対応ブラウザ

Safari、Chrome、Firefox

説明

column-count:2;(カラムの数を指定する)
column-width: 10em;(カラムの幅を指定する)
column-gap: 2em;(カラムの余白を指定する)
column-rule-style: solid;(カラムのボーダースタイルを指定する)
column-rule-width: 1px;(カラムのボーダーの幅を指定する)
column-rule-color: red;(カラムボーダーの色を指定する)
column-rule: 1px solid red;(カラムボーダー一括指定)
column-break-after: (auto / always / avoid:使用方法不明)
column-break-before: (auto / always / avoid:使用方法不明)
column-span: (1 / all:カラムのまたぎ方を指定する)
column-full: (auto / balance:カラムの幅を均等にする)

コード

  1.  .demo1 {
  2.   -moz-column-count:3; /* Firefox用 */
  3.   -webkit-column-count:3; /* Safari,Chrome用 */
  4.   -moz-column-width:100px; /* Firefox用 */
  5.   -webkit-column-width:100px; /* Safari,Chrome用 */
  6.   -moz-column-gap:10px; /* Firefox用 */
  7.   -webkit-column-gap:10px; /* Safari,Chrome用 */
  8.   -moz-column-rule:5px solid #999; /* Firefox用 */
  9.   -webkit-column-rule:5px solid #999; /* Safari,Chrome用 */
  10.  }

カラム1

カラム2

カラム3


以上が個人的に使えると便利なプロパティ一覧になります。
まだまだ各ブラウザの独自実装が多いですが、
これらのものが使えるようになるとコーディングもすごく楽になりますね。

Twitterフェンリルのオフィシャルアカウントをフォローする

Facebook コメント

コメント

ななし2012年03月07日 13:47

box-orientの説明部分のverticalのスペルが、varticalになっていますよー。

青野2012年03月08日 17:13

> ななし さん
ご指摘ありがとうございます。
該当箇所を修正しました。

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。