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

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

CSS3では、要素のサイズ、ボックスサイズ、および外枠線を調整するための新しいユーザーインターフェース機能がいくつか追加されました。

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

• resize
• box-sizing
• outline-offset

ブラウザサポート

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

-webkit-、-ms- または -moz- の直前にある数字は、その接頭辞付きプロパティをサポートする最初のブラウザバージョン番号です。

CSS3 リサイズ(Resizing)

CSS3では、resizeプロパティは、要素をユーザーがリサイズできるかどうかを指定します。

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

例

ユーザーがdiv要素のサイズを指定します：

div { resize:both; overflow:auto; }

試してみる »

CSS3 ボックスサイズ調整(Box Sizing)

box-sizing プロパティを使用すると、特定の領域に適合する具体的な内容を正確な方法で定義できます。

例

枠線付きの2つのボックスを並べて指定します：

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

試してみる »

CSS3 アウトラインオフセット（outline-offset）

outline-offset プロパティはアウトラインをオフセットし、枠線の端を超えた位置にアウトラインを描画します。

アウトラインと枠線には2つの違いがあります：

• アウトラインはスペースを占有しません
• アウトラインは非矩形の場合があります

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

例

枠線の端から15ピクセル外側のアウトラインを指定します：

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

試してみる »

新しいユーザーインターフェース機能