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 要素がユーザーによって調整可能かどうかを指定します。