【上級編】CSSの擬似クラスの使い方！（ページ内リンク/入力系要素用）

【 2025/05/19 08:08 更新】

擬似クラスとは

擬似クラスとは、要素の特定の状態を指定できるセレクタの書き方の一種です。

要素にカーソルがあってる時・クリックした時など特定の状態のとき用のスタイルを指定できます。

【擬似クラスの書き方】

図中 "要素のセレクタ"について

セレクタとは、CSSとHTMLを紐づける名前や条件のようなものです。
HTML上のどの要素を示すのかを定義します。

【セレクタの書き方】

CSSセレクタの種類 (【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！) | こじはなNote

この記事は上級編だよ！基本編はこっちの記事を見てね！

【基本編】CSSの擬似クラスとは？基本的な擬似クラスの使い方を解説。| こじはなNote

:target｜ページ内リンクで飛んだ先の要素スタイル

:targetはページ内リンクを押してジャンプしたとき、ジャンプ先の要素に適用するスタイルを定義できます。

ジャンプ先の要素に指定

:targetはジャンプ先となる要素に指定します。

ページ内リンクとは

ページ内リンクは、現在開いているWebページ内で移動するリンクです。

【ページ内リンク設定の手順】

1, 移動先の要素のタグにid属性の値を指定する。
2, ページ内リンクを定義する。aタグのhref属性に「"#" ＋ 1,で指定したid属性の値」を指定。

<!-- ページ内リンク -->
<a href="#test001" >テスト001へジャンプするリンク</a>
<a href="#test002" >テスト002へジャンプするリンク</a>

<!-- ジャンプしたい要素 -->
<div id="test001">テスト001</div>
<div id="test002">テスト002</div>

これでページ内リンクの設定完成です！！

【 test.css 】


.target:target {
    background-color: aqua;
}

【 HTMLファイル】


<!-- ページ内リンク -->
<a href="#test001">テスト001へジャンプするリンク</a>
<a href="#test002">テスト002へジャンプするリンク</a>

<!-- ジャンプしたい要素 -->
<div id="test001" class="target">テスト001</div>
<div id="test002" class="target">テスト002</div>

ブラウザで実行するとこんな感じです。

実際にリンクを押してみてください！

※リンク/テキストのスタイルがデフォルトと異なる点はご了承ください。

※ブラウザのキャッシュが古い場合、上手く反映されない場合がございます。

テスト001へジャンプするリンク
テスト002へジャンプするリンク

テスト001

テスト002

ページ内リンクで飛んだ先の要素に、:targetで指定したスタイルが適用されました。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

aタグ

aタグとはリンクが作れるHTMLタグです。

【 aタグの書き方】

<a href="URLやパス" target="ページの開き方の設定">リンクの表示タイトル</a>

パスとはファイルやディレクトリ（フォルダー）がある場所のことです。

【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote

:checked｜チェックボックス・ラジオボタンが選択されているとき

:checkedは、inputタグのチェックボックス(type="checkbox")やラジオボタン(type="radio")が、選択されているときに適用するスタイルを定義できます。

inputタグとは

inputタグとは入力ができる要素です。
type属性に指定する値によって、様々な種類の入力要素になります。
formタグに内包して値を別の画面やプログラムに渡したり、JavaScriptと一緒に使ったりします。

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

【 test.css 】


.test-checked:checked {
    outline: 2px solid red;
}

【 HTMLファイル】


<label>ラジオ01</label><input type="radio" class="test-checked" name="radio01">
<label>ラジオ02</label><input type="radio" class="test-checked" name="radio01">
<br>
<label>チェック01</label><input type="checkbox" class="test-checked" name="check01">
<label>チェック02</label><input type="checkbox" class="test-checked" name="check01">

ブラウザで実行するとこんな感じです。

実際にボタンを押してみてください！

ラジオボタン/チェックボタンを押すと、:checkedで指定したスタイルが反映されます。

outlineプロパティとは

outlineプロパティとは、フォーカス(選択)された要素を明示させるために用意されたプロパティです。

枠線を指定できるborderプロパティと似ていますが、目的・表示位置が違います。

【 border・outlineの表示位置】

border：要素との境界に表示。
outline：border領域の外に表示。

【 borderプロパティについて詳しい記事】

borderプロパティ (【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！) | こじはなNote

radio/checkboxは無効なプロパティが多い

チェックボックス・ラジオボタンなど入力系要素はブラウザによってスタイルが固定されております。
そのため、普通に指定しても反映されないプロパティが多いのです。

例でborderじゃなくてoutlineプロパティで枠線を指定したのも、
borderが効かないからなんだ〜！

:in-range｜inputタグの入力値がmin・max属性の値の範囲内のとき

:in-rangeは、inputタグの入力値/value属性の値が、min・max属性に設定された値の範囲内であるときに適用するスタイルを定義できます。

