概要

リンクで、外部の Web ページが参照先のときにアイコンなどをつけて区別するケースがよくあります。

そのときに、参照先が外部の Web ページの a 要素だけにスタイルを適用するための CSS コードです。

• 動作確認用の demo

この方法は外部リンクの a 要素だけに class 属性をつけるというような処理が必要ないので、CMS やブログのエントリーなどにいいかもしれません。

似た方法で JS でまとめて class 属性を付与する方法もありますが、CSS だけで完結したほうがスマートかなと思ったのでサンプルを作りました。

demo で使用した CSS コード

a[href^="http"]{
background:url(img/ico_conductor.png) no-repeat right center;
padding-right:15px;
}

a[href^="http://www.yomotsu.net"],
a[href^="http://yomotsu.net"]{
padding:inherit;
background:transparent;
}

* html a.external{ /* IE-expression (attr-selector) */
background:url(img/ico_conductor.png) no-repeat right center;
padding-right:15px;
}

* html a{ /* IE-expression (attr-selector) */
behavior: expression(
this.className += this.getAttribute("href").match(/^http.*/) && (!this.getAttribute("href").match("yomotsu.net")) ? " external" : "",
this.style.behavior = "none"
);
}

説明

実際に書いている CSS コードの前半は以下の通りです。

a[href^="http"]{
background:url(img/ico_conductor.png) no-repeat right center;
padding-right:15px;
}

a[href^="http://www.yomotsu.net"],
a[href^="http://yomotsu.net"]{
padding:0;
background:transparent;
}

リンク先の区別に属性セレクタを使っています。

a[href^="http"] は href 属性値が http から始まっている a 要素のみという意味です。

なので、

• <a href="http://www.google.com">google</a> のような場合は該当します。
• <a href="../index.html">ホーム</a> のような場合は該当しません。

つまり、http から始まっているリンク先の a 要素全てということになります。ただし、このままだと、Web サイト内部のページに絶対パスでリンクを指定した場合も該当してしまいます。

なので a[href^="http://www.yomotsu.net"],a[href^="http://yomotsu.net"]{…} のように、Web サイト内部のページのスタイルは指定しないようにします。こうすることで外部の Web ページを参照している a 要素のみにアイコンをつけるなどの装飾をすることができます。

サンプルの CSS コードa[href^="http://www.yomotsu.net"],a[href^="http://yomotsu.net"] の部分をご自身の Web サイトに合わせて変更しご使用ください。

[属性名^="属性値"] はCSS 3 で使えるようになる属性セレクタですが、IE 7, Firefox, Safari, Opera といった Web ブラウザで既に動作します。

ただし、IE 6 には対応していません。

IE 6 対策

IE 6 にも同様のことをする場合には、少し無理やりですが、IE の独自実装の expression を使います。

* html a{ /* IE-expression (attr-selector) */
behavior: expression(
this.className += this.getAttribute("href").match(/^http.*/) && (!this.getAttribute("href").match("yomotsu.net“)) ? ” external” : “”,
this.style.behavior = “none”
);

上記のようなコードを書くことで、a 要素の属性に href があって、その値が http から始まっている、なおかつ、yomotsu.net を含まない場合(実際に使用するときには yomotsu.net の部分を変更してください)の a 要素に external という名前の class 属性を付与することのできるので

* html a.external{ /* IE-expression (attr-selector) */
background:url(img/ico_conductor.png) no-repeat right center;
padding-right:15px;
}

のように、a.external は外部リンクの装飾を指定します。

トラックバックURI

http://www.yomotsu.net/lab/css/externallink/trackback

<a href="http://google.com"><img src="foo"/></a>

a[href^="http"]{
…略
}

a.image{ background:none; padding:0; }

<a href="http://google.com" class="image"><img src="foo"/></a>

実験室に戻る