純粋な 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 をよろしくお願いいたします。