第2部 HTML/CSS — Day 9 / 30

CSSとは

CSSはページの「見た目」を決める言語です。書き方は3つあります。①タグに直接書く(インライン)、②head内の <style> タグに書く、③外部CSSファイルに書く。この教材では②を使い、仕組みに慣れたら③に進むのがおすすめです。

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>この段落は青色になります。</p>
</body>

「セレクタ { プロパティ: 値; }」がCSSの基本形です。この例は「すべての p 要素の文字色(color)を青(blue)にする」という意味になります。

今日の練習

これまでに作ったページに style タグを追加し、h1 の色を好きな色に変えてみましょう。

模範解答を見る

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

style タグは head の中に書きます。色は blue のような色名でも、#2563eb のようなカラーコードでもかまいません。

学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。

学籍番号氏名（フルネーム）

Q. CSSの基本形として正しいものはどれでしょうか?

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

Completed

提出時間はサーバー時刻に基づきます。

この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。