コピーできない画像の仕組み

Question

ときどき、いくつかのwebサイトで、コピーできない画像を見受けます。

別にコピーをしたい訳では、無いのですが、これはどのような仕組なのでしょうか？

そういえば、このOKWaveでも、次の各項目の横にある小さな画像が、コピーできないようになっております。

「質問する」、「回答受付中の質問」、「補足入力」、「お礼入力」

このように表示されているものは、画像では無いのでしょうか？
どうやって、作成するのでしょうか？

ORUKA1951 · Accepted Answer

No.2です。
「それと、次の内容が途中で切れていて、わかりませんでした・・」
ですが、firefox + firebugで見るとすぐわかるのであえて書きませんでしたが、該当する部分を見つけ出す--これは画面左下の要素(タグ)の＋を開いていって上の要素で青く変わる部分を見つけ出します。そして見つけたら、その右下のCSSの宣言からbackgroundを見つけたら、そこで右クリックすれば、コンテキストメニュー(その状況で可能なメニュー)が表示されます。
　No.2の回答ではそのURLを貼り付けただけです。

その場でHTMLやスタイルシートをチェックするだけじゃなく、書きえて表示を確認したり色々使えるので、そのページがどのように作成されているかを調べるのにとても便利です。

Yama-tani · Answer

作成者が故意に画像に仕掛けをしているものを力づくでと思っていたら……、違うのですね。

Webサイトに表示されるものは、
本質的に必要なもの……、「質問する」、「回答受付中の質問」、「補足入力」、「お礼入力」
飾りでありなくても可……それらの背景、キャッチアイアイコンなど
があります。

最近のwebサイトの作り方はこれらを分けます（主流）。
本質的に必要なもの、コンテンツに文章構造（表示される文言に見出し・段落など）の印をつけたものをｈｔｍｌとし
ｈｔｍｌに飾りでありなくても可な物（デザイン）を指定するものをスタイルシート（ｃｓｓ）として作成しリンクします。ご質問の画像は背景です。背景なので右クリで保存は出来ませんが、画像自体は保存が出来ます。

端末はかわっても本質的に必要なもの（伝えたい事）は伝わるようにし、デザインは添え物。デザインは伝わらなくても問題ない。本質をわかりやすくするためにデザインしましょうという考え方です。例えば読み上げソフトでページを聞いている人には視覚デザインはどうでもよいので、質問するは必要だが、質問するの背景画像は読み上げられると邪魔です。検索エンジンのページ収集ロボットにも同じことが言えます。web標準といいます。

リンクしていますので、元ページのソースをみれば、ｃｓｓは見れます。テキストです。

このページのソースを開き、head内のstylesheetを捜せば見つかると思います。
<link href="http://gazo.okwave.jp/okwave/css/～.css" media="screen" rel="stylesheet" type="text/css" />
こんなやつです

他のサイトなら
<link rel="stylesheet" type="text/css" href="/css/～.css">
など、記述の順番が違う場合もあります。勉強中でソースを覗きたいなら、ｃｓｓのソースを覗けばいいかと思います。

勉強中でｃｓｓを知らないとは……。勉強方法や参考にされている教科書が間違っているような気がします。今時の手法の基礎を学ばれてから、他人のソースを覗き見ることをお勧めします。
「web標準」「正しいhtml」などのキーワードでhtmlの書き方を学べばOK。他には「文章構造とデザインの分離」などを説明している場合も多いです。

HTMLとスタイルシートのタグの違い
http://oshiete.goo.ne.jp/qa/7733892.html
で、fujino001さんがベストアンサーとした方以外の方の答えを理解できれば今回のような質問はでなかったでしょう。ベストアンサーの方の紹介先のホームページもweb標準が出来ていないサイトです。デザインにとらわれることなく、本質的な考え方を理解すれば、後の学習がはかどる気がします。

Yune-Kichi · Answer

> そういえば、CSSを表示させることって、できないのでしょうか？

CSSといえどもHTTP(S)で通信していますから，URLを直接指定することで表示 or ダウンロードできます。
また，IEの8以降であればF12 開発者ツールが標準で付いていて，サイトを表示させてF12を押せば
・読み込んでいるCSS
・読み込んでいるJavaScript
は全部見られますし，9以降であればネットワークキャプチャも可能です。
他のブラウザでも同じ様な機能が標準で付いているか，アドインが存在すると思います。

notnot · Answer

コピーできない画像というものはありません。
画像の上で右クリックして、画像を保存できないのは、imgタグで無くバックグラウンドの画像です。CSSのbackground属性。
CSSの中にURLが書いてあります。

あるいは、Firefoxだとコンテキストメニューに、「背景画像だけ表示」というのがあり、それを選ぶと背景画像だけ表示されて、そのページだと「名前をつけて画像を保存」とかできます。

ORUKA1951 · Answer

okwebの場合は、スプライトと呼ばれる技術です。
まあ巨大な背景画像( http://gazo.okwave.jp/okwave/images/common/sprites_btn.png )の一部をずらして表示させています。
firefoxのfirebugを使用してスタイルシート中の画像を見つけて、そのコンテキストメニューから・・

bardfish · Answer

Google Chromeではコピー出来ない画像の上で右クリックすると表示されるメニューに「要素を検証」というものがあり、それを選択するとHTMLソースが表示されます。

それを見て分析してみましょう。

コピーできない画像の仕組み

No.2です。

作成者が故意に画像に仕掛けをしているものを力づくでと思っていたら……、違うのですね。

> そういえば、CSSを表示させることって、できないのでしょうか？

コピーできない画像というものはありません。

okwebの場合は、スプライトと呼ばれる技術です。

Google Chromeではコピー出来ない画像の上で右クリックすると表示されるメニューに「要素を検証」というものがあり、それを選択するとHTMLソースが表示されます。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング