• HTML&CSS超基礎講座

CSS04 スタイルシートの継承を理解しよう!(5分56秒)

スタイルシートの継承を理解しよう!

今回は、スタイルシートの継承について解説しています。

スタイルシートでWebデザインをしていく上で、必ず必要となるところですので、継承の基本的な部分をマスターしちゃいましょう!

補足・ポイント

HTMLの各要素は、html要素を頂点にしたツリー構造により、それぞれの要素が分けられています。

ある要素がある要素を含み、さらにその要素が別の要素を含むというような階層的な構造です。

HTMLの各要素の構造の例

現在考えている要素からみて、1つ上の階層にある要素を「親要素」といいます。

逆に、親要素からみてその階層下にある要素は「子要素」です。

さらに、その下の要素を「孫要素」と言います。

HTMLのツリー構造の例

HTMLのツリー構造の例

body 要素は、子要素のh1,h2,p要素などを含んでいます。

li要素の親要素はul要素となります。

スタイルシートでは、このような親要素、子要素、孫要素の関係によって継承に影響があります。

スタイルシートの継承

スタイルシートで指定するプロパティの中には、親要素に指定した値が、そのまま子要素に引き継がれるものがあります。

このような値の引き継ぎを「継承」と言います。

継承の例・・文字色

例えば、body要素にcolorプロパティを指定すると、子要素にその値が継承されます。

そのため、body要素の子要素の文字色は、body要素で指定した文字色になります。

継承の例・・文字サイズ

body要素で基準となるフォントサイズを指定する・・・25px

p要素でフォントサイズ70%と指定する・・・pの親要素であるbodyで指定したフォントサイズの70%のフォントサイズになる。

25×0.7=17.5px
(約17.5pxくらいで見えているということです。通常pxの指定には小数点は付けられません。)

strong要素でフォントサイズ50%と指定する・・・strong要素の親要素であるp要素(約17.5px)の50%のフォントサイズになる

代表的な継承の有無

プロパティにより親要素の値を「継承するもの」と「継承しないもの」があります。

プロパティ 継承の有無
background-color
border ×
color
font-family
font-size
font-style
font-weight
line-height
margin ×
padding ×
text-align
text-decoration ×
width ×

受講生さんのWebの勉強の進め方をみていると、

・教科書にそって基本からキッチリ学習されるタイプの方

・少し覚えたら、いきなりテンプレートなどをさわり、実践で覚えていくタイプの方

・・・と大きく2つのタイプに分かれているような気がします^^

あなたはどちらのタイプですか?

私は、どちらかというと、いや、間違いなく後者のタイプでした。

Webに限らず、たぶん学生時代もそうだったような気がします。

勉強は、先に答えを見てから、問題の解き方を考える・・・みたいな。

実践でしながら覚えていくのは、効率もよく、楽しく独学できるのですが、基本的な部分が解かっていない分、躓いたり、間違いが見つかるまで時間がかかったりもします。

・・・ということで、今回は、スタイルシートの継承の基本的な部分についてわかりやすく解説してみました。


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでWebcreatorsTipsをフォローしよう!

この記事をシェアする



まずは無料のWebデザインメルマガ講座から体験してみよう!

登録作業はわずか10秒!
パソコン・スマートフォン・タブレットでWebデザインのスキルがアップするメルマガを無料で受信できます!

【メールマガジン登録フォーム】
お名前(姓)*
お名前(名)*
メールアドレス*
  • Webデザイン講座
  • レスポンシブWebデザイン作り方講座
  • Webデザインまとめサイト

PAGE TOP