各ブラウザで先行実装しているCSS3プロパティまとめ

カテゴリ:まとめ記事 2009年6月22日 15:35

[10/03/03]
Opera10.50 がリリースされました。それに伴って、Opera10.50 で新しく実装されたプロパティを追加しました。
[10/01/25]
-moz-linear-gradient, -moz-radial-gradient の項目を追加しました。
[10/01/22]
-webkit-border-radius について若干補足を追加しました。

色々と記事を書いてきて、いざ CSS3 を使ってサンプルを作ってみよう、って思ったときに微妙にプロパティ名とかを忘れていたのでまとめてみる。ちなみにまだ草案のものもあるのでちょこちょこ更新予定。

漏れているものもあると思うので、もしなにかあったら連絡もらえると助かります。

WebKit 系

(*) は CSS3 で定義された値

項目をクリックすると、詳細が表示されます。

すべて開閉

  • -webkit-background-size

    [使い方] -webkit-background-size: 40px 20px;

    背景画像のサイズを指定します。横 縦の順で記述します。

  • -webkit-background-origin

    [使い方] -webkit-background-origin: padding;

    上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。

    • border (ボーダーまで含めたボックスサイズで算出)
    • padding (パッディング領域まで含めたボックスサイズで算出)
    • content (コンテンツ領域のみのボックスサイズで算出
  • -webkit-background-clip

    [使い方] -webkit-background-clip: padding;

    背景画像を描画する際、border 領域の下から描画するか、padding 領域から描画するかを指定します。border に対して、透過のある画像や、透明度のある色を指定した際に背景が border の下に表示されると問題がある場合などに使うといいと思います。

    • border (ボーダーまで含めたボックスサイズで背景画像を描画)
    • padding (パッディング領域まで含めたボックスサイズで背景画像を描画)
  • Multiple background

    [使い方] backgorund-image: url(sample.png), url(sample2.png)...;

    CSS3 では背景画像を複数指定することができるようになりました。
    カンマ区切りで列挙することで、前面から背面への画像指定が可能です。
    繰り返し処理や配置箇所なども同じようにカンマ区切りで指定します。(それぞれ書かれた位置が画像と対応します)

  • -webkit-border-image

    [使い方] -webkit-border-image: url(sample.png) 4 4 4 4 [round|repeat] / 4px [,4px 4px 4px];

  • -webkit-border-radius

    [使い方] -webkit-border-radius: 5px;

    ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
    CSS Backgrounds and Borders Module Level 3 の勧告案を受けてか、Google Chrome4 では -webkit- のプレフィクスがなくても動作するようになっています。

    • -webkit-border-top-left-radius: 5px;
    • -webkit-border-top-right-radius: 5px;
    • -webkit-border-bottom-left-radius: 5px;
    • -webkit-border-bottom-right-radius: 5px;
  • -webkit-box*

    [使い方] display: -webkit-box;

    この display を指定された要素内のブロック要素(p や div など)は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。

  • -webkit-box-flex

    [使い方] -webkit-box-flex: 1;

    display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。(flex は "フレキシブル" の意味です)
    (※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。

    つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。

  • -webkit-box-ordinal-group

    [使い方] -webkit-box-ordinal-group: 1;

    display: box 内に配置されたブロック要素に指定します。
    指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
    (HTML の記述順序に関わらず出現順序を変更したい際に使用します)

  • -webkit-box-shadow

    [使い方] -webkit-box-shadow: 2px 2px 5px black;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。

  • text-shadow

    [使い方] text-shadow: 2px 2px 5px black;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。

  • -webkit-text-stroke

    [使い方] -webkit-text-stroke: 2px blue;

    テキストにアウトラインを設定します。アウトラインの太さ、幅を指定します。また、以下のプロパティを使うことで個別に設定できます。
    ※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。

    • -webkit-text-stroke-width
    • -webkit-text-stroke-color
  • -webkit-text-fill-color

    [使い方] -webkit-text-fill-color: white;

    テキストの塗りつぶし色を指定します。color と同義ですが、こちらの値を transparent に指定することで、アウトラインのみを表示することが可能になります。
    ※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。

  • -webkit-box-sizing

    [使い方] -webkit-box-sizing: content-box [,border-box];

    ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。

  • -webkit-transition-property

    [使い方] -webkit-transition-property: color, background-color;

    transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。

  • -webkit-transition-duration

    [使い方] -webkit-transition-duration: 0.5s;

    transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。

  • -webkit-transition-timing-function

    [使い方] -webkit-transition-timing-function: ease-in-out;

    transition の変化の具合を設定します。指定できる値は以下の通りです。

    • default
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier() 4つの数字をカンマ区切りで指定
  • -webkit-gradient()*

    [使い方] background-image: -webkit-gradient(linear, left top, left bottom, from( white ), color-stop( 0.3, gray ), to( black ) )

  • -webkit-box-reflect

    [使い方] -webkit-box-reflect: below [0px -webkit-gradient()];

    生成されたボックスなどを反転表示させます。また、透過 PNG 画像や、-webkit-gradient() を使用することで反転した要素にマスクをかけることもできます。

    指定する値は、「above(上)、below(下)、left(左)、right(右)」で位置を、続く px で離れる距離を、最後に PNG 画像の URL か、もしくは -webkit-gradient でマスクを指定します。

  • -webkit-mask-box-image

    [使い方] -webkit-mask-box-image: url(mask.png);

    透過 PNG 画像を指定することで、ボックスにマスクをかけることができます。

  • -webkit-transform

    [使い方] -webkit-transform: rotate(45deg);

    生成されたボックスを変形(transform)させます。
    指定できる値は次の通り。

    rotate(deg)回転(deg で指定。30deg など)
    rotateX(deg)
    rotateY(deg)
    横(縦)回転。-webkit-transform-style、-webkit-transform と組み合わせて使うことで 3D 的表現が可能。(deg で指定。30deg など)
    scale(xy[x,y])拡大・縮小(数値を指定。1 や 0.5 など)
    skew(deg)スキュー(シアー)(degで指定。30deg など)
    translate(xy[x,y])移動(px で指定。30px など)
    perspective(deg)遠近感(数値で指定)
  • -webkit-transform-style

    [使い方] -webkit-transform: preserve;

    上で書いた -webkit-transform の変形の仕方を、2D 表示にするか、3D 表示にするかを指定します。
    指定できる値は次の通り。

    • flat (2D 表示)
    • preserve-3d (3D 表示)
  • -webkit-transform-origin

    [使い方] -webkit-transform-origin: X Y Z;

    transform の基準点を指定します。

  • -webkit-backface-visibility

    [使い方] -webkit-backface-visibility: hidden;

    rotateX などで裏返ったときにコンテンツの裏側を表示するかどうかを指定。

  • @font-face

    [使い方] @font-fase{ font-family: myFont; src: url(font.otf) format('opentype');

    サーバにアップしたフォントを指定し、そのフォントがインストールされていない環境でもフォントが見えるようにする指定です。
    font-family で任意の名前をつけ、src でフォントファイルのパスを指定します。
    ちなみに利用する場合は、任意に付けた名前を指定することで利用できるようになります。
    使用する場合は、ライセンスなどの問題を確認した上で使うよう注意する必要があります

Mozilla 系

  • -moz-max-content(etc.)

    [使い方] width: -moz-max-content

    幅(width)の算出方法を指定するプロパティの値です。新しく追加されたのは以下の通り。

    • -moz-max-content (コンテンツが取り得る最大幅)
    • -moz-min-content (コンテンツが取り得る最小幅)
    • -moz-available (表示に利用可能な幅)
    • -moz-fit-content (内容にフィットさせた幅)
  • -moz-border-image

    [使い方] -moz-border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;

    ボーダーに画像を指定するプロパティです。ちょっと英語なので解釈が合っているか分かりませんが、どうやら仕様が変更になったようです。そのため、若干 webkit 系と指定方法が異なるので注意が必要です。
    [参考:mozilla developer center]

  • -moz-border-radius

    [使い方] -moz-border-radius: 5px;

    ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。(webkit 系と指定方法が異なるので注意)

    • -moz-border-radius-topleft: 5px;
    • -moz-border-radius-topright: 5px;
    • -moz-border-radius-bottomleft: 5px;
    • -moz-border-radius-bottomright: 5px;
  • -moz-linear-gradient*

    [使い方] background-image: -moz-linear-gradient(-90deg,rgb(237, 237, 237) 0%,rgb(204, 204, 204) 40%,rgb(0, 134, 224) 100%)

    線状のグラデーションを指定する値です。(webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です)
    参考URL: https://developer.mozilla.org/en/CSS/-moz-linear-gradient

  • -moz-radial-gradient*

    [使い方] background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)

    円状のグラデーションを指定する値です。(webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です)
    参考URL: https://developer.mozilla.org/en/CSS/-moz-radial-gradient

  • -moz-background-inline-policy

    [使い方] -moz-background-inline-policy: bounding-box;

    インライン要素の背景画像の繰り返し方を指定します。指定できる値は以下の通り。

    • bounding-box (インライン要素全体に対して背景画像を繰り返し表示する)
    • each-box (行ごとに背景画像を繰り返して表示する)
    • continuous (前の行の繰り返しを引き継いで背景画像を表示する)
  • -moz-box*

    [使い方] display: -moz-box;

    この display を指定された要素内のブロック要素(p や div など)は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。

  • -moz-box-flex

    [使い方] -moz-box-flex: 1;

    display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。(flex は "フレキシブル" の意味です)
    (※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。

    つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。

  • -moz-box-ordinal-group

    [使い方] -moz-box-ordinal-group: 1;

    display: box 内に配置されたブロック要素に指定します。
    指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
    (HTML の記述順序に関わらず出現順序を変更したい際に使用します)

  • -moz-box-sizing

    [使い方] -moz-box-sizing: content-box [,border-box];

    ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。

  • -moz-transform

    [使い方] -moz-transform: rotate(45deg);

    詳細については -webkit-transform を参照してください。

  • -moz-transform-origin

    [使い方] -moz-transform-origin: X Y;

    transform の基準点を指定します。

Opera 系

  • Multiple backgrounds
  • -o-background-size

    [使い方] -o-background-size: 50% 50%;

    背景画像のサイズを指定します。横 縦の順で記述します。

  • background-origin

    [使い方] background-origin: padding;

    上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。

    • border (ボーダーまで含めたボックスサイズで算出)
    • padding (パッディング領域まで含めたボックスサイズで算出)
    • content (コンテンツ領域のみのボックスサイズで算出
  • background-clip

    [使い方] background-clip: padding-box;

    背景で塗りつぶす領域を変更できる。padding のエッジからまたは border のエッジからのどちらかを選択できる。

    • padding-box (padding のエッジから開始)
    • border-box (border のエッジから開始)
  • border-radius

    [使い方] border-radius: 10px;

    ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
    CSS Backgrounds and Borders Module Level 3 が勧告候補になったため、Opera10.50 では -o- のプレフィクスがなくても動作するようになっています。

  • border-image

    [使い方] border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;

  • box-shadow

    [使い方] box-shadow: 2px 2px 3px #999;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。
    現在は W3C の CSS3 の草案からは一端消去されている仕様となります。
    また、まだ草案の段階ですが Opera ではベンダープレフィクスが取れています。

  • text-shadow

    [使い方] text-shadow: 2px 2px 5px black;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。

  • -o-transform

    [使い方] -o-transform: rotate(45deg);

    詳しくは -webkit-transform を参照してください。

  • -o-transition-property

    [使い方] -o-transition-property: color, background-color;

    transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。

  • -o-transition-duration

    [使い方] -o-transition-duration: 0.5s;

    transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。

  • -o-transition-timing-function

    [使い方] -o-transition-timing-function: ease-in-out;

    transition の変化の具合を設定します。指定できる値は以下の通りです。

    • default
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier() 4つの数字をカンマ区切りで指定

その他

  • rgba

    [使い方] background-color: rgba( 0,0,0,0.5 );

    透明度を持った色を設定します。左から RGB 値を指定し、最後に 01 の間で透明度を指定します。(0 で完全な透明になります)

参考にした記事

builder by ZDNet Japan より

The Art of Web より

この記事のカテゴリー一覧を見る⇒まとめ記事

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/149