2. CSSの基礎

CSS（Cascading Style Sheet）はすでに使用してきたが、スタイルシートとも言われる。

これまでは、タグ内にCSSを記述してきたが、似たようなWebページに毎回CSSを記述するのは面倒である。そのため、別の場所にまとめて記述する方法がある。

2.1 CSSの組み込み方法

インライン指定
エンベッド指定
リンク指定

上記、3つの方法がある。

インライン指定: これまで行ってきたように、タグ内に記述する方法である。

<tag style="size:200px;">.....</tag>

のように記述する。
エンベッド指定: head要素にスタイルを記述する方法である。

<head>
  <style>
    h1 { color: #ff0000; }
  </style>
</head>

のように記述する。
リンク指定: 別ファイルにスタイルを記述する方法である。

<head>
<link href="ファイル名" rel="stylesheet" type="text/css">
</head>

のように記述する。

2.2 インライン指定以外の指定方法の場合の記述ルール

インライン指定の場合は、どのタグに適用するかは自明であったが、他の指定方法の場合、適用タグとの関連づけを行わなければならない。

セレクタ { プロパティ: 値; }

具体例： p { color: blue; }

上記のように指定すると、<p>タグ指定の文字はすべて青になる。

p {
      color: blue;
      margin: 10px;
      padding: 20px;
}
h2 , h3 {
      color: black;
      margin: 20px;
      padding: 20px;
}

のように複数記述できる。複数のセレクタに同じスタイルを適用する場合は、カンマ（,）で区切る。

2.2.1 セレクタの記述方法

ある特定のタグにスタイルを設定したいとき、また、複数のタグに同じスタイルを適用したい場合など、それぞれの目的に対応した記述方法がある。

IDセレクタ

唯一のタグを指定して、スタイルを設定する。重複はできない。

html記述例：

<p id="red">
これはサンプル文章です。
</p>

CSS記述例：

#red {
color: red;
}

html側では、特定のタグ内に「 id="名称" 」を追加し、 CSS記述は、#名称 {....}のように、セレクタを記述する。

classセレクタ

複数のタグに同じスタイルを適用したい場合、設定する。

html記述例：

<p class="blue">
これはサンプル文章です。
</p>
<h2 class="blue">
これはサンプル2の文章です。
</h2>

CSS記述例：

.blue {
color: blue;
}

html側では、特定のタグ内に「 class="名称" 」を追加し、 CSS記述は、「 .名称 {....} 」のように、ドットを付けてセレクタを記述する。

子孫セレクタ

ある要素内の特定の要素を指定することができる。

html記述例：

<div id="list">
      <h2>list</h2>
      <h3>list2</h3>
      <p>これはサンプル文章です。</p>
</div>

CSS記述例：

#list h3 {
color: green;
}

CSS記述は、「親要素子要素 {....} 」のように、半角スペースで区切ってセレクタを記述する。

半角スペース区切りとカンマ（,）区切りで意味が異なることに注意。

セレクタの記述方法は他にもあるが、他の参考書やWebサイトに詳しい説明がある。ここでは、これくらいで次に進もう。あんまり詳しくやると、やる気も失せる。基本をマスターすることに重点を置き、詳しいことは必要に応じて他書を調べるというスタンスで行こう！！

2.2.2 CSS記述の優先順位

CSSには優先順位がある。同じセレクタの場合、最後の記述が優先される。

h4 { color: black; }
h4 { color: blue; }
h4 { color: green; }

この場合、green表示となる。

セレクタの種類順によって優先度が異なる。

HTMLタグ内style属性 > IDセレクタ > classセレクタ > タイプセレクタ

HTMLタグ内に記述したスタイルが最優先されるが、その次に優先されるのがIDセレクタである。その次にclass、最後にタイプセレクタとなっている。

タイプセレクタは、p,h3 {...}のように、通常のタグ名が記述された場合である。

2.2.3 CSS記述の考え方

要素にCSSを適用する場合、一部だけ変更して適用したいという場面に数多く出会う。その場合、ある要素で「 class="box green" 」、別の要素では「 class="box red" 」のように、複数のclassを適用するようにすると、コーディング量も減り、作業効率も上がる。 class名の命名法も重要で、CSSの内容が容易にわかるようにしておくとよい。

ここでの説明はこのくらいにしておき、具体的な場面において適宜考えていくとにする。

次は、CSSの基礎についてパート2である。

CSSの基礎2へ

back next