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

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

CSS3では、素子サイズ、フレームサイズと外部境界を調整するために、新しいユーザーインターフェースの機能の数を増加させます。

この章では、次のユーザー・インタフェースのプロパティを学びます。

• リサイズ
• ボックスのサイズ変更
• アウトラインオフセット

ブラウザのサポート

表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。

すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。

CSS3のサイズ変更（リサイズ）

CSS3では、プロパティは要素は、ユーザがサイズを調整する必要があるかどうかを指定サイズを変更。

次のようにCSSのコードは次のとおりです。

例

ユーザサイズによって指定されたdiv要素：

div
{
resize:both;
overflow:auto;
}

»をお試しください

CSS3のリサイズボックス（ボックスサイジング）

ボックスのサイズ変更プロパティを使用するには、適応の特定の領域の正確な内容を定義することができます。

例

境界ブロックと並んで2側の規定：

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

»をお試しください

CSS3は（輪郭オフセット）形状を修正しました

アウトラインオフセット性は、輪郭をオフセットとボーダーの縁を越えてプロファイルを引きます。

二つの異なる輪郭とフレームがあります。

• 輪郭は、スペースを占有しません。
• これは、非矩形の輪郭であってもよいです

CSSコードは次のとおりです。

例

境界線15のエッジで輪郭画素の外側の規定：

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

»をお試しください

新たなユーザインターフェイス機能