CSS3で文字や画像を選択させない様にする。 : ういすぷの記録帳

ボタンなどマウスなどで選択させると、見た目上あまり美しくない場合があると思います。そこで、文字や画像を選択させない方法がCSS3にあります。


次の様な選択（アクティブ）をさせません。



該当する要素に「user-select:none;」を宣言します。
CSS3では、ベンダープレフィックスという指定を行なわないと動作しない場合がありますので、次の様に指定するとモダンブラウザ（Web標準を十分に準拠ブラウザ）では動作いたします。ただし、Internet Explorerはうまく動作しない場合がございます。

user-select:none; /* CSS3 */

-moz-user-select:none; /* Firefox */

-webkit-user-select:none; /* Google Chrome , Safari */

-o-user-select:none; /* Opera */

-ms-user-select:none; /* Internet Explorer */

実際に利用したプログラムがあります。次のソフトウェア/サービスは、ボタンを押すと『にゃ〜ん』と鳴きます。

にゃ〜〜ん！

ボタンですが、テキストにしています。連打すると選択状態になりますが、「user-select:none;」を宣言することで、選択状態を回避しています。
※ ご注意 ※
プログラムやHTML等のソースをコピペして利用してもらうような場所には、ユーザビリティから見ても好ましくありません。


こちらはおまけですが、CSS3ではなく以前からあるCSSで行なう方法です。ただしInternet Explorer（IE）では動作しません。
CSSの「position」を使う方法です。選択させない箇所にposition:absolute;とz-indexを利用し、上に重ねます。背景を「background-color:transparent;」で指定します。これで、擬似的に同じような状態を作り上げることができます。

こちらも、ユーザビリティに配慮する必要があります。


□ 関連記事
・テキストデータからJavaScript貼付けソースを作る「ぺたたぐ」を作ってみた。
・jQuery ダウンロードリスト
・.htaccess でアクセス制限をする方法
・さくらインターネットで大きいファイルを split を使って分割する方法
・ブログのデザインを変えてみました。
・にゃ〜〜ん！
・JavaScript BASE64 変換
・CSS3で文字をぶるぶる震わす！
・background-image で比率を維持しながらレスポンシブ表示させる。
・ブログを少し更新し、右横の最新エントリーを少し替えてみました。