HTML：家族の会話・CSSで色分けしよう

下のソースコードを kazoku.html という名前で保存しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF8">
    <title>家族の紹介</title>
    <style>
      h2{color:blue;}
      p{color:green;}
    </style>
  </head>
  <body>
    <h1>家族の紹介</h1>
    <h2>テントくん</h2>
    <p>ちょっとおばかな少年</p>
    <img src="tento.png">
    <h2>テントママ</h2>
    <p>しっかりしているお母さん</p>
    <img src="mama.png">
    <h2>テントパパ</h2>
    <p>まだ画像がないらしいｗ</p>
  </body>
</html>

また、2つの画像ファイル（ mama.png と tento.png ）を右クリック「名前をつけて画像を保存」で、kazoku.htmlを保存したフォルダと同じフォルダに保存しましょう。

CSS（スタイルシート）について

CSSとは、Webページのスタイルを指定するための言語です。HTMLが文書の構造を担当するのに対して、CSSは色やサイズなどの見た目を担当します。

1箇所の <h2> タグだけ色を変えたい場合は次のように style属性 を使って指定します。

<h2 style="color:pink;">テントママ</h2>

どんな色を指定できるかは、例えば次のサイトを参考にしてみましょう。

WEB色見本原色大辞典

課題

下のソースコードを kaiwa.html という名前で保存しましょう。その後、会話の続きを書き加えたり、色を変えたりしてみよう。

（このソースコードを参考に別のものを作るのでもOK！）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>テントファミリーの会話</title>
    <style>
      .tento{color:green;}
      .mama{color:orange;font-size:130%;}
      .papa{color:blue;}
    </style>
  </head>
  <body>
    <h1>テントファミリーの会話</h1>
    <h2 class="tento">テント</h2>
    <p class="tento">おなかすいたよう</p>
    <h2 class="mama">テントママ</h2>
    <p class="mama">冷蔵庫に入ってるたい焼き食べなさい！</p>
    <h2 class="tento">テント</h2>
    <p class="tento">それがみつからないんだよう</p>
    <h2 class="papa">テントパパ</h2>
    <p class="papa">え？あれってたい焼きだったの？きのうお魚だと思ってだべちゃった！</p>
    <h2 class="tento">テント</h2>
    <p class="tento">えーーー！！</p>
    <h2 class="mama">テントママ</h2>
    <p class="mama">パパってもしかしてあほ？</p>
  </body>
</html>