ホームページ作成/ホームページ作成テクニック、小技

スパム対策をしてメールアドレスを公開する方法(5ページ目)

迷惑メールを防止する7種類のスパム対策方法を解説。ホームページにメールアドレスを掲載すると、大量の迷惑メール(スパムメール)が届くようになってしまいます。メールアドレスを公開しつつも、メールアドレスの自動収集プログラムに収集されるのを防ぐ対策方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スパム対策4. CSSで「@」記号を挿入してメールアドレスに見せる方法

HTMLソースを見るとメールアドレスには見えないものの、ブラウザ上ではメールアドレスに見えるようにCSSを書く方法もスパム対策になるでしょう。
 
HTMLソースには「@」記号は含まれていないが、ブラウザ上では「@」記号が見える

HTMLソースには「@」記号は含まれていないが、ブラウザ上では「@」記号が見える


CSSのbefore疑似要素を使うと、特定の要素の直前に任意の文字を追加できます。この方法を使えば「@」記号だけを任意の要素の前に挿入できます。すると、HTMLソース内には「@」記号が存在しなくても、ブラウザ上に「@」記号を表示できます。

【このスパム対策の目次】  

CSSで「@」記号を挿入してメールアドレスに見せるメリット・デメリット

CSSで「@」記号を挿入してメールアドレスに見せるメリット
ブラウザ上では正しいメールアドレスが表示されますから、閲覧者はコピー&ペーストすることでメール送信に利用できます。

CSSで「@」記号を挿入してメールアドレスに見せるデメリット
メールアドレスをリンクにすることはできません。また、表示されているメールアドレス全体をコピーするために範囲選択しようとしても、CSSで追加された「@」記号だけはコピーされない場合があります(※)。その場合は、ユーザ自身が適切な場所に「@」記号を追加しなければなりません。その際、「なぜ@記号だけがコピーできないのか?」とユーザが疑問に感じてしまうかもしれません。

※本稿執筆時点のChrome、Firefox、Opera、Edgeの各最新版では、CSSで追加した「@」記号はコピーされませんでした。IE11では「@」記号も含めてコピーできました。
 
CSSで追加された文字は範囲選択の対象にならない場合がある

CSSで追加された文字は範囲選択の対象にならない場合がある

 

CSSで「@」記号を挿入してメールアドレスに見せる書き方

HTMLソースには、メールアドレスのうち「@」記号以外の文字をすべて記述しておき、「@」記号が入る箇所以降を適当な要素で囲みます。下記では例としてspan要素を使い、後からCSSで装飾するために「domain」というclass名を付加しました。
<p>
   example<span class="domain">example.com</span>
</p>

CSSソースは、before疑似要素で「@」記号を挿入するために、下記のように記述します。
.domain::before {
   content: '@';
}

上記のHTML+CSSでspan要素の直前に「@」記号が挿入されるため、ブラウザ上では「@」記号が含まれたメールアドレスのように表示されます。しかし、HTMLソースには「@」記号は存在しません。

 

CSSで「@」記号を挿入してメールアドレスに見せるサンプルページ

お使いのブラウザで実際に表示を確認してみたい場合は、サンプルページ「CSSで「@」記号を付加する方法」にアクセスして表示結果やソースをご覧下さい。ブラウザ上では下図のようにメールアドレスとして見えるものの、HTMLソースには「@」記号が含まれていないことが分かります。
 
ブラウザ上では「@」記号を含むメールアドレスに見える

ブラウザ上では「@」記号を含むメールアドレスに見える



次に、JavaScriptでメールリンクを生成する方法をご紹介いたします。
  • 前のページへ
  • 1
  • 4
  • 5
  • 6
  • 8
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます