開発 2024.06.12

CSSセレクタ基礎知識：属性セレクタを使ったリンクのスタイル設定

Web制作で、特定の要素を選択したいけどclassは増やしたくない…毎回pdfリンク用にアイコンを入れるのは面倒…と困ったことはありませんか？そんなときに役立つのが「属性セレクタ」です。属性セレクタを使えば、特定の属性や値に基づいて簡単に要素を選択できます。
本記事では、aタグの属性セレクタを中心に基本から応用までを解説します。ぜひ最後までご覧ください。

1 属性セレクタとは？
- 1.1 属性とは何か？
- 1.2 属性セレクタの基本構文
2 属性セレクタの種類
3 属性セレクタの応用例
4 おまけ：属性セレクタはaタグ以外にも使える？
5 まとめ

属性セレクタとは？

属性セレクタとは、HTML要素の特定の属性やその値に基づいて要素を選択するためのセレクタです。たとえば、特定のクラスやIDを持つ要素だけでなく、特定の属性を持つ要素を選択することができます。

属性とは何か？

HTMLの「属性」とは、HTMLタグに追加情報を与えるためのものです。たとえば、リンク先を示すhref属性や、画像のソースを示すsrc属性などがあります。具体的には以下のように表します。

<a href="https://example.com">Example Link</a> <!-- href属性 -->
<img src="image.jpg" alt="Example Image"> <!-- src属性とalt属性 -->
<input type="text" placeholder="Enter your name"> <!-- type属性とplaceholder属性 -->

各属性はキー（hrefなど）と値（”https://example.com”など）のペアで構成されており、HTMLタグ内に追加して使用します。

属性セレクタの基本構文

属性セレクタは[]を使って選択します。最もシンプルで基本的な書き方は以下の通りです。

[属性名] {
    /* css */}

たとえば、href属性を持つすべてのaタグを選択する場合は、以下のように書きます。

a[href] {
    /* css */
}

属性セレクタの種類

属性セレクタにはいくつかの種類があります。代表的なものをいくつか紹介します。

属性が存在する要素を選択

属性が存在する要素すべてを選択する場合、単に属性名を指定します。

a[href] {
    color: blue;
}

これは、href属性を持つすべてのaタグを青色にする例です。

特定の属性値を持つ要素を選択（完全一致）

特定の属性値を持つ要素を選択する場合、以下のように書きます。

a[href="http://test.org"] {
    color: red;
}

これでhref属性の値がhttp://test.orgであるaタグを赤色にできます。

特定の文字列を含む属性値を持つ要素を選択（部分一致）

特定の文字列を含む属性値を持つ要素を選択する場合、hrefのすぐあとに*を記述します。

a[href*="example"] {
    color: green;
}

これでhref属性の値にexampleという文字列を含むすべてのaタグを緑色にできます。

特定の文字列で始まる属性値を持つ要素を選択（前方一致）

特定の文字列で始まる属性値を持つ要素を選択する場合、hrefのすぐあとに^を記述します。

a[href^="https"] {
    color: purple;
}

これでhref属性の値がhttpsで始まるすべてのaタグを紫色にする例です。

特定の文字列で終わる属性値を持つ要素を選択（後方一致）

特定の文字列で終わる属性値を持つ要素を選択する場合、hrefのすぐあとに$を記述します。

a[href$=".com"] {
    color: orange;
}

これでhref属性の値が.comで終わるすべてのaタグをオレンジ色にできます。

デモ

では、実際に属性セレクタを使ったCSSを見てみましょう。以下の例では、さまざまな属性セレクタを使用してaタグのスタイルを変更しています。

See the Pen
属性セレクタ（基本編） by GROWORKS (@groworks)
on CodePen.

それぞれのaタグが異なる色で表示されることが確認できます。

属性セレクタの応用例

ここまでは基本的な属性セレクタの使い方を紹介しましたが、さらに実用的な応用例についても見ていきましょう。ここでは、特定のプロトコルやファイル拡張子、そして特定の属性に基づいてaタグを選択する方法を紹介します。

特定のプロトコルを持つリンクを選択する

href属性に使われるプロトコルに基づいてリンクを選択することができます。たとえば、電話番号リンクやメールリンクを特定してスタイリングしたい場合に便利です。

a[href^="tel:"] {
    color: red; /* 電話リンクを赤色にする */
}

a[href^="mailto:"] {
    color: green; /* メールリンクを緑色にする */
}

このCSSは「hrefの値がtel:（あるいはmailto:）から始まるもの」に対して特定のスタイルで装飾することができます。

特定のファイル拡張子を持つリンクを選択する

