CSSスキル - 第7章 Lesson8

複数のタグに同じCSSをかける方法

   

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

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

複数のタグに対して、同じCSSをかける方法について、初心者向けに解説しています。



この動画で学べること

・セレクタをグループ化する方法



セレクタのグループ化するには

今回は、セレクタをグループ化する方法をご紹介します。
まずは、次の画像を見てください。





このように、セレクタにh2,p,liと書くと、ページの中の全ての<h2><p><li>タグにスタイルが適応されます。
複数のセレクタを「,(カンマ)」で区切ることによって、グループ化することができます。



セレクターのグループ化をしてみよう

では実際に練習ファイルを使って一緒に書いていきましょう。
まず、<th>タグと<td>タグに同じCSSを書いてみます。




th{
font-size: 30px;
}


td{
font-size: 30px;
}




ブラウザで見てみると、<th>タグも<td>タグも同じスタイルになっていますので、わざわざスタイルを分けて書く必要なありません。
なので、2つのセレクタをグループ化しましょう。
1つ目のセレクタを書き、「, (カンマ)」で区切って2つ目のセレクタを書きます。



th,td{
font-size: 30px;
}



保存してブラウザで見てみましょう。
まとめて書いても、分けて書いても、スタイルは同じになっています。
どちらの書き方でも大丈夫なのですが、グループ化して書く方がCSSが短くなり、読み込む時間も短縮できますので、できるだけこの書き方をするように心がけましょう。