aタグにCSSで下線を引いたり、文字の色を変えてリンクであることを示すのは王道のやり方ですが、aタグには新しいウィンドウでリンク先を開く属性のtarget=”_blank”があります。

ユーザビリティの観点から通常のリンクとは別であることを示すためにtarget=”_blank”にはアイコンを付けるのはよく見る方法です。

target=”_blank”のリンクに1つ1つ手作業でアイコンを設置することもできますが、CSSには便利な属性セレクターというものがあり、これを使えば一括でaタグかつtarget=”_blank”のものだけcssを指定できます。

target=”_blank”にだけcssを指定する方法

まずは結論部分のコードを先に記載します。

a[target="_blank"] {
    //target=”_blank”にだけ指定するCSSを書く
}

これだけです。簡単ですね！

これでtarget=”_blank”にだけcssを指定することができます。_blank以外を指定しても、もちろん有効です。

target=”_blank”にだけアイコンを付ける

次は実践としてtarget=”_blank”にだけcssでアイコンを付けてみたいと思います。以下がコードです。

インラインテキストバージョン

よく見る王道のやつですね。今回は「Font Awesome」を使ってアイコンを追加しています。

See the Pen target="_blank" by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

ボタンバージョン

インラインテキストバージョンとほとんど変わらないですが、ボタンもよく使うのでやっておきます。

See the Pen Untitled by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

<a href="https://webdesignday.jp/" target="_blank" rel="noreferrer noopener">Web Design DAY</a>

属性セレクターとは？

せっかくなので今回使ったCSSの属性セレクターを簡単におさらいしましょう。

HTMLのタグは種類によって、いくつかの属性とその値を持つことができます。属性セレクターはその属性と値に一致するのものにだけCSSを指定することができます。

今回のaタグを例にするとこんな感じです。

属性セレクターの種類

属性セレクターにはいくつか種類があります。深掘りするとこの記事の本題とそれるのでよく使うものを紹介します。

①指定の属性を持っているタグ

こちらはaタグを例にするとhrefやtargetの属性があるものにCSSを指定します。属性の有無だけなので適用範囲は広くなります。以下コード例です。

a[target] {
    //target属性があるタグに指定するCSSを書く
}

targetの値が_selfでも_blankでも対象になります。

②指定の属性かつ指定の値を持っているタグ

こちらは属性と値の両方に一致するものにCSSを指定します。条件が増えるので①より適用範囲は狭くなります。今回の記事の属性セレクターがまさにこれです。以下コード例です。

a[target="_blank"] {
    //target属性があり、かつその値が「_blank」のaタグに指定するCSSを書く
}

あまり使用頻度はなさそうですが、hrefで特定のURLへのリンクだけにCSSを指定することもできます。以下はhrefの値が「https://webdesignday.jp/」のリンクにだけCSSを指定します。

a[href="https://webdesignday.jp/"]{
  color: #000;
}

まとめ

意外と忘れてしまいがちな属性セレクターを使って、target=”_blank”の属性を持つaタグにだけCSSを指定する方法をご紹介しました。

他に私がよく使う属性セレクターは、お問い合わせフォームで使用するinputタグのtype属性です。input[type="text"]やinput[type="submit"]の属性セレクターを使って、テキスト入力欄にはこのCSSで、送信ボタンにはこのCSSなんて指定をしています。