注意

特定のブラウザやバージョンによっては、入力値/value属性の値が空っぽでも適用される場合があります。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

min/max属性と、指定できるtype属性

【 min/max属性とは？】

min属性：入力値に許容する範囲の最小値を設定できます。
max属性：入力値に許容する範囲の最大値を設定できます。

【 min/max属性を使えるtype属性について】

inputタグのtype属性の値が、number, range, date, month, week, time, datetime-localの場合にmin/max属性を指定できます。
それ以外のtype属性の値の場合は効果がありません。

number：数値を入力できます。
range：スライダーで数値を指定できます。
date：日付（YYYY-MM-DD）を入力できます。
month：月単位（YYYY-MM）を入力できます。
week：週単位（YYYY-WW）を入力できます。
time：時間（HH:mm）を入力できます。
datetime-local：日付と時間（YYYY-MM-DD HH:mm）を入力できます。

【 test.css 】


input:in-range {
    background-color: lightgreen;
}

【 HTMLファイル】


範囲5 ~ 30：
<input type="number" min="5" max="30" value="6">
<br>
範囲1999-01-01 ~ 2024-01-01：
<input type="date" min="1999-01-01" max="2024-01-01" value="2024-12-31">

ブラウザで実行するとこんな感じです。

実際に値を変えてみてください！

入力値が範囲内の場合、背景色が薄緑になります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

:out-of-range｜inputタグの入力値がmin・max属性の値の範囲外のとき

:out-of-rangeは、inputタグの入力値/value属性の値が、min・max属性に設定された値の範囲外であるときに適用するスタイルを定義できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

min/max属性と、指定できるtype属性

【 min/max属性とは？】

min属性：入力値に許容する範囲の最小値を設定できます。
max属性：入力値に許容する範囲の最大値を設定できます。

【 min/max属性を使えるtype属性について】

number：数値を入力できます。
range：スライダーで数値を指定できます。
date：日付（YYYY-MM-DD）を入力できます。
month：月単位（YYYY-MM）を入力できます。
week：週単位（YYYY-WW）を入力できます。
time：時間（HH:mm）を入力できます。
datetime-local：日付と時間（YYYY-MM-DD HH:mm）を入力できます。

【 test.css 】


input:out-of-range {
    background-color: red;
}

【 HTMLファイル】


範囲5 ~ 30：
<input type="number" min="5" max="30" value="6">
<br>
範囲1999-01-01 ~ 2024-01-01：
<input type="date" min="1999-01-01" max="2024-01-01" value="2024-12-31">

ブラウザで実行するとこんな感じです。

実際に値を変えてみてください！

入力値が範囲外の場合、背景色が赤になります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

:required｜入力系要素に属性requiredが指定されているとき

