2017.12.13今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。CSS3からフォーム向けの便利な擬似クラスが追加されてるのですが試してなかったのでテスト。フォームサンプルHTML5のフォームバリデーションサンプルです。Apartのデモを少し変えただけ参考に。class="invalid">正しいメールアドレス入れてくださいまし。class="valid">正しいメールアドレスです。</span></p></div>type="email"でメールアドレスかどうかを判断します。none;にしておき、:requiredと:invalid擬似クラスで入力値に応じてスタイルします。/>pattern属性で正規表現を使って入力チェックし、マッチした/しない場合も:requiredと:invalidでスタイルできます。HTML5はフォームバリデーションがJavaScript不要とはいえ、実際に使い場合は正規表現を覚えてる必要がありますね。フォームで使えそうな擬似クラスは他にもあるみたいです。enableddisabledindeterminatedefaultrequiredoptionalread-onlyread-writeこの辺はリファレンスでご確認下さい。QueriesとjQueryを使って、スマートフォンでアクセスした時だけナビゲーションメニューを上に隠すシンプルで良かったので一応メモ。ンシブWebデザインのTipsです。良質なものが揃っているので、...cssやプログラミンググリッドレイアウトを意識したレスポンシブWebデザインをSass/Compassを使って構築する為のサンプルなかなか珍しかったので備忘録。"http://kachibito.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js-end");/*]]>*/タイトルとURLをコピーしました。