画像を使わずメールアドレスをロボットから守るCSSコード

173

どうも! ゴールデンウィークなんて一日もなかった KUDOH@NIJILOG です。

自分のサイトで自社サービスや商品を販売していると、特定商取引法表示などでどうしてもメールアドレスをネットに晒す必要が出てきたりします。

しかし世の中には悪い人たちがおりまして、自動巡回ツールをつかってメールアドレスをサイトから収集するという、カビが生え過ぎてとっくに食べられなくなったスパムマーケティングをいまだにやっている人が大勢います。

ウェブサイトにメールアドレスをのせると、よくわからない人から突然連絡されてもある程度は仕方ないですが、スパム業者に登録されて迷惑メールをドンドコ送りつけられるのは正直迷惑です。
だったら自己防衛しないとねということで、できるだけカンタンにできて、メールアドレスをキチンと表示しつつも自動収集ロボットを欺く方法を考える必要があるかな……と。

ここまで前置きを書いておきながらなんなんですが、最近は問い合わせフォームを用意してメールアドレスを公開しないのがあたり前なので正直なところ需要的にどうなのかと。

ということで、メールアドレスを隠す云々の話はオマケ程度、本題はCSS だけでもこんなことが出来ますよというデモンストレーションだったりします。

トリッキーなCSSをつかったメールアドレス表示方法

方法1 ユーザとドメインを分離する

まずは一番シンプルなやり方。

メールアドレスの「ユーザ」と「ドメイン」を繋ぐ「@」を CSS で書きだすことで、ロボットに認識されないようにします。

「ドメイン」を囲む要素に before擬似要素で「@」をつけることで、ユーザ+@+ドメインという形にできます。

方法2 HTML5のカスタムデータ属性をつかう

HTML5から導入されたカスタムデータ属性をつかえば、より構造的にメールアドレスを記載できます。

内容が空のタグに before、after擬似要素をつかって、カスタムデータを組み上げるようにしています。

ただ、見た目は完璧なんですが、擬似要素なのでマウスで選択してコピーができません。

まあその点を差し引いても、CSSだけで動的な仕組みをつくれる content と attr() の組み合わせはオモシロいですね。

方法3 rtlを指定して逆読み

RTLとは文章の左右方向を入れ替えるプロパティです。
本来はアラビア語のような右から左に読む言語で使用します。

CSS はunicode-bidi とdirection をセットで利用します。

これをつかえばコード上、アドレスを逆さまに記述することができるので、ロボットをごまかすことが可能です。


 

方法3は効果はあると思いますが完全にネタですね。

個人的には方法2はコピーができないものの、一番きれいに書けるのでオススメできるかなと思います。