スタート!CSS入門

疑似クラス

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素や属性ではなく、状況によってスタイルを付加するときは疑似クラスを使います。ここでは、疑似クラスの書式について紹介します。
講師:
07:50

字幕

このレッスンでは要素や属性ではなく状況によってスタイルを設定するときに使う疑似クラスについて紹介します。疑似クラスは大きく分けて4種類あります。1つ目は first-child疑似クラスです。指定したセレクタがある要素における最初の子要素である場合のみ対象になります。実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ここではコードを編集するIDE の機能を使って編集内容をリアルタイムにウェブブラウザでプレビューできるように設定しています。ウェブブラウザの上部にはそのための注意文が表示されていますが無視してください。通常はコードを書き換えてからウェブブラウザで再読み込みすると編集内容が反映されます。first-child 疑似クラスを使うには、まず、基準となるセレクタを書きコロンの後に first-child と書きます。ここでは list 要素の liこちらの要素をセレクタにしてみましょう。まず、 list 要素を書きそのあとにコロンを書きます。そのあとに first-childfirst と child の間にはハイフンが入ります。これでセレクタの完成です。このセレクタに対して背景色をエメラルドグリーンになるように設定してみましょう。 背景色の設定はバックグラウンドプロパティを使います。ウェブブラウザを見るとエメラルドグリーンが設定されています。first-child 疑似クラスでul 要素の最初の子要素にあたるli 要素こちらの背景色がエメラルドグリーンになりました。最初以降の li 要素の背景色はもとのままです。なお、 first-child 疑似クラスに似たものとしてlast-child 疑似クラスという最後の子要素を選択するものもありますがこちらは CSS3 の仕様に含まれます。疑似クラスのリストに戻ります。二つ目の link 疑似クラスはlink の状況が対象になります。実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ここでは link 疑似クラスを使って未訪問の link と訪問の済みの link をセレクタにしてみましょう。link 疑似クラスを使うにはまず、 link を定義する a 要素そしてコロンさらに link を順に書きます。未訪問 link についてはa 要素、コロンvisited を順に書きます。前者が未訪問の link後者が訪問済みの linkそれぞれに対してのセレクタになります。 このセレクタに対してそれぞれ文字色を設定しましょう。未訪問は赤い色color プロパティを使って設定します。訪問済みはグレーです。こちらも color プロパティを使って設定します。link 疑似クラスを使って未訪問の link の文字色が赤になりました。訪問済の link はグレーになることを確認してみましょう。一番上の link を開いてみます。もとのぺージに戻ります。訪問済の link がグレーになっていますね。疑似クラスのリストに戻ります。三つ目の動的疑似クラスはあるセレクタに対するユーザーの操作を対象にします。ダイナミック疑似クラスとも呼ばれます。実際に CSS を書いてみましょう。編集画面とウェブブラウザに戻ります。ここでは動的疑似クラスを使ってlink がロールオーバー状態にあるときとクリックされている間中をセレクタにしてみましょう。動的疑似クラスを使うにはまず、基準となるセレクタここでは a 要素それに続けてコロンさらに hoverこうやってセレクタを記述します。もう1つのクリックされている間中に関してはa 要素、コロン、 activeこのように記述します。前者が link のロードオーバー状態後者が link をクリックしている間中を示すセレクタになります。 ここでは link を対象にしたためa 要素を使っていますが他の要素でも動作します。このセレクタに対してそれぞれ背景色を設定します。ロールオーバー状態は山吹色を設定してみましょう。link をクリックしている間はオレンジになります。背景色を設定するには background-colorプロパティを使います。動的疑似クラスで link のロールオーバー状態の背景色が山吹色に設定されています。試してみましょう。いかがですかロールオーバーしているときは背景色が山吹色になっていますね。それではクリックしている間はどうなるでしょうかマウスのボタンを押しっぱなしにします。背景色は変わりましたね。マウスのボタンを離すとまた、山吹色に戻ります。link が開きましたのでいったん閉じます。山吹色に戻っていますね。また、先ほど設定した訪問済み link の色も適用されています。疑似クラスのリストに戻ります。動的疑似クラスの focus 疑似クラスや最後の項目である言語疑似クラスは一部の古いブラウザで動作しない点を考慮してここでの紹介は割愛します。なお、これらの疑似クラスは現在一般に最も普及しているCSS2.1 に基づくもので他のバージョンでは若干異なることに注意してくださいまた、このレッスンでは疑似クラスのセレクタを全てタイプセレクタで表現しましたがクラスセレクタ、 ID セレクタなどのセレクタでも併用し組み合わせることができます。 ただし link 疑似クラスについてはlink を定義する要素のみ使えます。このレッスンでは要素や促成ではなく状況によってスタイルを設定するときに使う疑似クラスについて学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

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

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

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

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