【CSS、html】画像をボタンとして使う方法の備忘録。スマホでも対応可能。

ありきたりのボタンではなくオリジナルの画像を使ったボタンを作ってみたかったので、いろいろ調べました。特にスマホ（Iphone）で長押しでの画像の保存を回避することができたので備忘として記録しておきます。

解決に役立ったページ
画像にクリックしたときのfunctionをつけただけ
パソコン用にクリック時の演出を追加
スマホ用の設定
まとめ

解決に役立ったページ

以下のページを参考にさせていただきました。ありがとうございます。

スマホでの「:activeでの挙動」と「要素への『ontouchstart=””』の追加」

疑似クラスの:hoverと:activeのスマホでの挙動の違い

:hoverと:activeでの挙動の違い疑似クラスの:hoverを使うと、ホバー時のスタイルが適応できて、:activeを使うとクリック時のスタイルの適応ができます。それぞれの疑似クラスの区別を

スマホでの「長押しでの画像保存を禁止」

【完全禁止は難しい】Webサイトの画像保存を禁止させる方法

Webサイトの画像保存を禁止する方法をまとめました。右クリック対策/ドラッグ＆ドロップ対策/長押し保存/印刷させない方法/スクリーンショット対策をご紹介します。

では、「画像にJavascriptのonclickを足しただけ」「PCサイト向けにボタン押した挙動を追加」「スマホでの対応」と順に追って書いていきます。

画像にクリックしたときのfunctionをつけただけ

とりあえず、画像を置いて、それにクリック時にfunctionをつけただけです。
各コードの下に実際のボタンを配置しています。クリックして見てください。

<div class="waku">
<img src="https://egaoyo.com/uploads/test_botton.png" class="test_button" id="test_bottun1" onclick="button_click1()">
</div>
<span id="textaa"></span>

<script>
x=0
function button_click1(){
x=x+1
sentence1 =x +"回クリックされました。";
document.getElementById("textaa").innerHTML=sentence1 ;
}
</script>

.waku{width:150px; height:75px ;}

.test_button{width 150px;}

画像があるだけなので、クリックしても押した感は全くありません。

パソコン用にクリック時の演出を追加

次に、擬似クラス(hoverやactive）のなかのactiveを使ってボタンがクリックされたときに、ボタンが少し縮んで押したことが分かるようにします。
CSSに、「.test_button2:active」の疑似クラスで画像が少し小さくなるようにしました。（5行目）

<div class="waku">
<img src="https://egaoyo.com/uploads/test_botton.png" class="test_button2" id="test_bottun2" onclick="button_click2()">
</div>
<span id="textbb"></span>


<script>
y=0
function button_click2(){
y=y+1
sentence2 =　y +"回クリックされました。";
document.getElementById("textbb").innerHTML=sentence2 ;
}
</script>

.waku{width:150px; height:75px ;}

.test_button{width 150px;}

.test_button2:active{width :144px ; margin-left:3px ; margin-top: 3px ;}

パソコンでは問題なく動作しますが、スマホでは押している時間が少し長いと画像が選択されて「コピー」や「写真に保存」の機能が動作してしまいます。

スマホ用の設定

htmlのほうでは、画像に「ontouchstart=””」を追加しスマホのボタンに触ることでactionが効くようにします。
また、「draggable=”false”」と追加して長押ししたときにドラッグにならないようにします。（2行目）

CSSのほうで、おまじないのように以下を追加します。(7行目から）
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
user-select:none;
これで長押ししたときに画像の保存などにならないようにします。

<div class="waku">
<img src="https://egaoyo.com/uploads/test_botton.png" class="test_button2" id="test_bottun3" ontouchstart=""  draggable="false" onclick="button_click3()">
</div>
<span id="textcc"></span>

<script>
z=0
function button_click3(){
z=z+1
sentence3 =z +"回クリックされました。";
document.getElementById("textcc").innerHTML=sentence3 ;
}
</script>

.waku{width:150px; height:75px ;}

.test_button{width 150px;}

.test_button2:active{width :144px ; margin-left:3px ; margin-top: 3px ;}

#test_bottun3{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

これで長押ししても画像の保存やドラッグになったりしなくなります。パソコンでもドラッグできなくなります。

まとめ

CSSで疑似クラスのactiveを使ってクリック時の演出が可能。
スマホ向けには、以下を設定する
- 要素に「ontouchstart=””」を設定してタップでactiveが反応するようにする。
- 要素に「draggable=”false”」を設定してドラッグできないようにする。
- CSSで「-webkit-touch-callout:none;-webkit-user-select:none;-moz-touch-callout:none;-moz-user-select:none;user-select:none;」を設定して長押しでの画像保存などを回避する。