性格診断フォームを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLファイルを作成しよう

shindan.html を作成し、HTMLの基本構造を書きましょう。

このファイルが性格診断フォームのベースになります。

<title> はブラウザのタブに表示されるページ名です。

書けたらブラウザで開いて、白いページが表示されることを確認しましょう。

タブに「性格診断」と表示されていればOKです。

💡 ヒント: VS Code で ! と入力して Tab キーを押すと、基本構造が自動入力されます。

💡 ヒント
VS Codeで shindan.html を作成し、基本構造を書きます
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>性格診断</title></head>
<body>
</body>
</html>
2

タイトルとフォームの枠を作ろう

bodyの中に見出しとformタグを書きましょう。

<form> タグはフォーム全体の入れ物です。

この中に質問やボタンを入れていきます。

ブラウザで開いてタイトルが表示されることを確認しましょう。

💡 ヒント
h1タグでタイトル、formタグでフォーム全体を囲みます

参考: HTML レッスン5

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<h1>🔮 性格診断</h1>
<form>
  <!-- ここに質問を書く -->
</form>
3

質問1をラジオボタンで作ろう

formの中に最初の質問を書きましょう。

ラジオボタンの name を揃えるのがポイントです。

name属性が重要な理由:

同じ name="q1" を持つラジオボタンは「1つだけ選べるグループ」になります。

name が違うと複数選べてしまうので注意しましょう。

ブラウザで確認して、どちらか1つだけ選べることを確かめましょう。

<label> で囲むと、テキスト部分をクリックしても選択できるようになります。

💡 ヒント
同じ質問のラジオボタンには同じname属性を指定します
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<p><strong>Q1. 休日の過ごし方は？</strong></p>
<label><input type="radio" name="q1" value="a"> 友達と出かける</label><br>
<label><input type="radio" name="q1" value="b"> 家でゆっくり</label>
4

質問2を追加しよう

2つ目の質問を追加しましょう。

name="q2" にして別グループにします。

Q1は name="q1"、Q2は name="q2" と別の名前にすることで、それぞれ独立して選択できます。

ブラウザでQ1とQ2がそれぞれ独立して1つずつ選べることを確認しましょう。

もし両方同時に1つしか選べない場合は、name が同じになっていないか確認してください。

💡 ヒント
質問2のname属性はq2にします（q1とは別のグループ）
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<p><strong>Q2. 好きな教科は？</strong></p>
<label><input type="radio" name="q2" value="a"> 体育・音楽</label><br>
<label><input type="radio" name="q2" value="b"> 数学・理科</label>
5

送信ボタンを追加しよう

フォームの最後に送信ボタンを追加しましょう。

type="submit" を指定すると、フォームの送信ボタンになります。

今の段階ではボタンを押してもページがリロードされるだけです。

これは正常な動作です（データの処理にはJavaScriptが必要です）。

💡 ヒント
buttonタグまたはinput type='submit'で送信ボタンを作ります
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<button type="submit">診断する</button>
6

CSSでデザインを追加しよう

<head> 内に <style> タグを追加して、フォームの見た目を整えましょう。

label に display: block を指定すると、各選択肢が1行ずつ表示されます。

ホバー効果をつけると、どの選択肢にカーソルがあるかわかりやすくなります。

ボタンは幅いっぱいに広げて押しやすくしましょう。

max-width: 500px と margin: 40px auto でフォームを中央寄せにします。

cursor: pointer でマウスカーソルが指マークになり、クリックできることが伝わります。

💡 ヒント
style タグを head 内に追加し、フォームの見た目を整えます
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<style>
body { font-family: sans-serif; max-width: 500px; margin: 40px auto; padding: 0 16px; }
h1 { text-align: center; }
label { display: block; padding: 8px; margin: 4px 0; border-radius: 6px; cursor: pointer; }
label:hover { background: #f0fdfa; }
button { display: block; width: 100%; padding: 12px; margin-top: 16px; background: #0f766e; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
</style>
7

発展: 質問を増やしてみよう

余裕があれば、質問を増やしてみましょう！

checkbox は複数選択可能な選択肢です。ラジオボタンとの違いを体験してみてください。

textarea は自由記述欄です。rows 属性で高さを指定できます。

他にも「好きな色は？」「将来の夢は？」など自由に質問を追加してみましょう。

💡 ヒント: checkbox は name が同じでも複数選択できます。ラジオボタンとの違いを確認してみてください。

完成したら友達に試してもらいましょう！

💡 ヒント
Q3を追加したり、checkboxやtextareaを使ってみましょう
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<p><strong>Q3. 得意なことは？（複数選択OK）</strong></p>
<label><input type="checkbox" name="q3" value="a"> 絵を描く</label><br>
<label><input type="checkbox" name="q3" value="b"> 計算</label><br>
<label><input type="checkbox" name="q3" value="c"> 人と話す</label>

<p><strong>自由コメント</strong></p>
<textarea rows="3" placeholder="何か一言！"></textarea>
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら