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

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-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

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

対応ブラウザ

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.  }

例

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-radius

border を角丸に指定する。

対応ブラウザ

Safari、Chrome、Firefox、Opera、IE9

説明

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

コード

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

例

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-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-reflect

要素を反転させる

対応ブラウザ

Safari、Chrome

説明

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

コード

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

例

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.  }

例

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.  }

例

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.  }

例

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.  }

例