『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

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に限らず、たぶん学生時代もそうだったような気がします。

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

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

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

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

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!