CSSスキル - 第2章 Lesson3

スタイルの継承について

   

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

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

スタイルの継承について初心者向けに解説しています。
継承されるものやされないものもあるので、注意が必要です。



この動画で学べること

・スタイルの継承について
・親要素をしていしてスタイルをかける方法



文字スタイルをCSSで変更しよう

文字のスタイルを変更してみましょう。
今回は、<h1>の文字の大きさを大きくしていきたいと思います。
文字の大きさを変更するfont-size のプロパティを使ってやってみましょう。



 h1 {
font-size: 30px;
}




ブラウザで確認してみると、文字の大きさが少し大きくなったことがわかります。




親要素を指定してスタイルの変更を行なっていこう

次に<h2>の「自動で返信、自動で応答。」の文字スタイルを変更させたいと思います。
先ほどと同じようにセレクタ、プロパティ、値を設定してみましょう。




h2 {
font-size: 22px;
font-weight: 900;
color: #fff;
}




一度、保存してブラウザで見てみましょう。
「自動で返信、自動で応答。」の部分が変更できましたが、他の部分の<h2>も同じように変更されてしまいました。
今回は、「自動で返信、自動で応答。」の文字だけにスタイルを適応させたいので、セレクタのh2の前に親要素(header)を入れる必要があります。



header h2 {
font-size: 22px;
font-weight: 900;
color: #fff;
}




ナビゲーションのリンクに対してスタイルをかける方法


次にヘッダーのナビゲーション部分を見ていきましょう。
navのulの中のliに、 font-size:15px; を指定して文字のサイズを変更しましょう。
また、文字の色はリンクに対してかける必要があるので、さらにliの中のaを指定してスタイルの変更を行なっていきましょう。



nav ul li {
font-size: 15px;
}

nav ul li a {
text-decoration: none;
color: #000;
}