【CSS】擬似クラスの「:invalid」の使い方!【分かりやすい】

※この記事にはプロモーションが含まれています。
しゅーた(@chibasyuta)です!
この記事ではCSSの擬似クラスの「:invalid」の使い方について解説します。
このような方が対象です。
この記事の内容!
- 擬似クラスの「:invalid」を使うと何ができるのか?
- 擬似クラスの「:invalid」の使い方
それでは内容へ入ります!
擬似クラスの「:invalid」を使うと何ができる?

input:invalid {
border: 4px solid red;
}
「Webブラウザによる検証」とは?
「JavaScript」を使って独自の検証システムを作ってもOKですが、正しくHTMLを書いておけば、Webブラウザ側がある程度の「検証」を行ってくれます。
「form部品」の「input要素」には下記のようなタイプがありますよね。
- 「type=”number”」
- 「type=”email”」
他にも入力欄のタイプはたくさんあるのですが、この「type属性」によってユーザーに期待するデータのタイプが異なる訳です。
例えば「type=”number”」なら数字を受け付けますし、「type=”email”」なら「メールアドレス」を受け付けます。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座[第2版]
HTMLとCSSを、Webサイトを1つ作りながら基礎から通して学びたい方向けの入門書です。
Amazonのアソシエイトとして、当ブログは適格販売により収入を得ています。
参考リンク。
仕様書。
https://drafts.csswg.org/selectors/#validity-pseudos
MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/:invalid
あわせて読みたい記事。
大学生が夏休みにweb制作で13万円稼ぐまでにやったこと。【経験談】
まとめ
擬似クラスの「:invalid」を使うと、「Webブラウザによる検証」に失敗した無効な値を持つ「input要素」などの「form部品」にスタイルを当てることができる。
「Webブラウザによる検証」とは、フォームが送信される前に行われる、期待した形の適切なデータが入力されているかブラウザ側が確かめる処理のことを指す。
「Webブラウザの検証機能」はそれ以外のデータが入力されている場合、エラーメッセージなどを表示したりしてユーザーに伝えてくれる。
そして適切な値が入るまで、フォームの送信を止めてくれる。
この記事が気に入った方は僕のTwitter(@chibasyuta)のフォローもお願いします!
それではこんな感じでこの記事を終わります!
ではまた!
作って学ぶ HTML&CSSモダンコーディング
Flexbox や CSS Grid など、今のCSSの書き方をサンプルサイトを作りながら学べる本です。
Amazonのアソシエイトとして、当ブログは適格販売により収入を得ています。
\ めちゃくちゃ便利です /
毎日の新着を、通知で受け取る
最新の技術の動きを1分で読める記事にして、毎日お届けします。登録は無料で、いつでもやめられます。
iPhone は「ホーム画面に追加」すると通知を受け取れます
iPhone では、Safari で開いたままだと通知を出せない決まりになっています。このブログをホーム画面に置くと、アプリのように通知が届くようになります。下の5つを順番に行ってください。1分ほどで終わり、料金はかかりません。
-
共有ボタンを押す
いま見ているこのページのまま、画面のいちばん下を見てください。真ん中にある四角から上向きの矢印が出ているマークが共有ボタンです。これを1回タップします。
下のバーが見えないときは、画面を指で少し下に動かすと出てきます。
-
「ホーム画面に追加」を選ぶ
画面の下からメニューが出てきます。メニューを指で上に動かして下のほうを表示し、「ホーム画面に追加」(+のマーク)を探してタップします。
見当たらないときは、メニューの中の「その他」や「…」を押すと出てきます。
-
右上の「追加」を押す
「ホーム画面に追加」という画面に変わります。名前は「皇帝ペンギン」のままで大丈夫です。右上の「追加」をタップします。
-
ホーム画面のアイコンから開く
Safari を閉じてホーム画面に戻ると、ペンギンの絵の「皇帝ペンギン」というアイコンが増えています。これをタップして開きます。
ここが大事です。Safari からではなく、必ずこのアイコンから開いてください。
-
「通知をオンにする」→「許可」
開くと、画面の下に「通知をオンにする」という黄色いボタンが出ます。タップすると確認が出るので、「許可」を選びます。「通知をオンにしました」と出たら完了です。
次の日から、新しい記事が出るたびに通知が届きます。やめたいときは、記事の下の「この端末の通知をやめる」を押すか、アイコンを削除してください。
LINE や X のアプリ内で開いている場合は、先に右下や右上のメニューから「Safari で開く」を選んでください。
動画でじっくり学びたい方は YouTube メンバーシップ へ。