:requiredはinput/textarea/selectタグに属性requiredが指定されている場合に適用するスタイルを定義できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義 ( 入力系タグ(input/select/... ) | こじはなNote

required属性とは

required属性は、入力系の要素を必須入力設定できる属性です。
属性＝"値"の形式ではなく、"required"単体で指定します。

<input type="text" required>
<textarea required></textarea>
<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【 test.css 】


input:required,
select:required {
    background-color: lightpink;
}

【 HTMLファイル】


必須*
<input type="text" name="text01" required>
<br>
任意
<input type="text" name="text02">
<br>
必須*
<select name="select01" required>
    <option value=""></option>
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
</select>

ブラウザで実行するとこんな感じです。

実際に操作できます！

input・selectタグにrequired属性がある場合、背景色がピンクになります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

:optional｜入力系要素に属性requiredが指定されていないとき

:optionalとはinput/textarea/selectタグに属性requiredが指定されていない場合に適用するスタイルを定義できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義 ( 入力系タグ(input/select/... ) | こじはなNote

required属性とは

required属性は、入力系の要素を必須入力設定できる属性です。
属性＝"値"の形式ではなく、"required"単体で指定します。

<input type="text" required>
<textarea required></textarea>
<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【 test.css 】


input:optional,
select:optional {
    background-color: lightblue;
}

【 HTMLファイル】


必須*
<input type="text" name="text01" required>
<br>
任意
<input type="text" name="text02">
<br>
任意
<select name="select01">
    <option value=""></option>
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
</select>

ブラウザで実行するとこんな感じです。

実際に操作できます！

input・selectタグにrequired属性がない場合、背景色が薄い青になります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

:disabled｜入力系要素に属性disabledが指定されているとき

:disabledとはinput/textarea/selectタグに属性disabledが指定されている場合に適用するスタイルを定義できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義 ( 入力系タグ(input/select/... ) | こじはなNote

disabled属性とは

disabled属性は、入力系の要素を無効化(入力できない状態)にできる属性です。
属性＝"値"の形式ではなく、"disabled"単体で指定します。

PHP/Javaなどサーバーサイド言語やJavaScript/CSSで制御するときに使われることがあります。

<input type="text" disabled>
<textarea disabled></textarea>
<select disabled>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【 test.css 】


input:disabled,
select:disabled {
    background-color: gray;
}

【 HTMLファイル】


入力不可
<input type="text" name="text01" disabled>
<br>
入力可能
<input type="text" name="text02">
<br>
入力不可
<select name="select01" disabled>
    <option value=""></option>
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
</select>

ブラウザで実行するとこんな感じです。

実際に操作できます！

input・selectタグにdisabled属性がある場合、背景色がグレーになります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

:enabled｜入力系要素に属性disabledが指定されていないとき

:enabledとはinput/textarea/selectタグに属性disabledが指定されていない場合に適用するスタイルを定義できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義 ( 入力系タグ(input/select/... ) | こじはなNote

disabled属性とは

disabled属性は、入力系の要素を無効化(入力できない状態)にできる属性です。
属性＝"値"の形式ではなく、"disabled"単体で指定します。

PHP/Javaなどサーバーサイド言語やJavaScript/CSSで制御するときに使われることがあります。

<input type="text" disabled>
<textarea disabled></textarea>
<select disabled>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【 test.css 】


input:enabled,
select:enabled {
    background-color: lightgreen;
}

【 HTMLファイル】


入力可能
<input type="text" name="text01">
<br>
入力不可
<input type="text" name="text02" disabled>
<br>
入力可能
<select name="select01">
    <option value=""></option>
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
</select>

ブラウザで実行するとこんな感じです。

実際に操作できます！

input・selectタグにdisabled属性がない場合、背景色が薄緑になります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

:focus｜入力系要素にフォーカス（選択）したとき

:focusとはinput/textarea/selectタグなど入力系の要素にクリックやキーボード操作で要素をフォーカス（選択）したときに適用するスタイルを定義できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義 ( 入力系タグ(input/select/... ) | こじはなNote

【 test.css 】


input:focus,
select:focus {
    background-color: lightgreen;
}

【 HTMLファイル】


<input type="text" name="text01">
<br>
<select name="select01">
    <option value=""></option>
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
</select>

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

input/selectタグをフォーカスした場合、背景色が薄緑になります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

:focus-within｜入力系の子要素にフォーカス（選択）したとき

:focus-withinとはinput/textarea/selectタグなど入力系の子要素にクリックやキーボード操作で要素をフォーカス（選択）したときに、親要素に対して適用するスタイルを定義できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義 ( 入力系タグ(input/select/... ) | こじはなNote

親要素に指定

:focus-withinは親要素となる要素に指定します。
また、input/textarea/selectタグなど入力系の子要素を持っている必要があります。

親/兄弟/子要素とは

親要素　：内包している要素。
子要素　：内包されている要素。
兄弟要素：同じ階層にある要素。

【セレクタで親/子/兄弟を指定する方法】

【 test.css 】


.input-parent:focus-within {
    background-color: lightgreen;
}

【 HTMLファイル】


<div class="input-parent">
    inputタグの親要素
    <input type="text" name="text01">
</div>
<br>
<div class="input-parent">
    selectタグの親要素
    <select name="select01">
        <option value=""></option>
        <option value="apple">りんご</option>
        <option value="orange">みかん</option>
    </select>
</div>

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

input/selectタグをフォーカスした場合、親要素の背景色が薄緑になります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

:valid｜入力系要素の入力値が入力内容の条件に合致しているとき

:validとはinput/textarea/selectタグなど入力系の要素に対する入力値/value属性の値が、入力内容の条件に合致しているときに適用するスタイルを定義できます。

入力内容の条件とは

入力系タグに指定された属性type/pattern/required/min/maxなどの指定によって決められた入力値の許容条件のことです。

【入力値の許容条件に関係する属性について】

type：inputタグの入力要素の種類を設定できます。
pattern：入力文字を制限できます。値には正規表現という書き方で指定します。
required：必須入力を条件に設定できます。
min：入力値に許容する範囲の最小値を設定できます。
max：入力値に許容する範囲の最大値を設定できます。

min/max属性と、指定できるtype属性

【 min/max属性とは？】

min属性：入力値に許容する範囲の最小値を設定できます。
max属性：入力値に許容する範囲の最大値を設定できます。

【 min/max属性を使えるtype属性について】

number：数値を入力できます。
range：スライダーで数値を指定できます。
date：日付（YYYY-MM-DD）を入力できます。
month：月単位（YYYY-MM）を入力できます。
week：週単位（YYYY-WW）を入力できます。
time：時間（HH:mm）を入力できます。
datetime-local：日付と時間（YYYY-MM-DD HH:mm）を入力できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義 ( 入力系タグ(input/select/... ) | こじはなNote

【 test.css 】


input:valid,
select:valid {
    background-color: lightgreen;
}

【 HTMLファイル】


必須※
<input type="text" name="text01" required>
<br>
範囲5 ~ 10・必須※
<input type="number" name="number01" min="5" max="10" required>
<br>
必須※
<select name="select01" required>
    <option value="" disabled selected></option>
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
</select>

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

それぞれ入力内容の条件に合致している場合、背景色が薄緑になります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

disabled属性とは

disabled属性は、入力系の要素を無効化(入力できない状態)にできる属性です。
属性＝"値"の形式ではなく、"disabled"単体で指定します。

PHP/Javaなどサーバーサイド言語やJavaScript/CSSで制御するときに使われることがあります。

<input type="text" disabled>
<textarea disabled></textarea>
<select disabled>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

selected属性とは

selected属性は、チェックボックス(type="checkbox")やラジオボタン(type="radio")を選択済みにする属性です。
属性＝"値"の形式ではなく、"selected"単体で指定します。

PHP/Javaなどサーバーサイド言語やJavaScriptで制御するときに使われることがあります。

選択肢1
<input type="radio" name="radio01" value="1">
選択肢2
<input type="radio" name="radio01" value="2" selected>
選択肢3
<input type="radio" name="radio01" value="3">
<br>
<select disabled>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option selected>
</select>

:invalid｜入力系要素の入力値が入力内容の条件に合致していないとき

:invalidとはinput/textarea/selectタグなど入力系の要素に対する入力値/value属性の値が、入力内容の条件に合致していないときに適用するスタイルを定義できます。

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる ( 入力系タグ(input/select/... ) | こじはなNote

textareaタグとは

textareaタグは複数行のテキストを入力できるテキストボックスです。

<textarea name="textarea01"></textarea>

【textareaタグに関する記事】

textareaタグ｜複数行の文字を入力できるテキストボックス ( 入力系タグ(input/select/... ) | こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義 ( 入力系タグ(input/select/... ) | こじはなNote

【 test.css 】


input:invalid,
select:invalid {
    background-color: red;
}

【 HTMLファイル】


必須※
<input type="text" name="text01" required>
<br>
範囲5 ~ 10・必須※
<input type="number" name="number01" min="5" max="10" required>
<br>
必須※
<select name="select01" required>
    <option value="" disabled selected></option>
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
</select>

ブラウザで実行するとこんな感じです。

実際に操作してみてください！

それぞれ入力内容の条件に合致していない場合、背景色が赤になります。

background-colorプロパティ

background-colorプロパティは背景の色を指定できるプロパティです。
プロパティの記載は「background-color: (色)」のように指定します。

disabled属性とは

disabled属性は、入力系の要素を無効化(入力できない状態)にできる属性です。
属性＝"値"の形式ではなく、"disabled"単体で指定します。

PHP/Javaなどサーバーサイド言語やJavaScript/CSSで制御するときに使われることがあります。

<input type="text" disabled>
<textarea disabled></textarea>
<select disabled>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

まとめ

擬似クラスとは、ページ内リンクを押してジャンプしたとき、ジャンプ先の要素に適用するスタイルを定義できる。
:target：パソコンのカーソル（ポインター）の位置が要素の上にあるときに適用するスタイルを定義できる。
:checked：inputタグのチェックボックス(type="checkbox")やラジオボタン(type="radio")が、選択されているときに適用するスタイルを定義できる。
:in-range：inputタグの入力値/value属性の値が、min・max属性に設定された値の範囲内であるときに適用するスタイルを定義できる。
:out-of-range：inputタグの入力値/value属性の値が、min・max属性に設定された値の範囲外であるときに適用するスタイルを定義できる。
:required：input/textarea/selectタグに属性requiredが指定されている場合に適用するスタイルを定義できる。
:optional：input/textarea/selectタグに属性requiredが指定されていない場合に適用するスタイルを定義できる。
:disabled：input/textarea/selectタグに属性disabledが指定されている場合に適用するスタイルを定義できる。
:enabled：input/textarea/selectタグに属性disabledが指定されていない場合に適用するスタイルを定義できる。
:focus：input/textarea/selectタグなど入力系の要素にクリックやキーボード操作で要素をフォーカス（選択）したときに適用するスタイルを定義できる。
:focus-within：input/textarea/selectタグなど入力系の子要素にクリックやキーボード操作で要素をフォーカス（選択）したときに、親要素に対して適用するスタイルを定義できる。
:valid：input/textarea/selectタグなど入力系の要素に対する入力値/value属性の値が、入力内容の条件に合致しているときに適用するスタイルを定義できる。
:invalid：input/textarea/selectタグなど入力系の要素に対する入力値/value属性の値が、入力内容の条件に合致していないときに適用するスタイルを定義できる。

【 2025/05/19 08:08 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！