[PC・スマホ]サイト上の画像の保存をできる限り阻止する対策法 | hi-posi Front-End blog
クライアントから「サイト内の画像を保存できないようにしてほしい！」というご要望をいただくことがたまにあります。 ウェブサイトに画像を掲載している以上、画像保存を完全に阻止するということは不可能です。 ソース読めば画像のパスなんてわかるし。最後は画面キャプチャしちゃえばいいし。 なので完全に阻止することはできませんが、できる限り画像保存までの手間を増やす対策をご紹介します。 １：jQueryで「contextmenu」イベントを使って右クリックを禁止にする ２：スマホの場合 CSSを使って長押しアクションを禁止する ３：スマホの場合2 jQueryのタッチイベントを使って画面の長押し後に表示されるメニューを表示させないようにする ４：jQueryライブラリ「dwImageProtector Plugin」を使って対象画像の上に透過画像を重ねる １：jQueryで「contextmenu」
![[PC・スマホ]サイト上の画像の保存をできる限り阻止する対策法 | hi-posi Front-End blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3dc975c11ef80489c34cee076c9d6afb23bc3dc/height=288;version=1;width=512/http%3A%2F%2Fhi-posi.co.jp%2Ftech%2Fwp-content%2Fuploads%2F2015%2F04%2FdwImageProtectorPlugin.jpg)
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog 最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。 自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。 僕自身も医療系のサイトに関わることが多いのですが、「設置して当然」の要件となりつつある感じ。 まー、正直「周りがやってるから」というのが主な理由なんですが、結果としてユーザビリティやアクセシビリティにつながるなら良しとしましょう（誰 今回は、その「ボタンをクリックして文字サイズを変更」する機能を実現する方法について、定番を 1 つと、新しく見付けたのを 1 つご紹介します。 定番の方は、プラグインを追加するだけなので手軽＆気軽にできるのが特徴。 新発見の方は、いろいろ書かないといけないので若干メンドくさいですが、その
Liveweave HTMLエディター
Check out our Python playground! Python is the most popular general-purpose programming language in the world, widely used in Artificial Intelligence, Machine Learning, and Data Science projects. Supports popular Python libraries like Numpy, Matplotlib, SciPy, Pandas, and more! Share your public code with anyone, or make it private Features advanced auto-completion technology Try it now!
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis
