スタート!CSS入門

スタイルの継承

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
親要素に適用したスタイルが、子孫要素に引き継がれることを継承といいます。ここでは、スタイルの継承について紹介します。
講師:
06:12

字幕

このレッスンではスタイルの継承について紹介します。親要素に適用したスタイルが子孫要素に引き継がれることを継承と言います。継承を知ることでウェブページの文章構造に対してどのようにスタイルが適用されているのかより深く理解することができます。画面は HTML 5 をベースに簡単なウェブページろ記述しウェブブラウザで表示した状態です。CSS によってスタイルも設定されています。スタイルの継承をわかりやすく確認するにはウェブブラウザのdeveloper tool が便利です。developer tool は主要なウェブブラウザに組み込まれてる開発者向けの機能でHTML 内の特定の要素をハイライトして表示できるなどウェブ制作を行ううえで便利な機能が搭載されております。具体的な機能はウェブブラウザによって異なります。ここでは Google Chrome のdeveloper tool を使ってみましょう。メニューボタンをクリックしツールからデベロッパーツールを選びます。キーボードの F12 またはCltr Shift I でも開くことができます。Mac では CommandOption I になります。 キーボードで デベロッパーツールをとぐろしてみましょう。F12 キーを一度押します。デベロッパーツールが閉じました。もう一度押すと開きます。Google Chrome のデベロッパーツールには様々な機能がタブの形で納められています。HTML の要素に対して確認をするにはelements tab を使います。画面の左側には現在表示しているHTML のソースが表示されています。子孫を持つ要素の左側には三角形のアイコンが表示されておりここをクリックすることで子孫要素を改変することができます。また、要素にロールオーバーするとブラウザー側でその要素がハイライトして表示されます。さらに、クリックすると選択できます。ここでは h1 要素を選択してみましょう。画面の右側に現在表示している要素に適用されているスタイルが一覧で表示されました。この機能によってどの要素にどのようなスタイルが設定されているか容易に確認できます。適用されているスタイルはルールセットごとに区切られて表示されています。適用されている順番は下から上の順番になります。一番最初に設定されているルールセットを御覧ください。ここでInherited from bodyという文字列に注目します。 Inherited とは受け継いだ継承したという意味でここでは body 要素からスタイルを継承しているということになります。body 要素のセレクタで指定されたスタイルは文字色を非常に薄いグレーにするものです次にその上のInherited fromdiv.container に注目します。これは container クラスセレクタのスタイルすなわち行揃えを中央揃えにするスタイルを継承しているということです。つまりこの h1 要素には直接スタイルを指定していませんがHTML の文章構造上body 要素やcontainer クラスの子孫にあたるためそれぞれのセレクタによって定義されたスタイルを継承、受け継いでいるということなのです。なお、これらの上にあるuser agent stylesheet とはウェブブラウザ自身がデフォルトで適用している内部的な stylesheet のことです。Google Chrome ではデフォルトのh1 要素に対してfont-size が 2emfont- weight が boldなどのスタイルが適用されていることを表しています。これにより CSS が何も適用されていない状態でも最低限の文章の見栄えが確保できるようになっています。 これは Google Chrome 特有のものではなくウェブブラウザによって様々なuser agent stylesheet が用意されています。スタイルの継承で実際にプロパティの値が子孫要素に引き継がれるかどうかは実はプロパティによって異なります。プロパティによっては継承されないものもありますので注意しましょう。このレッスンではウェブページの文書構造に対してどのようにスタイルが適用されているのかより深く理解するためにスタイルの継承について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。