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

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

この章では、以下のCSSユーザーアイコン属性について学びます：

  • resize
  • outline-offset

ブラウザサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザバージョンを示しています。

属性 Chrome IE Firefox Safari Opera
resize 4.0 サポートしていません 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS調整サイズ

resize 属性は要素がユーザーによって調整されるべきかどうか（およびどのようにするか）を定義します。

このdiv要素はユーザーによってサイズ調整可能です！

サイズ調整：このdiv要素の右下隅をクリックしてドラッグします。

注意：Internet Explorerはresize属性をサポートしていません。

以下の例では、ユーザーが<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;
}

実際に試してみてください

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

以下のテーブルには、すべてのユーザーインターフェース属性が示されています：

属性 説明
outline-offset 輪郭と要素の枠線の間にスペースを追加します。
resize 要素がユーザーによって調整可能かどうかを指定します。