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

CSS3 は、要素のリサイズ、アウトライン、ボックス・サイジングなどの新しいユーザインターフェイス機能を持っています。

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

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

数字の後に続く -webkit- または -moz- は、接頭辞付きで動作した最初のバージョンです。

プロパティ
resize	4.0	未サポート	5.0 4.0 -moz-	4.0	15.0
outline-offset	4.0	未サポート	5.0 4.0 -moz-	4.0	9.5

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

この div 要素は、（Firefox、Chrome、Safari、Opera では）ユーザによるリサイズが可能です。

次の例では、ユーザは、<div> 要素の幅だけを変更することができます：

div {
resize: horizontal;
overflow: auto;
}

次の例では、ユーザは、<div> 要素の高さだけを変更することができます：

div {
resize: vertical;
overflow: auto;
}

次の例では、ユーザは、<div> 要素の高さと幅の両方を変更することができます：

div {
resize: both;
overflow: auto;
}

outline-offset プロパティは、アウトラインと要素の辺またはボーダーとの間のスペースを追加します。

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

この div には、ボーダーの外側 15px にアウトラインがあります。

次の例は、ボーダーとアウトラインとの間に 15px スペースを追加するために、outline-offset プロパティを使用しています：

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

次の表は、全ユーザ・インターフェイス・プロパティの一覧です：

プロパティ	説明
box-sizing	要素の合計の幅と高さにパディングとボーダーを含めることを可能にする
nav-down	下矢印キーを使う時、どこへナビゲートするかを指定する（Opera のみ）
nav-index	要素へタブによる移動の順序を指定する
nav-left	左矢印キーを使う時、どこへナビゲートするかを指定する（Opera のみ）
nav-right	右矢印キーを使う時、どこへナビゲートするかを指定する（Opera のみ）
nav-up	上矢印キーを使う時、どこへナビゲートするかを指定する（Opera のみ）
outline-offset	アウトラインと要素のボーダーまたはエッジの間にスペースを追加する
resize	ユーザによる要素のリサイズが可能かどうかを指定する