本サイトではアフィリエイト広告を利用しています
HTML コピー&ペースト

CSS コード 入門

非表示の文字列をコピー&ペーストさせるには?

2020年6月20日

インターネット黎明期は HTML をメモ帳でガリガリ書き続けるのが、ホームページ(ウェブサイト)作成の定石でしたが、いつの間にかCSS も最低限使わないと、みすぼらしい画面しか作れなくなっています。

HTML と CSS はすでにワンセットで、どちらかだけできても技術の半分以下の評価すら得られなくなりました。HTML で CSS を呼び出すなり、書くなりすれば、ページの見栄えは驚くほどよくなります(もちろん悪くなることもあるかもです)。

Web ページの一部を選択すると、非表示の部分まで選択するように小細工する

一方で、デザイナーでもない人にとっては、装飾関係の機能より、HTML の原始的な機能を拡張するためだけに CSS を裏技的に使いたいときがあります。今回は、その一例の私的メモになります。

今回のミッション

  • Web ページの一部を選択してコピー(Ctrl + C)すると、その一部だけではなく、それ以外の部分も自動的にクリップボードに収めてやりたい!

CSS を裏技的に使って、非表示テキストをコピーさせる

Web ページ画面上のテキストを非表示にする、非常によくできた裏技がありますが、コピー&ペーストすれば、非表示になっているテキストまで貼り付けることができます。

 html
<p>著作権表示は変更しないでね!<span class="cp-on">ineters.com</span></p>

 css の全体
.cp-on {
  display: block;
  position: absolute;
  left: -9999999px;
  top: -9999999px;
}

上の例の CSS では、画面に「著作権表示は変更しないでね!」と表示されますが、その行をコピーするとコピー内容は「著作権表示は変更しないでね!ineters.com」になります。

CSS を経由で画面外にテキストを配置しておけば、ユーザーがコピー操作を行った時でも、画面外のテキストを含めてクリップボードにコピーされることになります。

どういう使い方ができるかといえば、Web ページでコピーされる部分をあらかじめ推測しておき、ユーザーがその部分をコピーしたしたときに、見えないところまでコピーしてしまうという、裏技的使い方ができます。

-CSS, コード, 入門
-,