CSS・はじめの一歩

セレクタってどう書くの？

「どこを」変えるかを指す目印がセレクタ。CSSの基本の形を、いちばんやさしいところからつかもう。

CSSは「どこを」「どうする」をセットで書きます。この「どこを」を指す部分がセレクタです。まずは、この基本の形をまるごと1つ、体でおぼえてしまいましょう。

じっさいに見てみよう

p {
  color: blue;
}
部分役割
pセレクタ（段落を指してる）
colorプロパティ（何を変える？＝文字の色）
blue値（どうする？＝青に）

つまり「段落の文字を、青にする」と読めます。「どこを { 何を: どうする; }」という日本語に置きかえて読むと、急に意味が通ります。

セレクタはHTMLのタグ名

「どこを」の指定は、HTMLで覚えたタグの名前がそのまま使えます。p と書けば段落ぜんぶ、h1 と書けば大見出しぜんぶ。同じ名前のタグを、まとめて一気に変えられます。

h1 {
  color: red;
}

これで、ページ中の <h1> が全部あかくなります。1つ1つ手で塗らなくていい——これがCSSの気持ちよさです。

いくつも指定できる

{ } の中には、指定を何行でも並べられます。1行につき1つ、最後は ; で閉じる。

p {
  color: blue;
  font-size: 18px;
}

「段落の文字を、青くして、少し大きくする」。上から順に、変えたいことを積み重ねていくイメージです。

このレッスンのまとめ

  1. セレクタ＝どこを変えるかの目印（タグ名が使える）
  2. セレクタ { プロパティ: 値; } が基本の形
  3. { } の中に、指定をいくつも並べられる

背景のピンクはまだ仮のまま。 :::

やってみよう：見出しの文字を青くする

ここまでのstyle.cssのピンクの背景はそのまま。h1をセレクタにして、しまちゃんの名前の文字を青くしてみましょう。

body {
  background-color: pink;
}
h1 {
  color: blue;
}

上の body の行はそのまま。ここで足すのは h1 { color: blue; } の3行です。

ブラウザ表示。ピンクの背景の中、しまちゃんの名前の見出しが青い文字になっている
セレクタで「どこを」変えるかを指定すれば、狙ったところだけ色が変わります。