search
LoginSignup
58

More than 1 year has passed since last update.

posted at

updated at

【初心者でもわかる】〇〇禁止できるCSSたち

どうも7noteです。ユーザー操作を禁止するCSSを紹介

クリックやスクロール、テキスト入力など、web上のユーザーの操作を制限できるCSSを紹介。

・HTML要素の選択禁止

style.css
div {
  user-select: none;
}

全てのHTML要素の選択をできないようにします。クリック、画像のコピーまで。

テキストのコピペ対策として入れる事もあります。もちろんCSSを無効化されたらコピーできてしまいますので、100%完璧な対策にはなりませんが、webに強い人でない限りは基本防ぐ事ができます。

・左右クリック、タップ禁止(画像のコピー禁止も)

style.css
div{
  pointer-events: none; /* 初期値に戻す時はauto */
}

画像のコピー禁止だけしたい場合は以下のようにimgにだけ書くことで対策できます。

style.css
img {
  pointer-events: none;
}

・右クリック禁止

右クリックだけを禁止させるにはbodyタグに以下のような記述をします。
これで右クリック禁止ができるので、上同様に画像のコピーなどを防ぐ事ができます。

index.html
<body oncontextmenu="return false;">

・スクロール禁止

これで画面スクロールする事はできなくなります。
本来はスクロール禁止というよりも、ウィンドウからはみ出た部分の処理をどう扱うかという指定をしているだけです。
何も指定しなければスクロールできますが、hiddenにすることではみ出た部分は非表示扱いになり、スクロールがされないという結果になっています。

style.css
html,body {
  overflow: hidden;
}

・文字の折り返し禁止

style.css
div {
  white-space: nowrap;
}

テキストの折り返しを禁止できます。
逆にURLなど英数字を強制的に折り返したい場合はいかのように指定します。

style.css
div {
  word-break: break-all;  /* 強制折り返し */
}

・inputテキスト入力禁止

inputのテキスト入力などを無効化する方法です。
inputタグは使いたいけど、値を書き換えられたくない場合などに使います。
明示的に変更不可だという事が伝わりやすいですね。

index.html
  <input name="hoge" type="text" value="hoge" disabled="disabled" />

まとめ

ユーザーの操作を制限することで、対策を行ったり、また時には制限することによってユーザーの行動を制御し使いやすいwebサイトを作ることもできます。

なんでもかんでも意味なく禁止したり無効化するのはオススメしませんが、目的に合わせて禁止する制御を入れてみてもいいかなと思います。

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
58