コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
擬似クラスを使う
このレッスンでは、 擬似クラスについてご説明をします。 「疑似クラス」というのは、 セレクタの後に加えられる キーワードなんですが、 「:」で始まります。 そして、そのセレクタの要素に対して キーワードが示す特定の状態になった時、 その要素にスタイルが適用される という形になります。 構文としては、 ですから「セレクタ」の後に 「:キーワード」という形式になります。 今開いてるのは、 MDNの「CSS入門」、 その「疑似クラスと疑似要素」 というページなんですけれども、 擬似クラスはこちらですね。 そして結構たくさんありますけれども、 めったに使わないものもありますし、 全部覚える必要はもちろんありません。 興味のあるもの、使うものから 順番に覚えていけば結構です。 今回使ってみたいのは、この3つです。 まず、:first-child ですね。 これは兄弟要素のグループがある中で 最初の要素ということになります。 それから、よく使われるのが :hover ですね。 マウスポインタを重ねた時 ということになります。 それからこちらも結構使うと思うんですが、 :active。 クリックしたときですね。 クリックした時に そのスタイルが適用されます。 3つの疑似クラスは、 この、ちょうど3つあるんですけれども、 li要素に適用してみたいと思います。 ではまずは、li要素に適用するんですよね。 そして :first-child からいきましょう。 first-child、最初の要素。 ということは、先頭のこれですね。 これに対して適用されるんですけれども、 では、文字色で確認しやすいので 変えましょう。 color で green とします。 まず確かめてみましょうか。 ファイルを保存しましょう。 li要素3つの中で 最初の項目がグリーンに変わりました。 疑似クラス、あと2つですね。 では、同じく li要素で :hover。 マウスポインタを重ねた時 ということですけれども、 color で色は red にします。 3つ目も使ってしまいましょう。 li:active と。 クリックした時。 では、color は blue ということで、 マウスポインタを重ねると テキストが赤くなり、 クリックすると青くなる ということになりますね。 保存して確かめます。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。