どうも7noteです。ユーザー操作を禁止するCSSを紹介
クリックやスクロール、テキスト入力など、web上のユーザーの操作を制限できるCSSを紹介。
・HTML要素の選択禁止
div {
user-select: none;
}
全てのHTML要素の選択をできないようにします。クリック、画像のコピーまで。
テキストのコピペ対策として入れる事もあります。もちろんCSSを無効化されたらコピーできてしまいますので、100%完璧な対策にはなりませんが、webに強い人でない限りは基本防ぐ事ができます。
・左右クリック、タップ禁止(画像のコピー禁止も)
div{
pointer-events: none; /* 初期値に戻す時はauto */
}
画像のコピー禁止だけしたい場合は以下のようにimgにだけ書くことで対策できます。
img {
pointer-events: none;
}
・右クリック禁止
右クリックだけを禁止させるにはbodyタグに以下のような記述をします。
これで右クリック禁止ができるので、上同様に画像のコピーなどを防ぐ事ができます。
<body oncontextmenu="return false;">
・スクロール禁止
これで画面スクロールする事はできなくなります。
本来はスクロール禁止というよりも、ウィンドウからはみ出た部分の処理をどう扱うかという指定をしているだけです。
何も指定しなければスクロールできますが、hiddenにすることではみ出た部分は非表示扱いになり、スクロールがされないという結果になっています。
html,body {
overflow: hidden;
}
・文字の折り返し禁止
div {
white-space: nowrap;
}
テキストの折り返しを禁止できます。
逆にURLなど英数字を強制的に折り返したい場合はいかのように指定します。
div {
word-break: break-all; /* 強制折り返し */
}
・inputテキスト入力禁止
inputのテキスト入力などを無効化する方法です。
inputタグは使いたいけど、値を書き換えられたくない場合などに使います。
明示的に変更不可だという事が伝わりやすいですね。
<input name="hoge" type="text" value="hoge" disabled="disabled" />
まとめ
ユーザーの操作を制限することで、対策を行ったり、また時には制限することによってユーザーの行動を制御し使いやすいwebサイトを作ることもできます。
なんでもかんでも意味なく禁止したり無効化するのはオススメしませんが、目的に合わせて禁止する制御を入れてみてもいいかなと思います。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