目次
CSS
box-shadow
cursor
opacity
pointer-events
CSS
Cascading Style Sheets(カスケーディングスタイルシート)
『HTML や XML (方言である SVG、MathML、XHTML などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。』
参考
1)
box-shadow
『要素のフレームの周囲にシャドウ効果を追加します。』
影を追加できる
参考
2)
cursor
『マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。』
マウスを合わせたとき、マウスカーソルが指差す手になったり、砂時計になったり、禁止マークになったりする
参考のMDNのサイトがわかりやすいので参照の元
参考
3)
opacity
『要素の不透明度を設定します。』
『不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。』
0だと何も見えず、1だと全て見える
参考
4)
pointer-events
『特定のグラフィック要素がポインターイベントの対象になる可能性のある環境 (存在する場合) を設定します。』
マウスでカーソルを合わせた時のイベントを設定できる
pointer-events: none;
にすると、リンクであってもクリックできないようになる
参考
5)
1)
『CSS: カスケーディングスタイルシート』, MDN,
https://developer.mozilla.org/ja/docs/Web/CSS
, 2022-02-09
2)
『box-shadow -
CSS
: カスケーディングスタイルシート』, MDN,
https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow
, 2022-02-09
3)
『cursor -
CSS
: カスケーディングスタイルシート』, MDN,
https://developer.mozilla.org/ja/docs/Web/CSS/cursor
, 2022-02-09
4)
『opacity -
CSS
: カスケーディングスタイルシート』, MDN,
https://developer.mozilla.org/ja/docs/Web/CSS/opacity
, 2022-02-09
5)
『pointer-events -
CSS
: カスケーディングスタイルシート』, MDN,
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events
, 2022-02-09