普通のリンクだと思ってクリックしてみたら、実はそれがPDFファイルへのリンクだったり、意図せずメール・アプリケーションが起動したり、またはワードやエクセルのファイルだったりするとさらに最悪…。ネットサーフィンをしていると、そんなフラストレーションが貯まるような機会に遭遇することがしばしばあります。

自分が運営するサイトでは、ユーザーにそんな嫌な思いをさせないために、PDFへのリンクの場合はPDFのアイコン、メール・アプリケーションが起動する場合はメールのアイコンを表示させるなどのような、細かい気配りが大切だと考えています。

まずは、以下のHTMLを見てください。

HTML の記述方法

<!-- 通常のリンク -->
<a href="http://example.com">http://example.com</a>

<!-- mailto -->
<a href="mailto:example@example.com">example@example.com</a>

<!-- Excel -->
<a href="example.xls">example.xls</a>

<!-- PDF -->
<a href="example.pdf">example.pdf</a>

ごく普通の、何の変哲も無いHTMLの記述スタイルです。
例えばPDFの場合、<a href="example.pdf" class="pdf">example.pdf</a>のように、個別にクラスやIDを指定してCSSで背景画像を指定していく方法もありますが、今回は上記ソースのように、HTMLにはクラスやIDを記述せずに、CSSのみを用いてアイコンを表示する方法を紹介します。

CSSで「target="_blank"」の有無を識別

a[target="_blank"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-external.png) no-repeat right center;
}

上記CSSセレクタは、リンクにtarget="_blank"が指定されている場合にアイコンを表示させるというものになっています。

サンプル：https://on-ze.com/demo/css-link-icon/

CSSで特定のURLを識別

<a href="https://on-ze.com">http:/on-ze.com</a>
<a href="http://example.com">http://example.com</a>

例えば上記ソースのようなHTMLの場合、以下のCSSでアイコンを指定することができます。

a[href^="http://"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-external.png) no-repeat right center;
}

上記CSSセレクタで、リンクが http:// から始まる場合にアイコンを付けるというものになっています。
ただ、このままだと http:// から始まる全てのリンクに対してアイコンが付いてしまい、アイコンを付けたくない箇所にも付いてしまいますので、アイコンを付けたくないURLに対してのスタイルも同時に指定します。

a[href^="http://"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-external.png) no-repeat right center;
}

a[href^="https://on-ze.com"] {
	padding-left: 0;
	background: none;
}

上記CSSを追記することで、URLが「http://」から始まっている場合でも、「https://on-ze.com」の場合はアイコンが付かないようになります。

また、これとは逆に特定のURLに対してアイコンを表示させるといった指定もできます。

<!-- リンク先がGoogle -->
<a href="http://google.co.jp">Google</a>

<!-- リンク先がYahoo! -->
<a href="http://yahoo.co.jp">Yahoo!</a>

<!-- リンク先がFlickr -->
<a href="http://flickr.com">Flickr</a>

<!-- リンク先がWordPress -->
<a href="http://wordpress.org">WordPress</a>

上記ソースの場合、以下のCSSで各アイコンを指定します。

a[href^="http://google.co.jp"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-google.png) no-repeat right center;
}

a[href^="http://yahoo.co.jp"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-yahoo.png) no-repeat right center;
}

a[href^="http://flickr.com"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-flickr.png) no-repeat right center;
}

a[href^="http://wordpress.org"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-wordpress.png) no-repeat right center;
}

「http://google.co.jp」の場合はGoogleアイコン、「http://wordpress.org」の場合はWordPressのアイコンというように、URLごとにそれぞれアイコンを付けることができます。
有名なサイトである場合はロゴなどのアイコンを付けることによって、ユーザーが一目でリンク先がどこなのかがわかります。

サンプル：https://on-ze.com/demo/css-link-icon/

CSSで「mailto:」を識別

リンク先が「mailto」の場合、以下のCSSでアイコンを指定することができます。

a[href^="mailto:"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-mail.png) no-repeat right center;
}

上記CSSセレクタで、リンクにmailto:が指定されている場合にアイコンを付けるというものになっています。

サンプル：https://on-ze.com/demo/css-link-icon/

CSSで拡張子を識別

.xlsの場合はExcelアイコン、.pdfの場合はPDFアイコンというように、拡張子によって（リンク文字列の末尾によって）アイコンを付ける方法です。

複数の拡張子に対して同じ指定をしたい場合は、Excelのように複数のセレクタを記述するだけです。

a[href$=".xls"], a[href$=".xlsx"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-excel.png) no-repeat right center;
}

a[href$=".pdf"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-pdf.png) no-repeat right center;
}

a[href$=".zip"] {
	display: inline-block;
	padding-left: 20px;
	background: url(images/icon-zip.png) no-repeat right center;
}

a[href$=".jpg"] {
	display: inline-block;
	padding-left: 25px;
	background: url(images/icon-jpg.png) no-repeat right center;
}

以上。各リンク先の種類に応じて特定のアイコンを表示させる方法でした。
ちなみに当然のように、IE6には非対応です。（←苦笑）
以下より、サンプルをどうぞ。

サンプル：https://on-ze.com/demo/css-link-icon/