2026.04.17 2026.04.25

【CSS 4-2】ミニ制作｜お問い合わせページを作る｜フォームを“読みやすく使いやすく”整える（初心者向け）

toshi

記事内に商品プロモーションを含む場合があります

※この記事は CSS 4-2「お問い合わせページを作る」です。
ここでは送信機能そのものではなく、“見やすく入力しやすい形” をHTMLとCSSで作ることを目標にします。
フォームの中身はあとから自分向けに差し替えて大丈夫です。

前回は、
“見せるためのページ” として自己紹介ページを作りました。

今回はその次として、
“入力してもらうためのページ” である
**お問い合わせページ**
を作ります。

つまり今回は、
見出し・説明文・入力欄・送信ボタンを
読みやすく整理して、
**使いやすそうに見える1ページ**
を作る回です。

「お問い合わせページは“項目を増やす”より“迷わず入力できる”方が大事です」

最初のお問い合わせページは、
このくらいで十分です。

ページタイトル
短い説明文
名前
メールアドレス
メッセージ
送信ボタン

今回はこの6つを1ページにまとめます。

最初から本格的なフォームにしなくて大丈夫です。
“どこに何を入力すればいいか” が伝わるだけでも、
かなりページらしくなります。

今回のゴール
まずは完成形を見る
どこを見ればいい？
お問い合わせページに入れる要素
form 全体を箱にする
label を付ける
input と textarea
ボタンは“押せそうに見える”だけ
placeholder を使う
よくあるつまずき
今回のまとめ
今日のゴール確認
CSS 4-3へ

ここまでできればOK

今回のゴール

HTMLとCSSでお問い合わせページを1ページ完成できる
タイトル・説明文・入力欄・送信ボタンを整理して置ける
入力しやすそうに見えるフォームを作れる
次のまとめ記事へ進む準備ができる

コピペOK

まずは完成形を見る

まずは index.html をこの形で作ります。
今回はお問い合わせページなので、画像は使わなくても大丈夫です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>お問い合わせページ</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main>
    <h1>お問い合わせページ</h1>
    <p class="lead">ご質問やご連絡がある方は、下のフォームから送れる形を想定しています。 今回はHTMLとCSSで、見やすく入力しやすい見た目を作る練習です。</p>
    <section class="contact-box">
      <h2>お問い合わせフォーム</h2>
      <p class="contact-text">名前、メールアドレス、メッセージを入力して送る形です。 最初は項目を増やしすぎず、必要なものだけに絞ると見やすくなります。</p>
      <form>
        <label for="name">お名前</label>
        <input type="text" id="name" name="name" placeholder="例：山田 太郎">
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" placeholder="例：sample@example.com">
        <label for="message">メッセージ</label>
        <textarea id="message" name="message" rows="6" placeholder="ご質問やご連絡内容を入力してください">
        </textarea>
        <button type="submit">送信する</button>
      </form>
    </section>
  </main>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>お問い合わせページ</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main>
    <h1>お問い合わせページ</h1>
    <p class="lead">ご質問やご連絡がある方は、下のフォームから送れる形を想定しています。 今回はHTMLとCSSで、見やすく入力しやすい見た目を作る練習です。</p>
    <section class="contact-box">
      <h2>お問い合わせフォーム</h2>
      <p class="contact-text">名前、メールアドレス、メッセージを入力して送る形です。 最初は項目を増やしすぎず、必要なものだけに絞ると見やすくなります。</p>
      <form>
        <label for="name">お名前</label>
        <input type="text" id="name" name="name" placeholder="例：山田 太郎">
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" placeholder="例：sample@example.com">
        <label for="message">メッセージ</label>
        <textarea id="message" name="message" rows="6" placeholder="ご質問やご連絡内容を入力してください">
        </textarea>
        <button type="submit">送信する</button>
      </form>
    </section>
  </main>
</body>

</html>

HTML

次に、style.css は下の形で追加してください。
ここまでの「色・余白・箱・フォーム装飾」をまとめて使います。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

