コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
複数セレクター(セレクタリスト)
このレッスンでは、 「セレクタリスト」とも呼ばれます 「複数セレクター」について ご説明をします。 複数のセレクタは、 カンマ区切りで記述をすれば、 その複数のセレクタすべてに 同じCSS規則が適用できます。 構文としては、「セレクタ, セレクタ,」と どんどん続けていけるわけですね。 今開いたのはMDNの 「CSS入門のページ」ですけれども、 その「コンビネーターとセレクターリスト」 という項目です。 その最後の方に書いてあるんですけれども、 これですね。 「セレクタのグループ」という また別の書き方をしてありますが、 これはセレクタリストのことですね。 p, li、そうすると、 p要素とli要素、両方に 同じフォントサイズが適用されます。 よくあるのは、こういうパターンですね。 最初に全部スタイルをそろえておきたいと。 その上で個別に調整するということで、 たくさんのセレクタをカンマ区切りで、 ここではフォントファミリーを 決めていますけれども、 設定していると。 こんな使い方がよく見られます。 このHTMLドキュメントには、 実はもう複数セレクタ、 セレクタリストは使われてるんですね。 h1 と h3 と strong ということになっていますけれども、 もちろん、この要素セレクタ、 型セレクタですね、だけに限りません。 どんなセレクタでも適用できます。 例えば h1 には id、 headline が設定されていますから、 h1 の代わりに #headline とすれば 同じく h1 が選ばれますし、 strong については クラスが設定されていますね。 class important がありますから、 .important というふうにすれば、 やはりこの strong の要素に対して 同じカラーが、ブルーですね、 設定されます。 あるいは、p要素に hover したら、 疑似クラスですね。これも使えます。 こうするとp要素に マウスポインタを重ねた時に このテキストがブルーに変わる ということになります。 では、確認しましょう。保存します。 先ほどと同じ表示ですね。 h1要素と、それから h3 と、 強調の strong がブルーです。 ただ、追加したのは p にホバーすると、 マウスポインタを重ねると ブルーということで、…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。