CSS アドバンス

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

CSS3 では、要素のリサイズ制御やアウトラインのオフセット設定など、新しいユーザーインターフェースプロパティが追加されました。これらを利用することで、ユーザーが直接操作可能な柔軟な UI を構築できます。

1. CSS3 resize プロパティ

resize プロパティは、ユーザーが要素のサイズを自由に変更できるかどうか、およびその方向を指定するために使用されます。

       注意: resize プロパティを適用するには、overflow プロパティの値が visible 以外（auto、hidden、scroll など）に設定されている必要があります。

1.1 resize の使用例

以下のコードは、<div> 要素に対して水平方向および垂直方向の両方のリサイズを許可する例です。

div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  /* リサイズを有効にする */
  resize: both;
  /* visible以外を指定する必要がある */
  overflow: auto;
}

指定できる主な値は以下の通りです。

  • none: デフォルト値。ユーザーによるリサイズを許可しません。
  • both: 水平・垂直の両方向のリサイズを許可します。
  • horizontal: 水平方向のみのリサイズを許可します。
  • vertical: 垂直方向のみのリサイズを許可します。

2. CSS3 outline-offset プロパティ

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

アウトラインはボーダーと以下の点で異なります。

  • アウトラインは要素の寸法の外側に描画されるため、要素の総幅や高さには影響しません。
  • アウトラインは四角形とは限りません（インライン要素の場合など）。

2.1 outline-offset の実装例

以下の例では、ボーダーの外側 15px の位置にアウトラインを表示させています。

div {
  margin: 20px;
  width: 150px; 
  border: 1px solid black;
  outline: 2px solid red;
  /* ボーダーとアウトラインの間に15pxの隙間を作る */
  outline-offset: 15px;
}

3. ユーザーインターフェースプロパティ一覧

プロパティ説明
appearance要素をブラウザ標準の UI コントロール（ボタンや入力フィールド等）のようにレンダリングするかを指定。
caret-colorテキスト入力時のカーソル（キャレット）の色を指定。
cursorマウスカーソルが要素上にある時の形状を指定。
outline-offsetアウトラインとボーダーの間の余白を指定。
resizeユーザーによる要素のリサイズ可否を指定。
user-selectユーザーがテキストを選択できるかどうかを指定。

特に resize プロパティは、ダッシュボードのウィジェットやテキストエリアのカスタマイズにおいて非常に便利です。また、outline-offset はキーボード操作時のフォーカスリングをより視認性高くデザインする際に、アクセシビリティの観点から重要な役割を果たします。