CSS Secret Garden: クリック可能な領域を拡張する_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

ユーザー エクスペリエンスに興味がある場合は、フィッツの法則について聞いたことがあるかもしれません。 1954 年にアメリカの物理学者ポール フィッツによって最初に提案されたフィッツの法則は、ターゲット領域に素早く移動するのに必要な時間であり、ターゲットまでの距離とターゲットの幅の比の対数関数です。一般的に使用される数式は、Time = a + b log2 (D / S + 1) です。ここで、T は所要時間、D はターゲットの中心までの距離、W はターゲットの幅、a と b は定数です。

ヒント: simonwallner.at/ext/fitts でインタラクティブな視覚化を介して、フィッツの法則の適用を確認してください

当時、グラフィカル ユーザー インターフェイスは存在していませんでしたが、フィッツの法則は修正されたシステムに完全に適用できました-ポイントデバイスですが、現在ではHCI(ヒューマンコンピュータインタラクション)の原理として広く知られるようになりました。最初は驚くかもしれませんが、フィッツの法則は特定のハードウェアよりも人間の運動制御に関するものであることを覚えておいてください。

当然の結果として、目標が大きければ大きいほど、それに到達するのは容易になります。したがって、多くの場合、拡大するオプションがなければクリックするのが難しい小さなコントロールの周囲のクリック可能な領域を拡大すると、使いやすさが向上します。タッチスクリーンがより一般的になるにつれて、これはますます重要になっています。たとえそれがまだ一般的であるとしても、その迷惑な小さなボタンを何十回も押したい人はいません。

また、ウィンドウの横にマウスを置くと、特定の要素が描画されることを期待します。たとえば、自動的に非表示になっているタイトルは、マウスを近づけると上から自動的に描画されます。また、クリック領域の拡張も含まれます (一方向のみ)。 CSS経由でできるのでしょうか？

解決策

まず、図に示すような単純なボタンがあると仮定しましょう

次に、そのクリック領域を 4 つの方向すべてに 10 ピクセルずつ増加させたいと考えます。これには、cursor: pointer などのいくつかの単純なスタイルを適用しました。これは、マウス操作に便利なだけでなく、クリック領域がどこにあるかをテストするのにも役立ちます。

クリック領域を拡張する最も簡単な方法は、透明な実線の境界線です。これは、アウトラインや影とは異なり、マウスと境界線の間の相互作用も要素に作用するためです。たとえば、要素のクリック領域を全方向に 10 ピクセル拡張するには、コードを次のように記述するだけです:

border: 10px solid transparent;

ただし、以下の画像でわかるように、効果はあまり良くありません。ボタンが大きくなります。

その理由は、デフォルトで背景がその下の境界線を拡張するためです。

border: 10px solid transparent;background-clip: padding-box;

上の図に示すように、表示に問題はありません。しかし、ボタンの周囲に実際の境界線を作成すると、実際にはクリック領域を拡張するために唯一の境界線を使用していることがわかります。それではどうすればいいでしょうか？非常に簡単です。インナー シャドウを使用して (単色) ボーダーをシミュレートできます

border: 10px solid transparent;box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;background-clip: padding-box;

効果は以下に示すとおりです:

ボーダーとは異なり、複数のボックス シャドウを使用できます。さらに必要な場合は、カンマを使用して影のセットを区切ります。ただし、内側のシャドウと外側のシャドウを組み合わせると、外側のシャドウが境界ボックスの外側に描画されるため、非常に奇妙な効果が得られます。たとえば、ボタンにぼかしの影を追加して、ページ上で「飛び出す」効果、つまり別のクリック可能なコンテンツを与えたい場合があります:

box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset,            0 .1em .2em -.05em rgba(0,0,0,.5);

ただし、これを試してみると、結果はまったく異なることがわかります。私たちが予想していたものより。

この解決策は他の理由から完璧ではありません。枠線はレイアウトに影響しますが、場合によっては問題にならない場合もあります。だから何をすべきか？境界線を削除し、擬似要素を使用して、親要素とのマウス操作をキャプチャします。

ボタンの上に透明な疑似要素をオーバーレイして、全方向にボタンよりも 10 ピクセル大きくすることができます:

button {    position: relative;    /* [rest of styling] */}button::before {    content: '';    position: absolute;    top: -10px; right: -10px;    bottom: -10px; left: -10px;}

これも実現可能で、疑似要素が必要ない限り、何も影響しません。疑似要素のソリューションは非常に柔軟です。クリック領域を任意のサイズ、位置、形状にでき、要素自体とは関係のないコンテンツも作成できます。