target=”_blank”の属性を持つaタグにだけCSSを指定する方法

あわせて読みたい

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…

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://life-design-day.com/wp2/" 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://life-design-day.com/wp2/」のリンクにだけCSSを指定します。

a[href="https://life-design-day.com/wp2/"]{
  color: #000;
}

WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ

「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。

しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。

一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。

かすが

私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！

スクールで学ぶ5つのメリット

• カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
• 現役のプロから実践的なフィードバックを受けられる
• わからないことをすぐに質問・解決できる環境がある
• 制作課題を通じて、ポートフォリオが作成できる
• 学習仲間や講師とのつながりが、モチベーション維持につながる

スクール選びでチェックすべき5つのポイント

• カリキュラムが現場で必要とされる技術に対応しているか
• 現役デザイナー・エンジニアが講師として在籍しているか
• ポートフォリオ制作のサポートが充実しているか
• 卒業後の就職・転職支援が用意されているか
• オンライン・通学など、自分の生活スタイルに合った受講形式か

遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。

WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！

あわせて読みたい

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…