Skip to main content

重要なのはCSSの意味ですか?

ポートフォリオを完成させるまでのおすすめ勉強法 (六月 2026)

ポートフォリオを完成させるまでのおすすめ勉強法 (六月 2026)
Anonim

ウェブサイトをコーディングする方法を学ぶ最も良い方法の1つは、他のサイトのソースコードを見ることです。このプラクティスは、ウェブデザインのコース、書籍、オンライントレーニングサイトのための非常に多くのオプションが存在する前の数日間に、多くのウェブ専門家がその技術を学んだ数です。

この習慣を試して、サイトのカスケーディングスタイルシート(CSS)を見ると、そのコードに表示されるものは重要な行です。それはどういう意味ですか、同様に重要なことですが、あなたのスタイルシートでその宣言をどのように正しく使用していますか?

CSSのカスケード

まず第一に、カスケーディングスタイルシートが実際に行うことを理解することが重要です カスケード それらが特定の順序で配置されていることを意味します。一般に、これはスタイルがブラウザによって読み込まれた順序で適用されることを意味します。最初のスタイルが適用され、次に2番目のスタイルが適用されます。

その結果、スタイルシートの一番上にスタイルが表示され、ドキュメント内でスタイルが変更された場合、そのスタイルの2番目のインスタンスは、最初のインスタンスではなく後続のインスタンスに適用されます。基本的に、2つのスタイルが同じもの(同じレベルの特異性を持っていることを意味している)を表している場合、最後にリストされたスタイルが使用されます。

たとえば、次のスタイルがスタイルシートに含まれているとします。段落テキストは、適用される最初のスタイルプロパティが赤であっても、黒でレンダリングされます。これは、「黒」の値が2番目にリストされているためです。 CSSは上から下に読み込まれるため、最終的なスタイルは「黒」であるため、1つが勝ちます。

p {色:赤; }p {色:黒; }

どのように重要な優先事項を変更する

これらのほとんど同じルールがCSSによってどのように処理されるかを理解したので、!importantディレクティブが物事を少し変える方法を見てみましょう。

!importantディレクティブは、あなたが最も重要であり、適用すべきルールを守りながらCSSがカスケードする方法に影響します。 !importantディレクティブを持つルールは、そのルールがCSSドキュメントのどこに表示されていても常に適用されます。

上記の例から、段落テキストを常に赤にするには、次のようにします。

p {色:赤!重要; }p {色:黒; }

「黒」の値が2番目に表示されていても、すべてのテキストが赤で表示されます。 !importantディレクティブは、カスケードの通常のルールを上書きし、そのスタイルに非常に高い特異性を与えます。

あなたが絶対に赤で表示される段落が必要な場合、このスタイルはそれを行うだろうが、それは良い習慣であることを意味しません。次に重要なものを使用したいときや適切でないときを見てみましょう。

いつ使うか!important

!importantディレクティブは、Webサイトをテストしてデバッグするときに非常に役立ちます。なぜスタイルが適用されないのか分からず、それが特異性の問題であると思われる場合は、あなたのスタイルに!重要な宣言を追加して、それが修正されているかどうかを確認することができます。

!importantを追加すると実際にスタイルの問題が修正された場合は、それが特異性の問題であると判断したばかりです。しかし、重要なコードをそのまま残しておきたいのではなく、テストの目的でそこに置かれただけです。

テストが完了したので、今度はそのディレクティブを削除し、スタイルを機能させるために必要な特異性を達成するためにセレクタを調整する必要があります。 !重要なことは、生産現場に進出してはいけません。なぜなら、それは正常なカスケードをどのように変えるのかという理由があります。

あなたが望むスタイルを達成するための重要な宣言にあまりにも多くを傾けていると、最終的には!重要なスタイルが散りばめられたスタイルシートになります。ページのCSSの処理方法を根本的に変えることになります。それは、長期的な管理の観点からはうまくいかない、怠惰な習慣です。

テストや、場合によってはテーマやテンプレートフレームワークの一部であるインラインスタイルをオーバーライドする必要がある場合は!importantを使用してください。そのような場合であっても、このアプローチを可能な限り控えめに使用し、代わりにカスケードを理解するきれいなスタイルシートを作成するように努めます。

ユーザースタイルシート

!重要な指示には、理解するために不可欠な最後の注意があります。この指令は、Webページのユーザーがページを使用したり読むのが困難になるようなスタイルシートに対処するのに役立ちました。

一般的に、ユーザがウェブページを見るためのスタイルシートを定義すると、そのスタイルシートはウェブページの作者のスタイルシートによって覆される。ユーザが!importantとしてスタイルをマークすると、そのスタイルはWebページの作者のスタイルシートを上書きします。

これは、特定の方法でスタイルを設定する必要があるユーザーに役立ちます。たとえば、誰かが使用するすべてのWebページでデフォルトフォントサイズを大きくする必要があるかもしれません。 !重要な指示句を作成するページ内で控えめに使用することで、ユーザーが持つ特別なニーズに対応できます。