ニュース記事に添付されてる画像が保存できない⁉CSS: z-index, user-select

※ウェブデザインに詳しくない自分にとっては発見でしたが、仕様自体は2011年のCSS 2.1からあったものみたいです。

この記事(https://mdpr.jp/music/detail/3514518)をスマホで観ていて、
いい写真だなと思い長押ししたら、黒いプレビューが出てきて、写真が保存できませんでした。
同じ写真を掲載している他のニュースサイト記事では保存できました。

「あー、無断転載する人とかいるし、権利とか考えられたサイトなんだなぁ。」
「...あれ。でもどうやってこの写真表示してんの？」
「普通HTMLで埋め込みされてるはずだよなぁ」

というわけでパソコンで開いてF12を押してみました。
そうしたら写真の画像ファイルはありました。（ですよね～）

その画像以外に、1つc-imageProtectクラスの1x1のwebp画像がありました。
HTMLで写真と同じ大きさに指定されていて、CSSでは以下のように指定されていました。

height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;

最初の4つのルールは重要ではないのですが、5番目のルール(z-index)は初めて見たので、調べてみると：

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
MDN Web Docsより

つまりオブジェクトが重なる時に、どのオブジェクトが手前に描画されるかの記述ということ。
今回の記事の場合、c-imageProtectクラスにはz-index:1が記述され、写真には記述がない（＝z-indexのデフォルト値:auto）。
z-indexの手前に描画される優先順位はz-index:5 > z-index:1 > z-index:autoのように降順なので、z-index:1の実質透明な画像が前に描画され、写真が後ろに描画されるため、ユーザーは写真を選択できず、長押し/右クリック保存を防いでいるのでしょう。

↑だと思っていましたが、開発者ツールでz-indexのルールをを無効にしても右クリックで画像のリンクを取得できず。色々いじってみた結果、もう1レイヤ防御策があったみたいです。

写真とimageProtect画像が格納されているボックスの上位オブジェクトの<div class="c-image__image">にuser-select:noneというルールが適用されていて、その効果でボックス内を選択できなくなってるっぽいです。

none
The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.
MDN Web Docsより

なので、右クリックで写真のリンクを取れるようにするには、①imageProtect画像のz-indexを写真のものより小さくする。②それら画像が格納されているボックスが持つuser-select:noneを無効化する。

これで写真のリンクが右クリックで取得できるようになりました！
（こんなことしなくてもHTMLファイルに写真のリンク書いてありますが、、、）