CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 属性セレクタ活用

Web APP CSS
スポンサーリンク

属性セレクタを“使いこなす”ための基礎と実践

属性セレクタは、HTMLタグが持つ属性（class・id 以外も含む）を条件にしてスタイルを当てる方法です。
初心者が理解すると CSS の表現力が一気に広がる、とても強力なテクニックです。

Tailwind CSS では属性セレクタを直接書くことは少ないですが、
「どう置き換えるか」も合わせて解説します。

属性セレクタとは何か

属性セレクタの基本形

CSSでは、次のように書くと「特定の属性を持つ要素」にスタイルを当てられます。

a[target] {
  color: red;
}
CSS

これは「target 属性を持つすべての <a>」が対象になります。

HTML例

<a href="page.html">通常リンク</a>
<a href="page.html" target="_blank">別タブで開くリンク</a>
HTML

上の CSS は後者だけに適用されます。

Tailwind では属性セレクタは使わず、対象の要素に直接クラスを付けます。

<a href="page.html">通常リンク</a>
<a href="page.html" target="_blank" class="text-red-600">
  別タブで開くリンク
</a>
HTML

属性セレクタの種類と使い分け

完全一致（[attr="value"]）

input[type="email"] {
  border-color: royalblue;
}
CSS

HTML

<input type="email">
<input type="text">
HTML

type="email" のみが対象。

Tailwind版

<input type="email" class="border-blue-600">
HTML

部分一致（*=）

「値の中に含まれていればOK」

a[href*="youtube"] {
  color: red;
}
CSS

YouTube へのリンクだけ色を変えたいときに便利です。

HTML

<a href="https://www.youtube.com/watch?v=123">動画</a>
<a href="https://example.com">通常リンク</a>
HTML

Tailwind版

<a href="https://www.youtube.com/watch?v=123" class="text-red-600">動画</a>
HTML

前方一致（^=）

「値がこの文字で始まるもの」

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

外部リンクを太字にしたいときなどに使えます。

HTML

<a href="https://example.com">外部リンク</a>
<a href="/about">内部リンク</a>
HTML

Tailwind版

<a href="https://example.com" class="font-bold">外部リンク</a>
HTML

後方一致（$=）

「値がこの文字で終わるもの」

img[src$=".png"] {
  border: 2px solid #ccc;
}
CSS

PNG画像だけ枠線を付けたいときに便利。

HTML

<img src="photo.png">
<img src="photo.jpg">
HTML

Tailwind版

<img src="photo.png" class="border-2 border-gray-300">
HTML

属性セレクタの“深掘りポイント”

属性セレクタは「HTMLの意味」を利用できる

例えば、フォームの入力タイプごとにデザインを変えたい場合。

input[type="text"] {
  background: #fff;
}

input[type="password"] {
  background: #f0f0f0;
}
CSS

HTML

<input type="text" placeholder="名前">
<input type="password" placeholder="パスワード">
HTML

Tailwind版

<input type="text" class="bg-white" placeholder="名前">
<input type="password" class="bg-gray-100" placeholder="パスワード">
HTML

属性セレクタは「HTMLの意味（type, href, src, target…）」をそのまま利用できるのが強みです。

Tailwindは「意味」ではなく「見た目」を直接書くスタイルなので、
属性セレクタのような“意味ベースの指定”は行いません。

よくある失敗と改善例

失敗例1：クラスで管理すべきところを属性セレクタで無理にやる

div[data-type="card"] {
  padding: 20px;
  background: #fafafa;
}
CSS

HTML

<div data-type="card">商品A</div>
HTML

これは動くけれど、デザイン目的ならクラスを使うべきです。

改善版

.card {
  padding: 20px;
  background: #fafafa;
}
CSS

Tailwind版

<div class="p-5 bg-gray-50">商品A</div>
HTML

失敗例2：部分一致を使いすぎて意図しない要素に当たる

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

shop を含む URL すべてが対象になるため、
/shopping/ などもヒットしてしまう可能性があります。

改善案：前方一致や完全一致を使う

a[href^="/shop"] {
  color: green;
}
CSS

例題で理解を深める

例題：外部リンクだけアイコンを付けたい

CSS版

a[target="_blank"]::after {
  content: "↗";
  margin-left: 4px;
  font-size: 12px;
}
CSS

HTML

<a href="https://example.com" target="_blank">外部リンク</a>
<a href="/about">内部リンク</a>
HTML

Tailwind版（疑似要素は CSS で補う）

<a href="https://example.com" target="_blank" class="external-link">
  外部リンク
</a>
<a href="/about">内部リンク</a>
HTML
.external-link::after {
  content: "↗";
  margin-left: 4px;
  font-size: 12px;
}
CSS

Tailwindは疑似要素を直接扱えないため、
必要に応じて CSS を併用するのが実務的な解決策です。

まとめ：属性セレクタは“意味ベースのデザイン”に強い

属性セレクタの強み

  • HTMLの属性をそのまま条件にできる
  • フォーム、リンク、画像などで特に便利
  • クラスを増やさずに柔軟な指定ができる

注意点

  • デザイン目的で data 属性を乱用しない
  • 部分一致（*=）は影響範囲が広くなりがち
  • Tailwind では基本的に使わず、必要な要素に直接クラスを付ける
スポンサーリンク
タイトルとURLをコピーしました