CSS属性セレクタの使い方まとめ！初心者でもわかるHTMLフォームの見た目を整える方法

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

生徒

「先生、HTMLのフォームにだけCSSでデザインをつけたい時って、どうしたらいいですか？」

先生

「そんな時は、CSSの“属性セレクタ”という機能を使うと便利ですよ。」

生徒

「属性セレクタ？初めて聞きました。どういうものなんですか？」

先生

「わかりやすく説明しますね。実はHTMLのタグには、入力タイプや名前などの“属性”が書かれています。それを使ってCSSでピンポイントにスタイルを当てることができます。」

1. 属性セレクタとは？HTMLタグの「属性」をCSSで指定する方法

属性セレクタとは、HTMLのタグの中にある「属性（アトリビュート）」を指定して、CSSのデザインを当てる方法です。

たとえば、次のようなHTMLコードを見てみましょう。


<input type="text" name="username">
<input type="password" name="userpass">

ブラウザ表示

このように、<input>タグにはtypeやnameといった属性がついています。
CSSでは、このtypeがtextのものだけにスタイルをつけたい時、次のように書きます。


<style>
	input[type="text"] {
	    background-color: #e0f7fa;
	    border: 2px solid #0097a7;
	    padding: 10px;
	}
</style>

<input type="text" name="username">
<input type="password" name="userpass">

ブラウザ表示

このようにすると、type="text"だけが青い枠線になります。パスワードの入力欄は変化しません。

2. 属性セレクタの基本の書き方と種類を覚えよう

属性セレクタの基本的な書き方は次の通りです。

[属性名]：その属性が付いているすべての要素にスタイルがあたります。
[属性名="値"]：属性の値がぴったり一致している場合にだけスタイルがあたります。

では、それぞれの例を見てみましょう。


<style>
	input[name] {
	    border: 1px solid green;
	}
</style>

<input name="email">
<input>

ブラウザ表示

name属性を持っている要素だけに緑の枠線がつきます。
次に、値が一致するパターンを見てみましょう。


<style>
	input[name="email"] {
	    background-color: #fff8e1;
	}
</style>

<input name="email">
<input name="username">

ブラウザ表示

name="email"のものだけに背景色がつきます。

3. 「前方一致」や「部分一致」など便利な属性セレクタの応用

属性セレクタには、完全一致だけでなく「一部が合っていればOK」という指定もできます。
たとえば以下のような書き方があります。

[属性^="値"]：値の最初が一致する（前方一致）
[属性$="値"]：値の最後が一致する（後方一致）
[属性*="値"]：値のどこかに含まれていればOK（部分一致）

実際の例を見てみましょう。


<style>
	input[name^="user"] {
	    color: red;
	}
</style>

<input name="user1">
<input name="user_name">
<input name="admin">

ブラウザ表示

name属性の値がuserから始まっている要素だけ赤文字になります。

このようにして、似たような名前がついているフォーム要素などに一括でCSSを当てることができます。

4. 属性セレクタを使えばHTMLのclassやidがなくてもCSSを当てられる

CSSのデザインを当てるとき、多くの人がclassやidを使います。ですが、属性セレクタを使えば、classやidがなくても特定の要素を狙ってスタイルを当てることができます。

たとえば、次のように指定できます。


<style>
	a[target="_blank"] {
	    color: orange;
	    text-decoration: underline;
	}
</style>

<a href="https://example.com" target="_blank">別タブで開くリンク</a>
<a href="https://example.com">同じタブで開くリンク</a>

ブラウザ表示

このように、target="_blank"のついたリンクだけにスタイルを当てることができます。とても便利ですね。

5. フォームやボタンの見た目を属性でまとめてデザインする

属性セレクタを使うことで、フォーム全体の見た目を統一することができます。

次のように書けば、フォームの種類ごとにスタイルを変えられます。


<style>
	input[type="text"] {
	    background-color: #f0f4c3;
	}
	input[type="password"] {
	    background-color: #fce4ec;
	}
	input[type="submit"] {
	    background-color: #b2dfdb;
	    font-weight: bold;
	}
</style>

<input type="text" placeholder="名前">
<input type="password" placeholder="パスワード">
<input type="submit" value="送信">

ブラウザ表示

このように、見た目を整えると入力フォームがわかりやすくなり、使いやすくなります。

まとめ

CSS属性セレクタでできることを振り返ろう

ここまでの記事では、CSS属性セレクタの基本から応用までを、HTMLフォームの具体例を交えながら解説してきました。属性セレクタは、HTMLタグに書かれている「属性」と「属性の値」を手がかりに、CSSでスタイルを指定できる便利な仕組みです。特にフォーム要素やリンク、ボタンなど、見た目を整理したい場面で非常に役立ちます。

通常、CSSでデザインを当てるときは class や id を使うことが多いですが、属性セレクタを使えば、HTMLを変更せずにスタイルを指定できるという大きなメリットがあります。たとえば、inputタグの type 属性や name 属性、aタグの target 属性など、すでに存在する情報を活用することで、無駄なclassを増やさず、HTML構造をシンプルに保つことができます。

基本となる [属性名] や [属性名="値"] の指定を覚えるだけでも、フォームの入力欄や特定のリンクにピンポイントでCSSを当てられるようになります。さらに、前方一致、後方一致、部分一致といった応用的な書き方を使えば、命名規則が揃っている要素をまとめてデザインできるため、実務でも非常に重宝します。

属性セレクタは、HTMLとCSSの関係をより深く理解するきっかけにもなります。「このタグにはどんな属性があるのか」「どの属性を使えば目的の要素を指定できるのか」を考えることで、CSSの設計力も自然と身についていきます。フォームの見た目を整えたい初心者の方にとって、ぜひ覚えておきたいセレクタのひとつです。

まとめとして確認したいサンプルコード

最後に、これまで学んだ属性セレクタの考え方をまとめて確認できるサンプルコードを見てみましょう。入力フォームの種類ごとにスタイルを分けることで、視覚的にも分かりやすいUIを作ることができます。


<style>
	input[type="text"] {
	    border: 2px solid #64b5f6;
	    background-color: #e3f2fd;
	}
	input[type="password"] {
	    border: 2px solid #f48fb1;
	    background-color: #fce4ec;
	}
	input[type="submit"] {
	    background-color: #81c784;
	    color: #ffffff;
	    font-weight: bold;
	}
</style>

<input type="text" placeholder="ユーザー名">
<input type="password" placeholder="パスワード">
<input type="submit" value="ログイン">

ブラウザ表示

このように属性セレクタを使えば、HTMLフォーム全体のデザインを統一しつつ、入力内容の種類ごとに適切な見た目を設定できます。ユーザーにとっても入力しやすく、見やすいフォームを作るための大切なポイントです。

先生と生徒の振り返り会話

生徒

「属性セレクタを使えば、classを付けなくてもフォームをきれいにデザインできるんですね。」

先生

「そうですね。HTMLにすでに書かれている情報を活かせるのが、属性セレクタの大きな強みです。」

生徒

「前方一致や部分一致を使えば、似た名前の入力欄もまとめて指定できるのが便利だと思いました。」

先生

「その気づきはとても大切です。CSSは整理しながら書くことで、後から修正もしやすくなります。」

生徒