CSSスキル - 第2章 Lesson2

タグ名を指定してCSSをかける方法

   

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

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

タグ名を指定してCSSをかけるための、「タイプセレクタ」について、初心者向けに解説しています。



この動画で学べること

・要素を指定してスタイルをかける方法



要素を指定して、スタイルをかける方法

要素を指定してスタイルをかけるというのは、例えば文章にはこのスタイル、背景にはこの色、というようにそれぞれ違うスタイルをかけるという意味です。
では前回書いたCSSの下に書いていきましょう。



headerの文字の色を変更します。
セレクタにheader、プロパティにcolor、値にカラーコード#000を指定しましょう。




header {
color: #000;
}




一度、保存してブラウザで見てみましょう。
ヘッダー部分の文字色が黒になりました。
しかし、ヘッダーの中なのに青い文字の部分があります。
これは、ブラウザが初期状態で<a>タグに青い色を指定しているためです。
スタイルシートの適応には優先順位があり、今回は初期状態の方が書いたCSSよりも優先順位高かったため、この部分の文字色は黒色に変更されませんでした。
今回は、このままで大丈夫ですので、次に進みましょう。




次は、セクションの部分の背景色と文字色を変更させたいと思います。
セレクタにsectionを指定し、プロパティと値を設定していきましょう。
sectionができたら、同じようにフッター部分も色の変更を行なっていきます。




section {
background-color: #fff;
color: #4D5269;
}


footer {
background-color: #4D5269;
color: #fff;
}




ここまでできたら 、保存してブラウザで見てみましょう。
それぞれの要素に背景と文字の色を設定できました。