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

間接セレクタ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ある要素の後にある別の要素に対してスタイルを付加するときは、間接セレクタを使用します。ここでは、間接セレクタの使い方について紹介します。
講師:
03:00

字幕

ある要素の後にある別の要素に対してスタイルを付加するときは間接セレクタを使用します。このレッスンでは間接セレクタの使い方について紹介します。ウェブブラウザではいくつかの見出しや段落、本文が表示されています。HTML を見るとこれらは h1 要素や h2 要素p 要素などで定義されていることが分かります。ここでは h2 要素、2つ目のレベルである見出しを定義しているh2 要素の後に定義されているp 要素にだけ文字色を赤にしてみるということをやってみたいと思います。間接セレクタを使うにはまず元となる要素、ここでは h2 要素ですがこの要素のセレクタを記述します。その後に記号の ~ こちらを結合子として入力します。こうすることで h2 の後に記述したあるセレクタというような指定になります。ここでは h2 の後に定義されている p 要素にだけ文字色を変更したいためこのような書式になります。そしてここにカラープロパティで文字色を設定してみましょう。カラープロパティで文字色を赤に設定します。ウェブブラウザを見ると冒頭の p 要素は黒のままですがh2 要素の後に定義されている p 要素については文字色が赤くなっていることが分かります。 しかし一段落だけ p 要素の文字色が変わっていない場所があります。この部分の HTML を確認してみましょう。この部分では確かに h2 要素の後にp 要素が定義されていますがこの p 要素だけさらに div 要素で囲まれていることが分かります。これでは h2 と p 要素が同じレベルになっていませんので先ほど書いたセレクタでは適用の対象外になるということです。このように間接セレクタではあるセレクタとあるセレクタの並ぶ階層が重要になってきますので十分注意して下さい。このレッスンではある要素の後にある別の要素に対してスタイルを付加するときに使う間接セレクタの使い方について学びました。

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

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

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

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

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

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