別ウインドウで開くリンクにアイコンを付加

新規ウインドウを開くリンクを区別できるようにする

リンクを作るa要素に「target="_blank"」という属性（値）を加えることで、リンク先を新規ウインドウで開くよう指示することができます。 しかし、「target属性が使われているリンク」も「使われていないリンク」も、ブラウザ上の表示は同じなので、閲覧者は区別できません。

そこで、「新規ウインドウで開くように記述されたリンク」にだけ、新規ウインドウが開かれるという意味を表すアイコン「」が表示されるようにしてみましょう。

とはいえ、対象のリンク1つ1つに対して画像を表示するよう追記するのは面倒です。
そこで、HTML側を修正することなくスタイルシートだけの記述で、新規ウインドウを開くリンクすべてにアイコンを一括表示させる簡単な方法をご紹介いたします。

この方法だと、1つスタイルシートを記述するだけで、すべての「新規ウインドウを開くリンク」に対して装飾できるので楽です。

「属性セレクタ」で装飾対象を限定、
「after疑似要素」でアイコンを付加

『新規ウインドウで開くように記述されたリンク』にだけアイコンが付加されるようにスタイルシートを記述するには、 「属性セレクタ」と「after疑似要素」の2つを使います。 それぞれの意味は以下の通りです。（詳しくは次のページで説明しています）

●「属性セレクタ」：
属性セレクタという記述方法を使うと、指定した属性が使われている要素に限定して装飾を施すことができます。 例えば、

• a → すべてのa要素が対象
• a[target] → a要素のうち「target」属性が指定されている要素が対象
• a[target="_blank"] → a要素のうち「target」属性に値「_blank」が指定されている要素が対象

……のように、装飾対象を細かく限定できます。 この記述方法を使うことで、『新規ウインドウで開くように記述されたリンク』（＝「target」属性に値「_blank」が指定されているa要素）に限定して装飾できます。

●「after疑似要素」：
after疑似要素という記述方法を使うと、指定した要素の直後に任意の文字や画像を追加させられます。 これを使えば、HTMLソースを編集することなく、スタイルシート側に追加したい画像のURLを記述するだけで、指定した要素の直後に画像を表示させられます。

それでは、この2つの記述方法を活用してスタイルシートソースを記述してみましょう。