記事の紹介
この記事では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
