画面上に文字を表示させないがコピペはできるようにしたい時のCSSの設定方法

タイトル通りですが、画面上に文字を表示させずにコピペはできるようにするCSSの設定方法を紹介します。

opacityで0を定義する

結論から言うと、opacityを0に定義すると画面には表示させずにコピペを可能にすることができます。

opacityは文字を透過させるCSSで、0 ~ 1の間で透過度を指定します。

このopacityを0にすると完全透明になるので、画面上には表示はされなくなります。

opacityを0にしたテキストが存在する画面(完全透明なので画面には表示されません)をcommand + a等で選択すると、opacityを0にした要素は選択されません。

しかし、選択した内容をコピペするとopacityを0にしたテキストもコピペできちゃいます。

jsで選択時に発火させてごにょごにょしなきゃいけないかな〜とか思っていたのですが、案外簡単にできました!

なお、visibility: hiddenとdisplay: noneはコピペすることができませんで、使うならopacity: 0です。

マサ

文系出身のWEBエンジニア
メインの開発言語はPHP
リモートワークで旅をすることが夢です。

マサをフォローする
engineering
マサをフォローする
サーフエンジニアチャンネル

コメント

%d人のブロガーが「いいね」をつけました。