CSSスキル - 第2章 Lesson4

複数の同じタグに異なるCSSを適応させる:id名の記述

   

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

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

HTMLでは、複数にわたり同じタグを利用しなければならない場合がほとんどです。
ここではid名を利用して、複数の同じタグに対してそれぞれ異なるCSSをかける方法について解説します。



この動画で学べること

・id名を指定してスタイルを指定方法



id名を指定してスタイルを指定方法

今回は、id名を指定して、セクションの「活動報告」の部分だけにスタイルをかけたいと思います。
セクションの色を、color: #E07933; に変更してみましょう。ましょう。



section {
background-color: #fff;
color: #E07933;
}



一度、保存してブラウザで見てみましょう。
「活動報告」だけでなく、セクションの部分がすべてオレンジ色になりました。
では、「活動報告」の部分だけにスタイルをかける方法をみていきましょう。
HTMLファイルを見ると、活動報告の<div>タグにはid名がついています。
CSSでも、名前を指定してスタイルをかけていきます。
CSSでid名を示すのは「#」です。
今回は、「activity」という名前がついているので、セレクタをsection#activityとしてCSSを書いていきましょう。



section#activity {
background-color: #fff;
color: #E07933;
}



一度、保存してブラウザで見てみましょう。
id名を指定した「活動報告」の部分だけがオレンジ色になりました。
しかし、今度は「お知らせ」部分の背景の色がなくなってしましましたので、どちらのセクションにも共通する部分はまとめて書いてあげましょう。



section {
background-color: #fff;
}

section#activity {
color: #E07933;
}



このようになりました。
保存してブラウザで見てみると、セクション両方ともに背景色が設定され、なおかつ「活動報告」の部分だけ文字色をオレンジにすることができました。