CSS3の基本 - レベルアップCSS

UI要素状態疑似クラス

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームの状態に応じてスタイルを付加するときは、Selectors Level 3で定義されているUI要素状態疑似クラスを使用します。ここでは、UI要素状態疑似クラスの使い方について紹介します。
講師:
06:02

字幕

フォームの状態に応じてスタイルを適用するときはセレクターズ Level3 で定義されているUI 要素状態擬似クラスを使います。ここでは UI 要素状態擬似クラスの使い方について紹介します。画面では左側に HTML と CSS の編集画面、右側にその結果を表示するウェブブラウザを表示しています。現在 HTML ではいくつかのフォームの部品を表示しています。この中で HTML5 から使えるようになった「 disabled 」属性について注目してみましょう。disabled 属性はそのフォームが一時的に使えない状態であるということを示す属性です。ここでは住所というテキストフィールドに対してdisabled 属性が設定されていますのでウェブブラウザ上ではこの住所というテキストフィールドを選択したり、入力したりすることはできません。ここでは disabled 属性が指定されているテキストフィールドに対してセレクタを書いてみましょう。disabled 疑似クラスを使います。disabled 疑似クラスを使うにはまず記号の :そして決められたキーワードである disabledという文字列を入力します。 こうすることで HTML の中でdisabled 属性が指定された一時的に無効なフィールドに対してスタイルを適用することができます。ここでは disabled 属性が指定されているテキストフィールドの背景色を変更してみましょう。背景色を変更するために background-colorプロパティを使います。ここでは濃い灰色を指定してみましょう。ウェブブラウザを見ると濃い灰色が背景色に指定されていることが分かります。引き続きフォームは選択も入力もすることができません。この disabled 属性を使って一時的にフォームの入力を無効にする機能は例えば住所を入力するときにまず郵便番号を入力してその後に他の住所を入力してほしいとき。そういうときなどに一時的に後ほど入力してほしいフィールドを無効化しておくときなどに使われます。次に disabled 疑似クラスの反対としてenabled 疑似クラスというのを紹介します。enabled 疑似クラスは disabled と反対に現在入力が有効になっているフィールド、このようなフィールドに対してスタイルを適用することができます。それでは enabled 疑似クラスを使ってみましょう。 enabled 疑似クラスを使うには : を書いてenabled という風に決められたキーワードを入力します。ここでは背景色にエメラルドグリーンを設定してみましょう。2ecc71 という値を入力します。ウェブブラウザを見ると現在入力が有効になっているフォーム、この部品に対して背景色がエメラルドグリーンに設定されています。ここではテキストフィールドだけに適用したいため enabled 疑似クラスの前にinput 属性というセレクタやさらにtype 属性を使ってテキストフィールドだけにセレクタを適用するように属性セレクタこれを追加します。こうすることでテキストフィールドの背景色だけにこの記述した CSS が適用されるようになりました。そして3つ目は checked 疑似クラスです。checked 疑似クラスはチェックボックスやラジオボタンのチェック状態、オンオフの状態に応じてスタイルを適用するセレクタです。ここでは checked 疑似クラスを使ってチェックしているチェックボックスの横にあるラベルに対して背景色を設定してみましょう。checked 疑似クラスを使うには : の後にchecked という決められたキーワードを入力します。 ここではチェックされたチェックボックスの横のラベルを指定するため隣接セレクタを使います。+ 記号を使ってチェックされたチェックボックスに隣接するラベル要素にだけスタイルを適用します。ここでは背景色に山吹色を設定してみましょう。この状態では checked 疑似クラスはチェックをしたものの横にあるラベルに背景色を設定するためまだウェブブラウザでは確認することができません。それではこちらの「男」と書かれているチェックボックスにチェックを入れてみましょう。「男」と書かれている文字列の後ろに背景色が設定されました。このようにユーザーインターフェース要素の状態によってセレクタを記述しスタイルを適用するのがユーザーインターフェース要素状態疑似クラスです。このレッスンではフォームの状態に応じてスタイルを付加するUI 要素状態擬似クラスの使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。