セレクターと宣言

「どこに」「何を」適用するかを書くルールです。

何をする書き方？

CSSはHTMLの要素の見た目を指定します。セレクターで対象を選び、波括弧の中にプロパティと値を書きます。h1は見出し全体、.cardはclass="card"の要素を選びます。

基本の形

対象 { プロパティ: 値; }

h1h1要素をすべて選びます。

.cardcardというクラスを選びます。

color文字の色を指定するプロパティ。

style.css

p {
  color: blue;
}

結果

文章が青くなります。

準備・実行方法を確認する

HTMLのheadに <link rel="stylesheet" href="style.css"> を入れ、同じフォルダーにstyle.cssを作ります。HTMLをブラウザーで開き、保存後に再読み込みして確認します。

もう少し詳しいコードを見る

style.css

h1 {
  color: #006b50;
  font-size: 32px;
}

.card {
  background: #f1f5f9;
}

結果

h1の文字が緑になり、32pxで表示されます。class="card"の要素の背景は薄いグレーになります。

文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。

CSSの練習コード

「セレクターと宣言」の書き方はどれ？

少し変えてみよう

HTMLに <p class="card">メモ</p> を書き、背景が変わることを確認しましょう。

クラス名の前には . が必要です。プロパティと値の間は :、宣言の区切りは ; です。

分かったこと・あとで確かめたいこと

記録はこのブラウザーに保存されます。