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

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

resize
outline-offset

ブラウザのサポート

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

プロパティ
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; }

自分で試してみる »