スタート!CSS入門

!importantルール

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スタイルの優先順位を決める上で、最優先されるのが!importantルールです。ここでは、!importantルールの書き方について紹介します。
講師:
05:15

字幕

このレッスンではスタイルの優先順位を決めるうえで最優先される !important ルールについて紹介します。画面は HTML5 をベースに簡単なウェブページを記述しウェブブラウザで表示した状態です。CSS によってスタイルも設定されています。背景色がシンクになっていることを覚えておいてください。HTML の構造を確認するため編集画面を開きます。HTML では screen.css を参照してスタイルを適用しています。body 要素には home というクラスが設定されています。screen.css を確認しましょう。screen.css を開きました。ウェブページ全体を囲む body 要素に対して深緑の背景色が設定されています。さらに body 要素に設定されたhome というクラスに対してシンクの背景色が設定されています。body 要素と home クラスこの二つのセレクタは競合していますのでセレクタの詳細度によってhome クラスのスタイルつまり、シンクの背景色が優先され先ほどのように表示されました。このようにスタイルの優先順位はセレクタの詳細度や書かれてる順番によって決まります。 ここで問題になるケースがあります。複数の CSS ファイルでスタイルを定義しているときに運用上の理由などから一部の CSS ファイルしか編集できないというケースです。このようなケースで編集できないCSS ファイルの中に詳細度の高いセレクタが存在している場合そのスタイルを上書きできなくなってしまうのです。HTML のスタイル属性に直接スタイルを書いて上書きする方法はありますが外部 CSS と HTML にスタイルが散乱してしまうのは運用上好ましくありません。こんな時に便利なのが!important ルールです!important ルールを使うとセレクタの詳細度やスタイルが書かれている順番よりも最優先でスタイルを適用できます。先ほどの CSS で !important ルールを試してみましょう。screen.css に戻ります。現在はセレクタの詳細度によってhome クラスのスタイルつまり、シンクの背景色が優先されてる状態です。body 要素で指定している深緑の背景色を優先するように!important ルールを追加します。!important ルールは優先させたい宣言の後にエクスクラメーションマークとインポートと入力します。 値との区別をつけやすいように半角スペースを入力しても良いでしょう。これで、 body 要素の背景色に!important ルールを適用しました。結果をウェブブラウザで確認してみましょう。背景色がシンクから深緑に変わりました。このように !important ルールはスタイルの優先順位を大きく変更できる機能です。また、 !important ルールは複数書くこともできます。!important ルールが適用されている宣言が競合した場合は通常通りセレクタの詳細度や書かれている順番によって優先順位が決まります。!important ルールは大きく優先順位を制御できる一方で優先順位の見通しが悪くなるというデメリットも抱えています。そのため運用上の理由などでどうしても必要な場面以外でむやみに使うことはお勧めしません。なるべくセレクタの詳細度や記述順によってスタイルが適用されるような設計を心掛けましょう。このレッスンではスタイルの優先順位を決めるうえで最優先される !important ルールについて学びました。

スタート!CSS入門

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

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

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

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

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