CSS入門：ウェブページのおしゃれルール！カスケーディングと継承

ウェブページをおしゃれにするには、CSSのルールがどう適用されるかを知る必要があります。これには「カスケーディング」と「継承」という2つの大事な原則があります。

カスケーディングって？

想像してみてください。あなたがTシャツ（HTML要素）を持っていて、その上に色々なデザイン（CSSスタイル）を加えたいと思っています。でも、同じTシャツに対して異なる色を塗りたい場合、どの色が最終的に見えるのでしょうか？ここで「カスケーディング」のルールが役立ちます。

• 具体性：名前がしっかりついているデザイン（ID）は、一般的なもの（タグ）より強いです。
• 重要度：特別なマーク（!important）がついたデザインは、他のすべてを上回ります。
• ソースの順序：最後に来たデザインが、前にあるデザインより優先されます。

カスケーディングの例

<p id="important-text" class="text">こんにちは！</p>

p {
    color: blue; /* 一番一般的 */
}
.text {
    color: red; /* もう少し具体的 */
}
#important-text {
    color: green; /* 一番具体的 */
}

この場合、テキストは緑色になります。なぜなら、IDセレクタが一番具体的だからです。

継承って？

「継承」は、ある要素に設定したおしゃれ（スタイル）が、その中にある他の要素にも適用されることを意味します。全員に同じアクセサリーを配るようなものです。

継承の例

<div>
    <p>私はおしゃれが継承されます。</p>
</div>

div {
    color: purple;
}

この例では、<div>に設定した紫色が、中の<p>にも適用されます。<p>は自分で色を指定していなくても、<div>から色を「継承」します。

まとめ

カスケーディングは、複数のスタイルが競合した時にどれが勝つかを決めるルールです。具体性、重要度、ソースの順序がキーポイントです。継承は、親要素のスタイルが子要素に引き継がれることです。これらを理解することで、ウェブページを思い通りにおしゃれにできますよ！