CSS3 ユーザ・インタフェース

CSS3 ユーザ・インタフェース

CSS3 における、新たなユーザ・インターフェイス機能のうちのいくつかは、要素のリサイズ、ボックスのサイズ、 およびアウトラインに関するものです。

この章では、次のユーザ・インターフェイス・プロパティについて学習します:

• resize
• box-sizing
• outline-offset

ブラウザ・サポート

resize プロパティは、Firefox 4+,、Chrome および Safari がサポートしています。

box-sizing は、Internet Explorer、Chrome および Opera がサポートしています。 Firefoxは、接頭辞 -moz- を必要とし、Chrome と Safari は、接頭辞 -webkit- 必要とします。

outline プロパティ は、Internet Exploreris を除く主要な全ブラウザがサポートしています。

CSS3 リサイズ

CSS3において、resize プロパティはユーザによる要素のリサイズが可能かどうかを指定します。

CSS コードは次の通りです:

例

div 要素が、ユーザによるリサイズが可能であることを指定します:

div
{
resize:both;
overflow:auto;
}

Try it yourself »

CSS3 Box Sizing

box-sizing プロパティは、ある方法でエリアに収まるように、ある要素を定義することを可能にします:

例

2つのボーダーを持つボックスを並べて接するように指定します:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Try it yourself »

CSS3 Outline Offset

outline-offset プロパティは、アウトラインをオフセットし、ボーダーの縁を越えてアウトラインを描きます。

アウトラインはボーダーと2つの点で異なります:

• アウトラインはスペースをとりません
• アウトラインは矩形とは限りません

CSS コードは次の通り:

例

ボーダー・エッジの外側 15px にアウトラインを指定します:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Try it yourself »

新 User-interface プロパティ