CSSスキル - 第7章 Lesson3

classセレクタの使い方

   

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

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

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



この動画で学べること

・classセレクタの使い方



classセレクタの使い方

今回は、classセレクタについてご紹介したいと思います。
classセレクタはidセレクタと同じで、特定のたタグに対してスタイルをかけるためのセレクタです。
CSSでは「class」の変わりに「.( ドット)」を使ってスタイルを書いていきます。
id名はページの中で1回しか使えませんでしたが、このclassは何回も使うことができるので、同じスタイルを複数のタグにかけることができます。
ではまず、HTMLファイルの<li>タグに「bold」というclass名を記述しましょう。



 <ul>
<li class="bold" id="text_red">タイプセレクタ</li>
<li class="bold">全称セレクタ</li>
<li class="bold">idセレクタ</li>
<li class="bold">classセレクタ</li>
<li>擬似クラス</li>
<li>子孫コンビネータ</li>
</ul>



では次にCSSを書いていきます。
セレクタにタグ名+.boldと書きます。
このとき、HTMLファイルとCSSのclass名が一文字でも間違っていると正しく適応されないので、気をつけましょう。



li.bold {
font-weight: bold;
}



保存してブラウザで見てみましょう。
class名にboldを指定した<li>タグがすべて太字になりました。