main {
  background-color: #ffffff;
  width: 760px;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

h1 {
  color: #2563eb;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

h2 {
  color: #111827;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

p {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead {
  margin-bottom: 24px;
}

.contact-box {
  margin-top: 24px;
  padding: 24px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.contact-text {
  margin-bottom: 24px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

input,
textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #d1d5db;
  font-size: 16px;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}

button {
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

main {
  background-color: #ffffff;
  width: 760px;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

h1 {
  color: #2563eb;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

h2 {
  color: #111827;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

p {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead {
  margin-bottom: 24px;
}

.contact-box {
  margin-top: 24px;
  padding: 24px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.contact-text {
  margin-bottom: 24px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

input,
textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #d1d5db;
  font-size: 16px;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}

button {
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

CSS

toshi

今回は “本当に送れるようにする” より、
“入力しやすそうに見える形を作る” のが大事です。

変化のポイント

どこを見ればいい？

入れたもの	変わること
main	ページ全体が1つの箱としてまとまる
contact-box	フォーム全体が1つのまとまりとして見える
label	何を入力する欄かが分かりやすくなる
input / textarea	入力する場所が見やすくなる
button	送信する場所がはっきりする

最初は6つで十分

お問い合わせページに入れる要素

要素	役割
ページタイトル	何のページかを伝える
説明文	何を入力するページかを伝える
お名前	誰からの連絡かを受け取る
メールアドレス	返信先として使う想定
メッセージ	伝えたい内容を書く
送信ボタン	最後の操作を見せる

お問い合わせページは、
項目を増やしすぎると入力しづらくなりやすいです。

最初は、
**誰か / 連絡先 / 内容**
が分かるだけで十分です。

見やすくなる設定

form 全体を箱にする

フォームは、そのままだと少し素っ気なく見えやすいです。

そこで今回は、
背景色、余白、線を入れて、
フォーム全体を箱として見せています。

.contact-box {
  margin-top: 24px;
  padding: 24px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.contact-box {
  margin-top: 24px;
  padding: 24px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

CSS

フォームは “入力欄1つずつ” を見るより、まず
“全体がまとまって見えるか” を確認すると分かりやすいです。

何を入力するかが伝わりやすい

label を付ける

入力欄だけある状態だと、
「ここに何を書くのか」が少し分かりにくいです。

そこで、

<label for="name">お名前
  <input type="text" id="name" name="name">
</label>

<label for="name">お名前
  <input type="text" id="name" name="name">
</label>

HTML

のように label を付けると、
どの欄なのかが伝わりやすくなります。

input の前に label を置く
label の文字は短く分かりやすくする
最初は「お名前」「メールアドレス」「メッセージ」で十分

“窮屈じゃない”だけでもかなり変わる

input と textarea

指定	どんな見え方になる？
padding を入れる	中の文字が窮屈に見えにくい
border を入れる	入力欄の範囲が分かりやすい
width: 100%;	横幅いっぱいに広がって扱いやすい
box-sizing: border-box;	幅を扱いやすくしやすい

今回は、

input,
textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #d1d5db;
  font-size: 16px;
  box-sizing: border-box;
}

input,
textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #d1d5db;
  font-size: 16px;
  box-sizing: border-box;
}

CSS

の形にしています。

これだけでも、
かなり “入力しやすそうな見た目” に近づきます。

これで十分

ボタンは“押せそうに見える”だけ

送信ボタンは、
本格的な装飾をしなくても大丈夫です。

最初は、

button {
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

button {
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

CSS

くらいで、
「ここを押すんだな」と分かれば十分です。

“入力例”として使うと便利

placeholder を使う

今回は input や textarea に placeholder を入れています。

<input type="text" id="name" name="name" placeholder="例：山田 太郎">

<input type="text" id="name" name="name" placeholder="例：山田 太郎">

HTML

これがあると、
何を書く欄なのかが少し伝わりやすくなります。

ただし、最初に大事なのは placeholder より label です。
placeholder は “補助” と考えておくと整理しやすいです。

少しだけ変えてみる（練習）

h1 の文言を自分向けのページ名に変える
説明文を自分向けの内容に変える
input の padding を 12px → 16px にしてみる
button の色を変えてみる
項目を1つ増やすか、逆に減らしてみる

toshi

この回も、模範解答どおりに動かしてから
“自分の内容に差し替える” 流れが進めやすいです。

ここだけ確認

よくあるつまずき

「つまずき①：input が横にはみ出す」

width: 100%; を入れると、
見え方によっては横にはみ出したように見えることがあります。

そんな時は、

box-sizing: border-box;

が入っているかを確認してください。

今は “幅を扱いやすくするために入れている” くらいで大丈夫です。

「つまずき②：ボタンの色が変わらない」

button に CSS を書いているのに変化がない時は、
HTML側が button タグになっているかを確認します。

たとえば、

<button type="submit">送信する</button>

<button type="submit">送信する</button>

HTML

の形なら、今回の CSS が当たりやすいです。

「つまずき③：入力欄どうしが近すぎて見にくい」

その時は input や textarea の margin-bottom を見直します。

たとえば、

input,
textarea {
  margin-bottom: 16px;
}

input,
textarea {
  margin-bottom: 16px;
}

CSS

の数字を少し増やすだけでも見やすくなります。

「つまずき④：説明文が長くてフォームまで遠く感じる」

説明文は短めで大丈夫です。

お問い合わせページは、
読むページというより “入力するページ” なので、
説明は 1〜2段落くらいで十分です。

ここだけ押さえればOK

今回のまとめ

お問い合わせページは、最初は6つの要素で十分
フォーム全体を箱にすると見やすい
label を付けると入力内容が伝わりやすい
input / textarea は padding と border だけでもかなり変わる
今回は“入力しやすそうに見える1ページ” を作れれば十分

できた判定

今日のゴール確認

ここまでできたらOKです。

・ HTMLとCSSでお問い合わせページを1ページ完成できた
・タイトル、説明文、入力欄、送信ボタンを整理して置けた
・フォームを見やすく入力しやすい形に整えられた
・次のまとめ記事へ進みやすくなった

※一例として今回の内容の確認と復習を含めて作成したものを
zipファイルとして置いておきます。今回の階層も下記のようになります。

CSS4-2/
├─ index.html
├─ style.css
└─ images/
　　└─ sample.jpg

CSS4-2 ダウンロード

次に読む

CSS 4-3へ

ここまでで、
“見せるページ” と “入力するページ” の2つを作れました。

最後に、
HTMLとCSSでここまでできたことを整理して、
最初の区切りとしてまとめていきます。

次へ：CSS 4-3 まとめへ進む

PR：この1冊（必要な方だけ）

PR：HTMLを進めるための参考（必要な方だけ）
HTML/CSSの最初の土台づくり用に、まず1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

リンク

PR：最初の1冊を読み終えた方へ
HTML/CSSの全体像をつかんだあとに、CSSの見た目調整や模擬コーディングをもう少し深めたい方向けの1冊です。
今回は自己紹介ページのように、「見出し・画像・余白・並び方」を組み合わせて整える感覚と相性の良いものを置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

リンク

#CSS #HTML #Web制作 #お問い合わせページ #フォーム #フォーム装飾

【CSS 4-2】ミニ制作｜お問い合わせページを作る｜フォームを“読みやすく使いやすく”整える（初心者向け）

今回のゴール

まずは完成形を見る

どこを見ればいい？

お問い合わせページに入れる要素

form 全体を箱にする

label を付ける

input と textarea

ボタンは“押せそうに見える”だけ

placeholder を使う

よくあるつまずき

今回のまとめ

今日のゴール確認

CSS 4-3へ

コメントをキャンセル

【CSS 2-1】見た目を整えるミニ制作｜色・余白・箱を1ページにまとめる（初心者向け）

【CSS 3-2】よくあるつまずき｜CSSが効かない・崩れる・優先順位で困ったときの見直し方（初心者向け）

【CSS 1-1】CSSを書いてみる｜色・文字サイズ・背景色を変えて“見た目が変わる体験”をする（初心者向け）

【CSS 4-1】ミニ制作｜自己紹介ページを作る｜見出し・画像・プロフィールを1ページにまとめる（初心者向け）

【CSS 3-1】レイアウトの入口｜Flexの最小で“並び方”を整える（初心者向け）

【CSS 1-3】ボックスモデルの入口｜width・border・paddingで“箱として見る感覚”をつかむ（初心者向け）

【CSS 1-2】余白を整える｜margin・paddingで“窮屈じゃない見た目”を作る（初心者向け）

CSSの入口（0-0）｜文字・余白・レイアウトを整える最短ロードマップ（web-programming / css）

【CSS 4-3】まとめ｜HTMLとCSSで“自己紹介ページ”と“お問い合わせページ”が作れたら最初は十分（初心者向け）

カテゴリー

タグ