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

質問

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

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

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

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

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

回答No.6

ORUKA1951 · ベストアンサー

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

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

お礼

firefox + firebugを試してみました！！
まだ、機能の一部しかいじってませんが、凄いですね！！
使いやすい気がします！！

ありがとうございます！！

回答No.5

Yama-tani

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

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://okwave.jp/qa/q7733892.html
で、fujino001さんがベストアンサーとした方以外の方の答えを理解できれば今回のような質問はでなかったでしょう。ベストアンサーの方の紹介先のホームページもweb標準が出来ていないサイトです。デザインにとらわれることなく、本質的な考え方を理解すれば、後の学習がはかどる気がします。

お礼

そういえば確かに、htmlのhead内には、CSSを読み込ませるためのコードがありますね！！

気づきませんでした！！

また、確かに、初めの頃は、今以上にWeb標準を意識していなかったので、後手後手に回ったかもしれません！！

回答No.4

Yune-Kichi

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

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

お礼

ありがとうございます！

Firefoxの開発者ツールでCSSが見れました！！

他のブラウザも後で試してみます！！

回答No.3

notnot

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

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

お礼

CSSの中のbackground属性の画像URLは、右クリックで画像を保存できなかったのですか！！

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

私は独学そして素人なので、たくさんのWebサイトのソースを見て勉強することが多いのですが、CSSも見れたらなと思っています。

回答No.2

ORUKA1951

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

お礼

すごく大きな画像ですね！OKWaveの場合は、ずらして表示させていたのですか！！

それと、次の内容が途中で切れていて、わかりませんでした・・
「firefoxのfirebugを使用してスタイルシート中の画像を見つけて、そのコンテキストメニューから・・」

でも、ありがとうございます！！

回答No.1

bardfish

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

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

お礼

要素を検証で調べることができるのですね！！

ありがとうございます！！