使い方aboutお問い合わせ広告掲載モダンなフォームを作るために覚えておきたいCSSの擬似クラス作成:2016/11/21更新:2016/11/21Web制作モダンなフォームを作るために覚えておきたい擬似クラスをまとめました。Link疑似クラスとは疑似クラスとはその名の通り疑似的なクラスをCSSで作るということで、指定したセレクタや外的要因に対し要素「全体」にスタイル変更を加えるものです(例「:hover」を指定した要素全てに対し、マウスポインタが乗った時の見え方をCSSを追加する)。擬似要素は指定した文字などの「一部」に対し見え方を変更したり、コンテンツ(要素)をCSSの中で追加できます(::afterとか::first-letter)。見分け方としては擬似クラスはコロン一つ(:)、疑似要素はコロン2つ(::)。いずれも、html内に直接マークアップする事が好ましくない場合などに使います。CSSの疑似クラスはセレクタに付加するキーワードであり、選択される要素に対して特定の状態を指定します。疑似クラスは、選択した要素上にマウスカーソルがあるときにスタイルを適用します。MDN疑似クラスと疑似要素の違いについては今回の記事では詳しく説明しませんが、非常に分かりやすい記事がありましたので興味ある方はこちらを御覧ください。株式会社bridgeフォームバリデーションの対応状況はこちら。use:valid入力フォームなどで記入ミスをチェックするバリデーションを疑似クラスを使ってスタイルを変更します。フォームに入力した値が正しい時(type属性と合っているか判定。電話番号とかメールアドレスパターンと一致するかどうか判定して応答します。)には:validでスタイルを適用します。値が正しくない場合は:invalidを適用します。下記の場合、フォームにURLを入力するとフォーム内が緑色になります。q-Az:requiredhtmlのrequired属性は入力フォームを必須にさせますが、スタイルシートで:requiredを指定すると入力を必須にしている要素のスタイルを変更できます。CSS-Tricks:optionalそれでは、入力必須でない場合には何を使うとよいのでしょうか。入力を必須にしていない時は:optionalを使います。blue;}:read-onlyhtml5のreadonly属性を使うと、指定した箇所をユーザーは変更できなくなります。CodePen.ユーザーが変更できる要素にスタイルを適用したい場合は:read-writeでスタイルを指定します。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2014/08/4メモしておきたい!サイト制作時に知っておくと「意外」と役に立つこと今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。ドメイン2016/04/25これは凄い!Web制作が捗るモーフィング系の最新スニペットまとめある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。2016/07/11最高にわかるChromeデベロッパーツールの使い方(チートシート付き)初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパー2016/06/6その手があったか、と思わせてくれそうなCSSやアニメーションなどのまとめ今っぽくするための、ありそうで無かったエフェクト。その手があったか、と思わせてくれそうなアイデアとソース。コメントデータの処理方法の詳細はこちらをご覧ください。