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

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

resize
outline-offset

ブラウザのサポート

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

Property
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

CSSのサイズ変更

このresizeプロパティは、ユーザーが要素のサイズを変更できるかどうか（およびその方法）を指定します。

このdiv要素はユーザーがサイズ変更できます！

サイズを変更するには：このdiv要素の右下隅をクリックしてドラッグします。

次の例では、ユーザーは<div>要素の幅のみのサイズを変更できます。

例

div {
resize: horizontal;
overflow: auto;
}

次の例では、ユーザーは<div>要素の高さのみのサイズを変更できます。

例

div {
resize: vertical;
overflow: auto;
}

次の例では、ユーザーは<div>要素の高さと幅の両方のサイズを変更できます。

例

div {
resize: both;
overflow: auto;
}

多くのブラウザでは、<textarea>はデフォルトでサイズ変更可能です。ここでは、resizeプロパティを使用して、サイズ変更可能性を無効にしました。

例

textarea {
resize: none;
}

CSSアウトラインオフセット

outline-offsetプロパティは、アウトラインと要素のエッジまたは境界線の間にスペースを追加します。

このdivには、境界線の端の外側に15pxの輪郭があります。

注：アウトラインは境界線とは異なります。境界線とは異なり、アウトラインは要素の境界線の外側に描画され、他のコンテンツと重なる場合があります。また、アウトラインは要素の寸法の一部ではありません。要素の合計の幅と高さは、アウトラインの幅の影響を受けません。

次の例では、outline-offsetプロパティを使用して、境界線とアウトラインの間にスペースを追加します。

例

div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}