純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法

純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法

序文

私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさまざまな方法を用意したいと考えました。たとえば、コードブロックはクリックひとつでコピーできるようにして、ローカルでのデバッグが簡単にできるようにしたいです。テキストの説明部分については、コピーできないようにしたいと思っています。 JS よりも CSS を使うべきだと信じる頑固な過激派として、私は最終的に CSS3 で user-select を見つけました。

互換性

ユーザー選択

ユーザーがテキストを選択できるかどうかを制御するために使用されます。すべて選択、一部選択。

すべて選択

多くの場合、ユーザーは、コードの一部、パスワード、またはいくつかのキーなどのコンテンツ全体を一度にコピーしたい場合があります。
user-select:all : ユーザーが 1 回のクリックで要素を選択できるようにします。
ここでは、3 つの異なる HTML タグの効果を示します。

 h2 {
        ユーザー選択: すべて;
      }

      コード {
        ユーザー選択: すべて;
        幅: 500ピクセル;
        表示: ブロック;
        パディング: 10px;
        色: #31808c;
        背景色: #f5f4ef;
      }

      div {
        ユーザー選択: すべて;
      }

  <h2>クリックして試す</h2>
    <前>
        <コード>
        定数num = 1;

        const 結果 = (関数 () {
          番号を削除します。
          数値を返します。
        })();
        
        console.log(結果);
        </code>
    </pre>
    <p>
      const num = 1; const result = (function () { delete num; return num; })();
      console.log(結果);
    </p>

しかし、all には残念な欠点もあります。all を設定すると、一部のコンテンツを選択できなくなります。

選択を無効にする

Web ページ上の要素の場合、user-select: none; を使用して、ユーザーがコンテンツを選択できないようにすることができます。

部分的に選択

なぜこのようなことわざがあるのでしょうか? 通常の Web ページの場合、特定のコンテンツを選択できます。たとえば、次のページでは、コンテンツを部分的に選択できます。

しかし、ここでのタイトル部分は主に反対側では選択できない要素を指します。たとえば、HTML には sup というタグがあり、これは主に要素に上付き文字を追加するために使用されます。

<p>私の後ろにはコーナーマークがあります<sup>1</sup>私の前にはコーナーマークがあります</p>

このテキストをコピーする場合: 後ろにコーナー マーク 1 があり、前にもコーナー マークがあります。このコーナー マークもコピーされます。
この時点で、コーナー マークを設定する必要があります。この設定により、p タグが user-select:all の場合、コピー時にコーナー マークが無視されることも保証されます。

すする {
  -webkit-user-select: なし;
  ユーザー選択: なし;
}

拡張機能: 選択したスタイルを設定する

CSS は、テキスト選択のスタイルを設定するための ::selection 疑似要素を提供します。::selection 疑似要素をターゲットにすることで、テキスト選択のスタイルを設定できます。ただし、設定できるのは次のプロパティのみです。


背景色
カーソル
キャレット色
アウトラインとその長手
テキスト装飾とそれに関連するプロパティ
テキスト強調色 (en-US)
テキストシャドウ

例えば

p::選択{
  色: #fffaa5;
  背景色: #f38630;
  テキストシャドウ: 2px 2px #31808c;
}

選択後の効果は以下のとおりです。

これで、純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーできないようにする方法についての記事は終了です。CSS を使用してユーザーがコンテンツをコピーできないようにする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明

>>:  Linux sftp コマンドの使用法

推薦する

Nginx 構成検出サービスのステータスを実装する方法

1. チェックステータスモジュールがインストールされているかどうかを確認します。 [root@loc...

Docker+K8S+GitLab/SVN+Jenkins+Harbor をベースにした継続的インテグレーション配信環境の構築に関する詳細なチュートリアル

目次環境設定の概要1.K8Sとは何ですか? 2. K8S を使用する理由3. K8S を使用する利点...

Javascript の基礎: 演算子とフロー制御の詳細な説明

目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...

Reactは動的ポップアップウィンドウコンポーネントを実装します

UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...

nginx で仮想ホストを構成するための詳細な手順

仮想ホストは、インターネット上で実行されているサーバー ホストを複数の「仮想」ホストに分割する特殊な...

Nginx ドメイン転送の使用シナリオ コード例

シナリオ 1: サーバーの制限により、外部に開かれているポートは 1 つだけですが、別の外部ネットワ...

JS変数ストレージのディープコピーとシャローコピーの詳しい説明

目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

CentOS 6.4 MySQL 5.7.18 のインストールと設定方法のグラフィックチュートリアル

Centos6.4 で mysql5.7.18 をインストールするための具体的な手順が全員に共有され...

HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。

「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...

Docker Compose のインストールと使用手順

目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...

MySQL 内部結合の使用例 (必読)

文法規則 列名を選択 テーブル名1から INNER JOIN テーブル名2 ON テーブル名1.列名...

MySQL で日付を保存するためのベスト プラクティス ガイド

目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...

WMLタグの概要

構造関連タグ--------------------------------------------...