目標

様々なHTML要素を使って、右の写真のようなサイトを作ってみよう！

詳細

すでに設置されているブロックを利用して、テキストボックスや文章を変更しましょう。

もし最初からやり直したいときは、すべてのブロックを削除して、ページを再読み込みしてください。

HTML要素の種類

HTML要素には、特別な機能や見た目を持つものや、表示に関係なく要素の意味づけや整理をするために使われるものがあります。
ここでは試しに、右の写真のようにブロックを組み立てて作ってみましょう。
一般に、文章は段落を意味する<p>要素の中に書きます。また、下付き文字は<sub>要素を使って作成できます。

HTML属性

HTML属性とは、HTML要素に付けることができる追加情報のことです。HTML属性のカテゴリーを開いてどんなものがあるか見てみましょう。
HTML属性は下のように要素に対して組み付けることができます。ここでは<input>要素のtype属性について詳しく見てみましょう。
type="text"（デフォルトの設定）だと文字の入力欄、type="number"だと数字の入力欄、type="checkbox"だとチェックボックスになります。
また、HTML属性は１つの要素に複数個つけることができます。例えば、placeholder属性を付け加えると、入力欄に何を入力すればいいかヒントを表示することができます。style属性では、見た目を自在に変更することができます！（詳しくは次のチュートリアルでやりましょう）

機能追加

では、残りの部分を完成させましょう！ 右の写真を参考に、HTML要素を使ってサイトを完成させてください。

ヒント

1. キーの表示は<kbd>を使いましょう。
2. チェックボックスは<input>の属性にtype="checkbox"を設定しましょう。
3. <div>の属性にstyle="flex"を指定すると、その<div>の中にある要素を横方向に並べることができます。