minimize

とりあえず、まずはCSSを使ってみましょう。
初めに、CSSを使わずにHTMLを書いてみます。

<html>
<head>
  <title>Sample</title>
</head>
<body>
  <div><font color="yellow"><b>Hello!</b></font></div>
</body>
</html>

表示結果はこんな感じです。

Hello!

これを、CSSを使って書き換えてみると…

<html>
<head>
  <title>Sample</title>
  <style type="text/css">
    .hello { color: yellow; font-weight: bold; }
  </style>
</head>
<body>
  <div class="hello">Hello!</div>
</body>
</html>

こんな感じになります。
CSSを使うメリットは、

などが挙げられます。
CSSは非常に細かいスタイル指定が可能なので、
HTMLタグだけでは表現できなかったスタイリッシュな画面を生成することもできます。

ルールセット

CSS定義の基準となるのが、ルールセットです。

H1 {
  color: red;
  text-align: center;
}

これが一つのルールセットを表します。
H1 はパターン名(後述)、{ } で囲まれた部分(ブロック)には
複数のプロパティが定義されています。
プロパティの区切り文字は ; です。

ルールセットは、複数に分けて記述することも可能です。
例えば上の例は、

H1 { color: red }
H1 { text-align: center }

としても同じです。
見ての通り、CSS文法では改行は特別な意味を持ちません。
全てを1行に書いてもいいですし、見やすいように複数行に分けて書くことも出来ます。

コメントは、/* ～ */ で囲むことで表現します。

H1 {
  color: red;
  /* text-align: center; */
}

単位

CSSでは、サイズを表現するのに複数の単位を使うことができます。

色指定

色指定方法にはいくつかのバリエーションがあります。

継承

CSSで指定したスタイルは要素内の子要素に継承されます。

.parent { color: red; }
.child1 { font-size: 2em; }
.child2 { font-size: 1.5em; color: yellow; }

<div class="parent">
  item1
  <span class="child1">item2</span>
  <span class="child2">item3</span>
</div>

このような場合、item1 に適用されるスタイルはそのまま

color: red;

となります。

item2 は、parentおよびchild1のスタイルが適用されるので、

color: red; font-size: 2em;

となります。

item3 は、parentおよびchild2のスタイルが適用されるので、

color: yellow; font-size: 1.5em;

となります。このように、parentで指定されたcolor属性は
child2で指定したcolor属性によって上書きされます。

ただし、text-align や display など、子要素に継承されないプロパティも多数存在します。

[コメント（0）]