ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

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

リンク先を新規ウインドウで開くよう記述されているリンクに限定して、アイコンが付加されるようスタイルシートを書いてみましょう。target属性に値「_blank」が指定されているリンクに自動的に画像を表示させます。

この記事の担当ガイド

  • このエントリーをはてなブックマークに追加

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

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

新規ウインドウを開くか開かないかは、表示上では区別が付かない。
▲新規ウインドウを開くか開かないかは、表示上では区別が付かない。(IE8)

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

とはいえ、対象のリンク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つの記述方法を活用してスタイルシートソースを記述してみましょう。

更新日:2009年05月11日

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    1

    この記事を共有する