WEB制作.Hack

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

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

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

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

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

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

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

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

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

ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• flat （2D 表示）
• preserve-3d （3D 表示）

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

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

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

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

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

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

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

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

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

[使い方] -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-background-inline-policy: bounding-box;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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