pdfなどのファイルを開くためのリンクには、末尾に拡張子名が入っています。それを利用して、href属性に使われるファイル拡張子に基づいてリンクを選択することも可能です。たとえば、PDFファイルやWordドキュメントへのリンクを特定してスタイリングしたい場合に便利です。

a[href$=".docx"] {
    padding-right: 25px;
    background: url(../img/icon_word.svg) no-repeat center right 5px;
    /* アイコンはご自分でご用意ください */
}

a[href$=".xlsx"] {
    padding-right: 25px;
    background: url(../img/icon_excel.svg) no-repeat center right 5px;
    /* アイコンはご自分でご用意ください */
}

a[href$=".pdf"] {
    padding-right: 25px;
    background: url(../img/icon_pdf.svg) no-repeat center right 5px;
    /* アイコンはご自分でご用意ください */
}

これにより、PDFやWordドキュメントへのリンクを特定のスタイルで装飾することができます。

特定の属性を持つリンクを選択する

さらに、特定の属性を持つaタグを選択することもできます。たとえば、target=”_blank”属性を持つリンクを特定する場合に便利です。

a[target="_blank"] {
    padding-right: 25px;
    background: url(../img/icon_popup.svg) no-repeat center right 10px;
    /* アイコンはご自分でご用意ください */
}

これにより、新しいタブで開くリンクや、特定のtarget属性を持つリンクを特定のスタイルで装飾することができます。

デモ

これらの応用例を組み合わせたHTMLとCSSの例を見てみましょう。

See the Pen
属性セレクタ（基本編） by GROWORKS (@groworks)
on CodePen.

特定のプロトコルやファイル拡張子、target属性を持つリンクがそれぞれ異なるスタイルで表示されることが確認できます。

おまけ：属性セレクタはaタグ以外にも使える？

今回は主にaタグに関わる属性セレクタの基本について学びましたが、属性セレクタは他の要素にも使用可能で、さまざまな条件に基づいてHTML要素を選択することができます。いくつかの具体例を挙げて説明します。

src属性
imgタグのsrc属性を使って、特定の画像を選択することができます。たとえば、特定のディレクトリからの画像や特定のファイル形式の画像を選択する場合に便利です。

img[src$=".jpg"] {
    border: 2px solid blue; /* .jpg形式の画像に青色の枠線を付ける */
}
img[src^="images/"] {
    border: 2px solid green; /* srcがimages/から始まる画像に緑色の枠線を付ける */
}

<img src="images/photo.gif" alt="Photo"> <!-- 緑色の枠線が付く -->
<img src="photos/image.jpg" alt="Image"> <!-- 青色の枠線が付く -->
<img src="images/picture.png" alt="Picture"> <!-- 緑色の枠線が付く -->

type属性
inputタグのtype属性を使って、特定の種類の入力フィールドを選択することができます。たとえば、テキスト入力やパスワード入力を特定してスタイリングする場合に便利です。

input[type="text"] {
    background-color: lightyellow; /* テキスト入力フィールドの背景色を黄色にする */
}
input[type="password"] {
    background-color: lightpink; /* パスワード入力フィールドの背景色をピンクにする */
}

<input type="text" placeholder="テキストを入力してください"> <!-- 背景色が黄色になる -->
<input type="password" placeholder="パスワードを入力してください"> <!-- 背景色がピンクになる -->

class属性
特定のクラスを持つ要素を選択することもできます。これにより、クラス名に特定の文字列が含まれている要素を選択することが可能です。

div[class*="container"] {
    border: 1px solid black; /* クラス名にcontainerが含まれるdiv要素に黒色の枠線を付ける */
}

<div class="main-container">class="main-container"</div> <!-- 黒色の枠線がつく -->
<div class="secondary-container">class="secondary-container"</div> <!-- 黒色の枠線がつく -->
<div class="content">class="content"</div>

data-属性
カスタムデータ属性（data-属性）を使って、特定のデータ属性を持つ要素を選択することができます。これにより、カスタムデータを使ったスタイリングが可能です。

div[data-role="test1"] {
    background-color: lightblue; /* data-role属性がtest1のdiv要素の背景色を水色にする */
}

<div data-role="test1">test1</div> <!-- 背景色が水色になる -->
<div data-role="test2">test2</div>

今回は紹介のみに留めますが、興味がある方は活用してみてください。

まとめ

属性セレクタを使うことで、特定の条件に合ったHTML要素を持つリンクに対してスタイルを適用することができます。これにより、ユーザーにとって使いやすいリンクを提供できるだけでなく、さらに細かいスタイリングが可能になります。ぜひ、これらの技術を活用して、より機能的なWebサイトを作成してください！

r.s

グローワークスのコーダー兼プログラマー。最適なコードでサイトを動かすことに情熱を注いでいます。技術的課題を解決するのが得意です。

View All