スタート!CSS入門

セレクタの組み合わせ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数のセレクタを組み合わせることで、スタイルの適用範囲をさらに特定することができます。ここでは、様々なセレクタの組み合わせ方を紹介します。
講師:
07:46

字幕

このレッスンでは複数のセレクタを組み合わせてスタイルの適用範囲をさらに特定する方法について紹介します。セレクタの組み合わせは大きく分けて三種類あります。1つ目は子孫セレクタです。親要素に含まれるすべての子孫要素を対象にするセレクタです。実際に CSS を書いてみましょう。編集画面とウェブブラウザを並べて開きます。ここではコードを編集するIDE の機能を使って編集内容をリアルタイムにウェブブラウザでプレビューできるように設定しています。ウェブブラウザの上部にはそのための注意文が表示されていますが無視してください。通常はコードを書き換えてからウェブブラウザで再読み込みをすると編集内容が反映されます。子孫セレクタを使うにはまず、基準となるセレクタを書き半角スペースの後にその子孫にあたるセレクタを書きます。ここでは main 要素の子孫にあたるp 要素をセレクタにしましょう。実際に記述していきます。main 要素の子孫にあたる p 要素をセレクタにします。このセレクタに対して文字色を赤系の色になるように設定します。文字色の設定は color プロパティで行います。子孫セレクタで main 要素の子孫であるp 要素の文字色が赤系の色になりました。 ウェブブラウザでその要素が確認できます。main 要素の子孫以外の p 要素例えばheader 要素の子孫である p 要素こちらについては無色のままです。子孫セレクタは複数つなげて書くこともできます。例えば、今書いた子孫セレクタのさらに子孫を指定する方法を試してみましょう。main 要素の子孫にあたる p 要素さらにその子孫にあたるem 要素についてfont のweight を太字にしてみます。いかがでしょうかmain 要素の子孫である p 要素、さらにその子孫であるem 要素こちらの font weight が太字になっていることが確認できます。このようにセレクタ同士を半角スペースで区切ることでいくらでも子孫を指定できます。とはいえあまり長くするとHTML の文章構造に縛られたCSS になってしまうため使い勝手が悪くなってしまいます。注意しましょう。セレクタの組み合わせのリストに戻ります。二つ目の子セレクタ親要素の直下にある子要素を対象にするセレクタです。孫要素以下は対象に含まれません。実際に CSS を書いてみましょう。編集画面とウェブブラウザを並べて開きます。ここでは子セレクタを使ってmain 要素の直下にあるp 要素をセレクタにしてみましょう。 HTML を確認します。main 要素の直下の p 要素とは子にあたる p 要素のことです。例えば、この p 要素はmain 要素の子にあたる blockquote の要素のさらにその子、つまり main 要素から見ると孫にあたるためスタイルは適用されません。では、セレクタを書いてみましょう。子セレクタを使うにはまず、基準となるセレクタここでは main 要素さらに大なり記号そしてその子に当たるセレクタを順に書きます。大なり記号の前後には見やすいように半角スペースを入力するといいでしょう。このセレクタに対いして文字色を青色になるように設定します。先ほどと同様に color プロパティを使って文字色を設定します。子セレクタで main 要素の直下にある p 要素の文字色が青色になりました。main 要素の孫にあたる p 要素は元の文字色のままです。子セレクタも子孫セレクタのように複数つなげて書くことができます。セレクタの組み合わせのリストに戻ります。最後の隣接セレクタはある要素の直後にある要素を対象にするセレクタです。実際に CSS を書いてみましょう。編集画面とウェブブラウザを並べて開きます。 ここでは隣接セレクタを使ってtable 要素の直後にある p 要素をセレクタにしてみましょう。HTML を確認します。こちらに table 要素があります。この table 要素の後ろに事業 p 要素が入っています。この p 要素のみをセレクタとして指定します。隣接セレクタを使うにはまず、基準となるセレクタを記述します。ここでは table 要素を基準とするためまず、 table 要素を記述します。そのあとにクラス記号を入力さらにその直後にあたるセレクタを順に書きます。ここでは table 要素直後にあたるのはp 要素です。このセレクタに対して文字色を緑系の色にしてみましょう。同様に color プロパティを使って緑色に文字色を設定します。ウェブブラウザで確認しましょう。スクロールしてみるとテーブルの後ろの p 要素こちらが文字色が緑色に変更されてることがわかります。隣接セレクタも他の組合わせと同じように複数つなげて書くことができます。セレクタの組合わせのリストに戻ります。これらの組合わせは単体にも組合わせ同氏を組合わせても使えます。また、このレッスンではすべてのセレクタをタイプセレクタ要素で表現しましたがクラスセレクタ、 ID セレクタなどのセレクタでも併用して組み合わせることができます。 なお、これらのセレクタの組み合わせは現在一般に最も普及しているCSS2.1 に基づくもので他のバージョンでは若干異なることに注意してください。このレッスンでは複数のセレクタを組み合わせてスタイルの適用範囲をさらに特定する方法について学びました。

スタート!CSS入門

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

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

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

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

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