スタート!CSS入門

スタイルの優先順位

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSで書いたスタイルがどのような優先順位で適用されるのかについて、具体的な事例を交えながら紹介します。同じセレクタや、複数の競合しているセレクタに対して、異なるスタイルを適用したときの結果を確認しましょう。
講師:
06:24

字幕

このレッスンでは CSS で書いたスタイルがどのような優先順位で適用されるのかについて具体的に事例を交えながら紹介します。同じセレクタや複数の競合しているセレクタにたいして異なるスタイルを適用したときの結果を確認しましょう。画面は HTML5 をベースに簡単なウェブページを記述しウェブブラウザで表示した状態です。CSS によってスタイルも設定されています。背景色が深緑になっていることを覚えておいてください。HTML の構造を確認するため編集画面を開きます。HTML ではscreen.css を参照してスタイルを適用しています。screen.css を確認しましょう。screen.css を開きました。ウェブページ全体を囲む body 要素に対して深緑を表す#16a085 の背景色の値が設定されています。では、このルールセットよりも後ろで同じ body 要素に対して別の背景色を設定するとどうなるでしょうか試してみましょう。すでに記述済みのルールセットの後ろでbody 要素に対してシンクを表す別の背景色を設定します。これで body 要素に対して背景色の設定が二回行われていることになります。 結果をウェブブラウザで確認してみましょう。もう一度 HTML の編集画面を開きます。御覧のように先ほどと違って背景色はシンクに変わりました。このように CSS では後から書いたスタイルが優先的に適用されます。また CSS の異なる書き方併用している場合でも後から読み込んだほうが優先されます。さらに手を加えてみましょう。再び HTML の編集画面を開きます。screen.css の後ろでstyle 要素を使ってさらに背景色を上書きしてみましょう。body 要素に対して水色系の背景色を設定します。これで body 要素に対して背景色の設定がトータルで3回行われてることになります。結果をウェブブラウザで確認してみましょう。御覧のように背景色が水色に変わりましたCSS の書き方に関係なく後で記述したルールセットが優先されてることが確認できました。さて、次のようなケースではどうでしょうか別の HTMLindex_double-selector.html を開きます。先ほどと全く同じスタイルですがHTML の構造を若干変えています。確認してみましょう。index_double-selector.html の編集画面を開きました。 先ほどの index.html の違いは参照している CSS のファイル名とbody 要素に二つのクラスが設定されている点です。ここでは home とindex というクラスが設定されています。この二つのクラス名を覚えておいてください。CSS での記述を確認するためscreen_double-selector.html を開きましょう。screen_double-selector.html を開きました。先ほどの home というクラスセレクタに対して文字色と背景色が設定されています。この後ろでもう片方のindex というクラスに対して背景色を設定してみましょう。ここではオレンジ系の背景色を設定します。指定してセレクタが異なるものの二つのセレクタは共に body 要素に設定されてる状態です。結果をウェブブラウザで確認してみましょう。背景色は後で指定したindex というクラスのセレクタの背景色であるオレンジに変わりました。複数の競合しているセレクタに別々のスタイルを設定した場合でも後で指定したセレクタに対するスタイルが優先的に適用されていることがわかります。まとめです。このレッスンでは CSS で記述したスタイルがどのような優先順位で適用されるかについて同じセレクタや複数の競合してるセレクタに対して異なるスタイルを適用したときなど具体的な事例を交えながら学びました。

スタート!CSS入門

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

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

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

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

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