CSS の基本

参考資料

CSS とは Cascading Style Sheet の略。

CSS はスタイルシートの一つ。スタイルシートは文章の見た目を定義するための仕様のこと。

スタイルシートは HTML の誕生の前から存在していた。

HTML に適用することができるスタイルシートは CSS だけではない。

ただし一般的なブラウザに実装されているのは CSS であるため普通はこれを使用する。

p タグの文字列を青で表示する CSS。

p {
  color: blue;
}

pの部分（{}の前）のことをセレクタと呼ぶ。

スタイルを適用させたい対象をここに書く。

ここではp要素を指定している。

{}で括られた中身の部分のことを宣言と呼ぶ。

なかにプロパティと値を書く。

宣言は;で区切って複数書く事ができる。

{}内の:の左側のcolorの部分。

適用させたい表現の種類をここに書く。

ここではセレクタの文字列の色を指定しようとしている。

プロパティは定義されているものの中から選ぶ。

{}内の:の右側のblueの部分。

プロパティを具体的にどのようにしたいのかを書く。

ここではセレクタの文字列の色を青色にしようとしている。

HTML に CSS を適用するためにはブラウザが認識できる場所にそれが書かれている必要がある。

要素の属性情報として直接指定する。

style 属性の値として CSS の記法で文字列を指定する。

まさにその要素のみに適用される。

<span style="color: blue;">青い文字</span>

head 要素内に書く。

HTML 内の全ての要素に対して適用される。

<head>
  <style type="text/css">
    h1 {
      color: red;
    }
  </style>
</head>

CSS が書かれた CSS ファイル(.css)を用意する。

適用したい HTML のhead要素内にlink要素で定義して対象の css ファイルを読み込む。

<head>
  <link rel="stylesheet" type="text/css" href="common.css" />
</head>

CSS ではある HTML 要素に対して複数の方法でスタイルを指定することができそれらは共存することができる。

これらが競合する場合には優先順位順にスタイルが適用される。また、同じ優先順位の CSS が競合している場合は読み込みの順番が遅いものが優先される。