CSSシークレット ―47のテクニックでCSSを自在に操る

▶ PLAY!

play.csssecrets.io/image‐slider

範囲指定のinput要素を使った解決策

CSSの resizeを使った解決策はきちんと機能しており、コードもほと

んど必要ありません。しかし、欠点もあります。

少しのスクリプトが許されるなら、スライダーのウィジェット（ HTML

のinput要素で、type属性にrangeが指定されたもの）を使って上記の

問題点をすべて解消できます。スライダーは画像に重ねて表示されます。

スクリプトの中で必要に応じて要素を生成して追加することも可能なの

で、まずは次のようにクリーンなマークアップを元に作業を始めることに

します。

 padding:5px;

 background:

  linear‐gradient(‐45deg,white50%,transparent0);

 background‐clip:content‐box;

 cursor:ew‐resize;

}

.image‐sliderimg{

 display:block;

 user‐select:none;

}

キーボードを使ったアクセスが行えません。

表示を変えるにはドラッグするしか方法がないため、画像が巨大な場合や

運動機能に障害を持つユーザーが操作する場合に不都合です。よりよいエ

クスペリエンスを提供するには、例えば画像の上でクリックするとその位

置まで境界が移動するといった機能が必要でしょう。

リサイズハンドルのスタイルを変えた ...