コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
!important構文を使う
このレッスンでは、 !important構文を使ってみます。 CSS規則の 優先順位というのがありまして、 1から3まであるんですが、 上が優先されます。 つまり最も優先されるのが「重要度」で、 このときに使うのが、びっくりマーク、 「!important」という構文なんですが、 その次が「厳密度」。 これは、おおまかに言うと、 セレクタがどれほど具体的、厳密に 規定されているかということです。 あと3番目は「ソースの順番」で、 後に来るほうが優先されると いうことですね。 今回はこの重要度を示す !important構文を使ってみます。 importantは 「最重要」ということになりまして、 「他の宣言よりもつねに優先」されます。 このHTMLドキュメントの li要素で試してみたいと思うんですが、 li要素には class が定められています。 一番先頭は important と list、 あと残りの2つは list だけです。 ではまず、この list に対して 文字のカラーを設定しましょう。 list ということで color: green にします。 そして、その上に important については color: red にしたいと思います。 これでどうなるかというのをちょっと 想���してみてください。 ファイルを保存しましょう。 ブラウザで確かめると、 li要素、3つともグリーンですね。 この先頭のimportantという classに対して設定した赤は、 効果がありません。 というのは、 この important と list ですね。 両方に color を指定しています。 ということは、 この2つ競合してしまうんですね。 競合してしまった場合には、 後のほうが優先されます。 ですから、この list の color の green が 勝ったということになるんですね。 ではここに red のあとにですね。 !important構文を加えます。 !important ということで加えますと、 もう一度確かめてみましょう。 今度は最初のli要素が赤くなりました。 !important構文によって 他の宣言よりも優先されるからですね。 このレッスンでは、 最も高い優先度を示す !important構文をご紹介しました。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。