記事の紹介
この記事ではCSSの基本原理に対して扱います。
カスケード
スタイルに対して説明する前に、「カスケーディング」に対して説明します。
カスケーディングとは、ある要素のプロパティに対する宣言が複数ある時、宣言の優先順位の関係を定めて、そのうちに一つの宣言だけが有効になるようにする仕組みです。
例えば、下のソースのように、body要素に「color:blue」というスタイルを適用すると、その文書の文字全体が青色になります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body style="color:blue"> <h1> タイトル <p> これは<b>パラグラフ</b>です。 </p> </h1> </body> </html>
その子要素の<p>に「font-style:italic」というスタイルを適用すると、その下にある文字がイタリック(斜体)になります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body style="color:blue"> <h1> タイトル <p style="font-style:italic"> これは<b>パラグラフ</b>です。 </p> </h1> </body> </html>
つまり、スタイルは、そのスタイルを適用した要素だけに有効になるわけではなく(この場合はbodyにcolorスタイルを適用したら<h1>と<p>に適用されないわけではなく)、その子要素全体に適用されるのです(下にある<h1>と<p>も巻き込んで適用されるわけです)。
よって「文書全体の見た目を一括に指定する事だけではなく、必要なところだけ個別にスタイルを適用することが可能となった」ということです。
インラインスタイル
上記ではCSSの基本的な原理を調べて見ました。それでは、このようなスタイルをどのように指定するのか見ていきましょう。
もっとも簡単なのは、前のhtmlの講座の時のようにstyle属性を使う方法です。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body style="color:blue"> <h1 style="color:red; "> タイトル </h1> <p style="font-style:italic"> これは<b style="color:green; font-size:24px">緑のテキスト</b>です。 </p> <p> テキストの一部にスタイルを適用した場合<span style="color:black; font-style:italic">span要素</span>を使いましょう </p> </body> </html>
Web開発-初めてのCSS
- 初めてのCSS-(5)-ページレイアウト(完)
- 初めてのCSS-(4)-link要素でcssファイル読み込み
- 初めてのCSS-(3)-style要素内にCSSを記述
- 初めてのCSS-(2)-CSSの基本原理
- 初めてのCSS-(1)-初めてのCSS