CSSスキル - 第7章 Lesson2

idセレクタの使い方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

CSSのidセレクタの考え方と、書き方を初心者向けに解説しています。
ここでは、複数の「h2」タグにそれぞれ異なるCSSをかけていきます。



この動画で学べること

・idセレクタの使い方



idセレクタの使い方

idセレクタとは、特定のidに対してスタイルをかけるためのセレクタです。
CSSでは「id」の変わりに「#(シャープ)」を使ってスタイルを書いていきます。
ではまずHTMLファイルの「セレクタとは?」の部分の<h2>タグにid名をつけていきましょう。



 <h2 id="about_selector">セレクタとは?</h2>



保存し、CSSの記述に移りましょう。
セレクタにタグ名+#about_selectorと書きます。
このとき、HTMLファイルとCSSのid名が一文字でも間違っていると正しく適応されないので、気をつけましょう。



h2#about_selector {
color: pink;
}



保存してブラウザで見てみましょう。
#about_selectorの文字がピンクに変わりました。
<h2>タグにはもともと青色が指定されていましたが、タイプセレクタよりidセレクタの方が優先して適応されるため、今回はピンクになっています。