記事の紹介

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

プログラミングメイン