お問い合わせフォームをCSSで装飾しよう（Flexboxと属性セレクター）

フォームレイアウトを <dl><dt><dd> 構造で整理し、CSSで見やすく整えます。
Flexboxを使って ラベルと入力欄を横並びにし、input[type=...] や input[name=...] などの属性セレクターを活用して入力欄の幅やスタイルを整える力を身につける。

作成ファイル・保存場所

css-basic フォルダの中に以下の2つのファイルを用意してください：
- HTMLファイル：07.htmlHTMLファイルはコピーして使用可。
- CSSファイル：style07.css（今回新たに作成）

htmlは下記からコピー

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>課題07</title>
</head>

<body>
    <header>
        <h1>お問い合わせフォーム</h1>
    </header>
    <form action="#" class="form">
        <dl class="form-list">
            <!-- お名前の入力欄 -->
            <dt>
                <label for="name">お名前</label>
            </dt>
            <dd>
                <input type="text" id="name" name="name">
            </dd>

            <!-- メールアドレス -->
            <dt>
                <label for="email">メールアドレス</label>
            </dt>
            <dd>
                <input type="email" id="email" name="email">
            </dd>

            <!-- 郵便番号 -->
            <dt>
                <label for="zipcode">郵便番号</label>
            </dt>
            <dd>
                <input type="text" id="zipcode" name="zipcode" placeholder="例：123-4567">
            </dd>

            <!-- 住所 -->
            <dt>
                <label for="address">住所</label>
            </dt>
            <dd>
                <input type="text" id="address" name="address">
            </dd>

            <!-- 電話番号 -->
            <dt>
                <label for="tel">電話番号</label>
            </dt>
            <dd>
                <input type="tel" id="tel" name="tel" placeholder="例：090-1234-5678">
            </dd>

            <!-- お問い合わせ内容 -->
            <dt>
                <label for="message">お問い合わせ内容</label>
            </dt>
            <dd>
                <textarea id="message" name="message" rows="4" cols="40"></textarea>
            </dd>
        </dl>
        <!-- ボタン -->
        <p class="submit">
            <input type="reset" value="クリア">
            <input type="submit" value="送信する">
        </p>


    </form>
</body>

</html>

指示

以下の条件に従って、CSSファイルを作成・適用してください。

07.html に style07.css を外部CSSとして読み込んでください。
ラベル（dt）と入力欄（dd）を 横並びの2列にしてください（display: flex を使用）。
input[type=text] などの入力欄を整え、name="zipcode" や name="tel" は幅を短くしてください。
リセット、<body>, <h1> 要素は従来通りの内容で、任意の指定とします。

チェックポイント

Flexboxで dt + dd を2列に配置できているか
フィールドの幅や整列が整っているか
属性セレクターで zipcode や tel の幅だけ調整できているか
フォーカス時に背景色が変わるようになっているか
ボタンの配置・スタイルが視認性良く仕上がっているか

今回使うCSSプロパティのポイント

プロパティ / セレクタ	用途・要点
input[type=”text”]	入力欄の種類ごとにスタイルを分けられる属性セレクタ
:focus	入力中の要素にスタイルを適用できる擬似クラス
cursor: pointer	カーソルを「指マーク」にしてクリック可能と示す
display: flex	子要素を横に並べるレイアウト方法
flex-wrap: wrap	子要素がはみ出す場合に自動で折り返す

Q. input[type=”text”] とは？

A. type="text" のみの input 要素を選択できる CSS の属性セレクタです。たとえば、同じフォーム内の input[type="email"] や input[type="checkbox"] とは別々にスタイルを当てたい場合に使います。

Q. :focus はどんなときに使う？

A. 入力欄をクリックしたり、キーボードの Tab キーで移動してきたときにその要素が「フォーカス」状態になります。input:focus にスタイルを指定すると、入力中であることを強調できます。

Q. cursor: pointer を使う理由は？

A. リンクやボタン、またはラベルなど「クリック可能な領域」に cursor: pointer; を設定すると、マウスカーソルが「指の形」に変わり、クリックできることを直感的に伝えられます。

Q. display: flex / flex-wrap: wrap の使い方は？

A. display: flex; は子要素を横並びにします。flex-wrap: wrap; を併用することで、画面幅が狭くなった時に折り返すことができ、スマホでもレイアウトが崩れにくくなります。

スタイルの指定内容（style07.css）

.form に指定
- 幅：最大800px（max-width: 800px）
- 中央揃え：margin: 0 auto;
- 枠線：border: 3px solid #999;
- ボックスサイズ調整：box-sizing: border-box;
.form-list に指定
- display: flex;
- flex-wrap: wrap;
dt に指定
- 幅：30%
- text-align: center
- 背景色やパディング：任意
dd に指定
- 幅：70%
- 左境界線をつける（例：border-left: 1px solid #ddd;）
input[type=text], input[type=email], input[type=tel] に指定
- 幅：100%
- パディング：5px 10px
input[name="zipcode"], input[name="tel"] に追加指定
- 幅：50%（またはmax-width: 300px）
input[type=text]:focus に指定
- 背景色：例 #fad5d5 など薄い色に変更
送信・リセットボタン（.submit内）に指定
- ボタンの色・角丸・padding
- cursor: pointer; を指定して、マウスオーバー時にクリック可能であることが伝わるようにする
- .submit { text-align: center; padding: 20px 0; }
送信・リセットボタンに hover を追加
- :hover 時にボタンの背景色を少し濃くして反応をつける
- 例：input[type=submit]:hover {任意の背景色}
- 例：input[type=reset]:hover {任意の背景色}

応用ポイント（任意で挑戦！）

textarea にも幅指定を追加して整列させる
fieldset, legend を使うと、フォーム全体やグループを構造的に囲むことができます（今後のために調べてみましょう）

解答例（CSS）

この課題では、フォームデザインの基本構造と、CSSセレクターの応用力が一気に身につきます！

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* グループセレクタ */
dl,
dd,
dd {
    margin: 0;
}

header {
    background-color: #96c9eb;
    margin-bottom: 1em;
    text-align: center;
    max-width: 800px;
    margin: 1em auto;
    padding: 1em 0;
}

h1 {
    color: #434343;
}

.form {
    max-width: 800px;
    margin: 0 auto;
    border: 3px solid #999;
    box-sizing: border-box;
}

.form-list {
    display: flex;
    flex-wrap: wrap;
}

.form-list dt {
    width: 30%;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.form-list dd {
    width: 70%;
    padding: 20px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

input {
    padding: 5px 10px;
}

input[type=text],
input[type=email],
input[type=tel] {
    width: 100%;
}

input[name="zipcode"],
input[name="tel"] {
    width: 50%;
    max-width: 300px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus {
    background-color: #fad5d5;
}

input[type=submit],
input[type=reset] {
    padding: 8px 16px;
    border-radius: 3px;
    width: 20%;
    border: none;
    cursor: pointer;
}

input[type=submit] {
    background-color: rgb(72, 145, 255);
    color: #ffffff;
}

input[type=reset] {
    background-color: #c9c8c8;
}

input[type=submit]:hover {
    background-color: #316de4;
}

input[type=reset]:hover {
    background-color: #a0a0a0;
}

.submit {
    text-align: center;
    padding: 20px 0;
}