HTML：クイズのページを作ってみよう

背景や文字の色を変えてみよう

style属性 を使うことでHTML文書中の文字や背景の色を変えることが出来るよ。まずは「 color.html 」というページを作ってみよう。

<p style="color:red">赤 red</p>
<p style="color:blue">青 blue</p>
<p style="color:yellow">黄色 yellow</p>

正しく書くとブラウザでこんな風に表示されるよ。

color.htmlの表示例

色は十六進数や色名を指定することができるよ。色名と十六進数は次の色見本のページを参考にして設定してみよう。

WEB色見本

クイズを作ってみよう

1問目の問題を作ってみよう

クイズのページ「 quiz1.html 」を作ってみよう。本文を次のように書いてみよう。

<body style="background-color:yellow">
<h1 style="color:blue">クイズ１</h1>
<h2>問題</h2>
<p>宇宙飛行士のAさんは、地上にいるときは食いしん坊なのですが、宇宙に行くとさっぱり食欲がなくなります。なぜでしょう？</p>
<h2>回答</h2>
<p style="color:yellow">食うき（空気）がないから。</p>
<a href="quiz2.html">第二問</a>
</body>

正しく書くとこんな風に表示される。

quiz1.htmlの表示例

「回答」と「第二問」の間をマウスでドラッグしてみると…

ドラッグして回答を表示

課題

[課題1] このページを改良してオリジナルのクイズを作ってみよう
[課題2] 続きのページ（第二問のページ）「 quiz2.html 」を作ってみよう