今回は…
というテーマでお送りします。
今回は、そのバリエーションですね。
楽しみです。よろしくお願いします。
【１】 セレクタの種類
それでは、セレクタの種類を見ていきましょう。
プロパティ: 値;
}
セレクタは「どの部分」を表すんでしたね。
今回は、基本の３種類を見ていきます。
① タイプセレクタ
タイプセレクタは、ここまでのサンプルで
見てきた形です。
で指定する方法です。
font-size: 32px;
color: green;
}
このような形です。
この場合、h1 の要素について、{ } （波括弧）で
囲まれたスタイルを 適用するという 意味になります。
② IDセレクタ
次が、IDセレクタです。
これは、HTMLのタグの中に書く
をセレクタに指定するものです。
<h2 id=”first”>商品選択</h2>
【CSS】
#first {
background-color: green;
}
例えば、HTMLのタグの中で id属性に “first”
という属性値を指定して…
CSSで この部分に スタイルを適用したい場合に
このように記述します。
IDセレクタは、最初に
をつけて表します。
id属性 は １つのHTMLファイルの中で
同じ属性値を ２箇所以上で指定できません。
ですので、１つのページで
に、このIDセレクタを使用します。
③ クラスセレクタ
次が、クラスセレクタです。
これは、HTMLのタグの中に書く
をセレクタに指定するものです。
<h2 class=”std”>お店情報</h2>
：
<h2 class=”std”>取り扱いカテゴリー</h2>
【CSS】
.std {
background-color: olive;
}
例えば、HTMLのタグの中で class属性に “std”
という属性値を指定して…
CSSで この部分に スタイルを適用したい場合に
このように記述します。
クラスセレクタは、最初に
をつけて表します。
class属性 は １つのHTMLファイルの中で
同じ属性値を 複数箇所に指定できます。
ですので、１つのページで
に、このクラスセレクタを使用します。
もう一度、見返して確認していきます。
楽しさが倍増しますね。
更に、かっこいいページが 作りたくなりました。
【２】 参考サイト
HTMLと同じように、CSSも
必要な時に調べるリファレンスサイトはいくつかあります。
その中で、お勧めは、HTMLのときと同じ
「MDN web docs」ページの CSS版です。
https://developer.mozilla.org/ja/docs/Web/CSS
セレクタの指定方法や、プロパティの種類
値の表現方法など…
細かく調べる時に、活用していきましょう。
まず 大枠を掴んだら、調べる習慣でしたね…。
応援しています。
【まとめ】
✅ IDセレクタ
✅ クラスセレクタ
今回も、ご覧いただき、ありがとうございます。