CSSで画像を印刷できないようにする方法
2013年03月09日 22:11:41
テーマ：Webデザイン
「ライセンスを掲載したいがダウンロードされたくない」というクライアントの要望に対して、出来る限りの事はしましたが、CSSで画像を右クリック保存させないようにする方法でも書きましたが、キャプチャーを撮られたら終わりなんですよね。
対策を練ってたら思ったことだけど、データ以外に紙で印刷されないようにもしないと！と思いましたので、画像を印刷できないようにする方法を書き残しておきたいと思います。
タイトルには「CSSで・・・」とか書きましたが、今回のは<head>～</head>内に直接書くことなので簡単です。
HTML
<img class="ngprint" src="/img/hoge.jpg" />
CSS
@media print{
.ngprint{
display:none;
}
}
以上！
クライアントページのCSSには visibility:hidden; まで入れておきました。
これだけ書いて保存して、印刷プレビューで見てみると画像があった部分が真っ白ｗ
これで印刷防止対策はOK。
アドレスを辿って画像表示されたら終わりですが...OTL
