インタラクション・UX

11個のプロパティ

cursor

インタラクション・UX

要素にマウスを重ねた時のカーソルの形状を指定するプロパティです。pointer、text、move、not-allowedなど多数の値があり、ユーザーに操作のフィードバックを与える重要なUIプロパティです。

コード例
cursor: pointer;

visibility

インタラクション・UX

要素の可視性を制御するプロパティです。display: noneと違い、要素は非表示になりますが領域(スペース)は確保されたままになります。アニメーションやトランジションと組み合わせて使用されることが多いです。

コード例
/* 基本的な使い方 */ .hidden-element { visibility: hidden; } .visible-element { visibility: visible; }

user-select

インタラクション・UX

ユーザーがテキストを選択できるかどうかを制御するプロパティです。none、text、all、autoなどの値があり、UI要素のテキストが誤って選択されるのを防ぐために使用されます。

コード例
user-select: none;

pointer-events

インタラクション・UX

要素がマウスイベントのターゲットになるかどうかを制御するプロパティです。none、auto、visiblePainted等の値があり、透明なオーバーレイの実装やクリック可能領域の制御に使用されます。

コード例
pointer-events: none;

content-visibility

インタラクション・UX

要素のレンダリングを制御し、画面外の要素の処理をスキップしてパフォーマンスを向上させるプロパティです。

コード例
.article { content-visibility: auto; contain-intrinsic-size: 1000px; }

scroll-behavior

インタラクション・UX

スクロール動作をスムーズにするか、即座に移動するかを指定するプロパティです。smooth指定でスムーススクロールが有効になり、アンカーリンクやJavaScriptでのスクロール操作が滑らかになります。

コード例
scroll-behavior: auto;

scroll-snap-type

インタラクション・UX

スクロールスナップコンテナの動作を定義するプロパティです。カルーセルやフルページスクロールの実装に使用します。

コード例
scroll-snap-type: x mandatory;

scroll-snap-align

インタラクション・UX

スクロールスナップ時の子要素の配置位置を指定するプロパティです。scroll-snap-typeと組み合わせて使用します。

コード例
scroll-snap-align: start;

overscroll-behavior

インタラクション・UX

スクロール領域の境界に達した時の動作を制御するプロパティです。auto、contain、noneの値があり、スクロールチェーン(親要素へのスクロール伝播)を防ぐのに便利です。

コード例
overscroll-behavior: contain;

resize

インタラクション・UX

ユーザーが要素のサイズを変更できるかどうかを指定するプロパティです。none、both、horizontal、verticalの値があり、textareaのリサイズ動作を制御できます。

コード例
resize: vertical;

scroll-snap

インタラクション・UX

スクロールスナップを使用してスムーズなスクロール体験を提供します。scroll-snap-typeとscroll-snap-alignを組み合わせて使用します。

コード例
scroll-snap-type: x mandatory; scroll-snap-align: start;