先生と生徒の会話形式で理解しよう

生徒

「CSSで、特定の属性を持つHTMLタグだけを指定する方法ってありますか？」

先生

「はい、CSSの属性セレクタを使えば、それができますよ！」

生徒

「属性セレクタってなんですか？どうやって使うんですか？」

先生

「では、基本からゆっくりと解説していきますね！」

1. CSS属性セレクタとは？

CSSの属性セレクタは、HTMLタグの中にある特定の属性（たとえば、typeやhrefなど）に対してスタイルを適用する方法です。通常のクラスやIDを使わずに、条件に合った要素を選択できます。

例えば、<input type="text">のようなタグの「type="text"」という部分が属性です。CSS属性セレクタを使えば、「typeがtextの要素だけに色をつける」といったことが可能です。

2. 属性が完全に一致するセレクタ [属性="値"]

これは、属性の値が完全に一致した場合だけスタイルが適用されるセレクタです。


<style>
	input[type="text"] {
	    background-color: lightyellow;
	}
</style>

<input type="text" placeholder="テキスト入力">
<input type="password" placeholder="パスワード入力">

ブラウザ表示

この例では、type属性が「text」の場合だけ背景色が黄色になります。

3. 属性値が前方一致するセレクタ [属性^="値"]

このセレクタは、属性の値が指定した文字列で始まっている場合に適用されます。たとえば、class名が「btn-primary」や「btn-secondary」のように、同じ接頭語を持つ場合に便利です。


<style>
	div[class^="btn"] {
	    border: 2px solid green;
	}
</style>

<div class="btn-primary">ボタン1</div>
<div class="btn-secondary">ボタン2</div>
<div class="card">カード</div>

ブラウザ表示

このコードでは、class名が「btn」で始まるすべてのdivに緑の枠線がつきます。

4. 属性値が部分一致するセレクタ [属性*="値"]

このセレクタは、属性の値の中に指定した文字列が含まれていれば適用されます。どこに含まれていてもかまいません。


<style>
	a[href*="example"] {
	    color: red;
	    font-weight: bold;
	}
</style>

<a href="https://example.com">公式サイト</a>
<a href="https://test.com">テストリンク</a>

ブラウザ表示

この例では、href属性に「example」という文字列が含まれていれば、赤色で太字になります。

5. 属性値が語の完全一致をするセレクタ [属性~="値"]

このセレクタは、スペース区切りの語の中に完全に一致する単語がある場合に適用されます。たとえば、class属性に複数のクラスが指定されているときに使います。


<style>
	div[class~="highlight"] {
	    background-color: lightgreen;
	}
</style>

<div class="highlight">注目エリア</div>
<div class="box highlight">複数クラス</div>
<div class="box">通常ボックス</div>

ブラウザ表示

「highlight」というクラスが単語として含まれていれば、背景色が緑になります。

6. 属性値が指定の語で終わっているセレクタ [属性$="値"]

このセレクタは、属性の値が特定の文字列で終わる場合に使います。たとえば、画像の拡張子が「.jpg」で終わる場合だけ指定する、ということができます。


<style>
	img[src$=".jpg"] {
	    border: 3px dashed orange;
	}
</style>

<img src="photo.jpg" alt="写真">
<img src="icon.png" alt="アイコン">

ブラウザ表示

src属性が「.jpg」で終わっている画像だけ、オレンジ色の点線枠になります。

7. 実際に使ってみるとどう役立つの？

属性セレクタを使えば、HTMLのタグにclassやIDをわざわざつけなくても、柔軟にCSSを適用できます。

たとえば、「外部リンクだけ文字を青くする」や「特定のinputタイプだけサイズを変える」といったことも簡単にできます。

プログラミング初心者の方でも、HTMLの構造を読み取りやすく、CSSのスタイルを整理しやすくなるので、サイト制作がグッと楽になりますよ！

まとめ

CSS属性セレクタを理解すると何ができるようになるのか

今回の記事では、CSS属性セレクタの基本から応用までを段階的に解説してきました。 CSS属性セレクタとは、HTMLタグに設定されている属性や、その値の内容を条件にしてスタイルを適用できる仕組みです。 classやidだけに頼らず、HTMLの構造そのものを読み取ってデザインを指定できる点が、大きな特徴と言えます。

特に初心者の方にとっては、「classを増やさないとスタイルを当てられない」という思い込みがなくなるだけでも、コードの見通しがかなり良くなります。 CSS属性セレクタを覚えることで、HTMLとCSSの役割分担がはっきりし、保守しやすく読みやすいスタイル設計ができるようになります。

一致・前方一致・部分一致の使い分けがポイント

記事の中で紹介したように、CSS属性セレクタにはいくつかの種類があります。完全一致の [属性="値"] は、条件を厳密に指定したいときに便利です。一方で、前方一致の [属性^="値"] や部分一致の [属性*="値"] を使うと、命名規則を活かした柔軟な指定が可能になります。

たとえば、ボタン系のclass名を「btn-」で統一しておけば、前方一致セレクタを使って一括で装飾できます。また、URLやファイル名の一部に注目したい場合は、部分一致や後方一致を使うことで、HTMLを書き換えずにデザインを変更できます。このような使い分けができるようになると、CSS設計の幅が一気に広がります。

まとめ用サンプルプログラムで復習

ここで、複数の属性セレクタを組み合わせた簡単なサンプルコードを見てみましょう。実際に「どの条件でスタイルが当たるのか」を確認しながら読むことで、 CSS属性セレクタの理解がより深まります。


<style>
    input[type="text"] {
        background-color: lightyellow;
    }

    a[href^="https"] {
        color: blue;
        font-weight: bold;
    }

    img[src$=".jpg"] {
        border: 2px solid orange;
    }
</style>

<input type="text" placeholder="テキスト入力">
<input type="password" placeholder="パスワード入力">

<a href="https://example.com">安全なリンク</a>
<a href="http://test.com">通常リンク</a>

<img src="/img/sample120-120.jpg" alt="jpg画像">
<img src="/img/sample150-100.png" alt="png画像">

ブラウザ表示

このコードでは、入力欄の種類、リンクのURLの始まり方、画像ファイルの拡張子といったように、 HTMLの属性情報をそのまま条件として利用しています。 classやidを追加しなくても、十分に細かいデザイン指定ができることが分かります。実務や個人制作においても、HTMLを極力シンプルに保ちたい場合にとても役立つ考え方です。