【HTML/CSS】Contactセクション（お問い合わせフォーム）の作成｜簡単なポートフォリオサイトの作成

Webサイトに必須の「お問い合わせフォーム」を作る方法を学びます。HTMLのformタグやinputタグでフォームの構造を作り、CSSのFlexboxで各項目をきれいに配置します。入力欄や送信ボタンのデザインはもちろん、マウスを合わせた時にボタンの色が変わるような、使いやすさを向上させるテクニックも解説します。

開発環境

• OS: Windows10
• Editor: Visual Studio Code
• HTML: 5
• CSS: 3
• JavaScript: ES6以降

サンプルコード

/assets/css/style.css

/assets/css/style.cssCopy
1   font-size: 14px;
2   color: #666;
3   line-height: 1.5;
4+}
5+
6+/* contactセクション */
7+#contact {
8+  padding: 80px 20px;
9+  background-color: #f9f9f9;
10+}
11+
12+.contact-form {
13+  max-width: 600px;
14+  margin: 0 auto;
15+  display: flex;
16+  flex-direction: column;
17+  gap: 20px;
18+}
19+
20+.contact-form label {
21+  font-weight: 600;
22+  margin-bottom: 6px;
23+  display: block;
24+  color: #333;
25+}
26+
27+.required {
28+  color: red;
29+  margin-left: 4px;
30+}
31+
32+.contact-form input,
33+.contact-form textarea {
34+  padding: 12px 16px;
35+  border: 1px solid #ccc;
36+  border-radius: 6px;
37+  font-size: 16px;
38+  resize: vertical;
39+  font-family: inherit;
40+}
41+
42+.contact-form input:focus,
43+.contact-form textarea:focus {
44+  border-color: #0077cc;
45+  outline: none;
46+}
47+
48+.btn-submit {
49+  background-color: #0077cc;
50+  color: white;
51+  padding: 14px 0;
52+  font-size: 18px;
53+  border: none;
54+  border-radius: 8px;
55+  cursor: pointer;
56+  transition: background-color 0.3s ease;
57+  font-weight: 600;
58+}
59+
60+.btn-submit:hover {
61+  background-color: #005fa3;
62 }
63

/index.html

/index.htmlCopy
1     </section>
2 
3     <section id="contact">
4-        <h2>Contact</h2>
5-        <p>お問い合わせはこちらから。</p>
6+        <div class="container">
7+            <h2 class="section-title">Contact</h2>
8+            <form action="#" method="post" class="contact-form">
9+                <label for="name">お名前<span class="required">*</span></label>
10+                <input type="text" id="name" name="name" required>
11+
12+                <label for="email">メールアドレス<span class="required">*</span></label>
13+                <input type="email" id="email" name="email" required>
14+
15+                <label for="message">お問い合わせ内容<span class="required">*</span></label>
16+                <textarea id="message" name="message" rows="6" required></textarea>
17+
18+                <button type="submit" class="btn-submit">送信する</button>
19+            </form>
20+        </div>
21     </section>
22 
23     <footer>
24

コード解説

変更点: Contactセクションの基本構造とフォームの追加

/index.htmlCopy
1     </section>
2 
3     <section id="contact">
4-        <h2>Contact</h2>
5-        <p>お問い合わせはこちらから。</p>
6+        <div class="container">
7+            <h2 class="section-title">Contact</h2>
8+            <form action="#" method="post" class="contact-form">
9+                <!-- この中にフォームの各項目が入ります -->
10+            </form>
11+        </div>
12     </section>
13 
14     <footer>

これまでのセクションと同様に、内容を<div class="container">で囲み、見出しにclass="section-title"を付けてサイト全体のデザインと統一感を持たせています。 お問い合わせフォームを作成するために、全体を<form>タグで囲みます。このタグは、ユーザーが入力した情報をサーバーに送信するための範囲を定義します。 action="#"は、フォームの送信先URLを指定する属性ですが、今回は仮に#を入れています。method="post"は、データの送信方法を指定するもので、postは一般的なフォームで使われる送信方法です。 最後に、CSSでデザインを整えるためにclass="contact-form"というクラス名を付けています。

変更点: 各入力項目の追加

/index.htmlCopy
1+                <label for="name">お名前<span class="required">*</span></label>
2+                <input type="text" id="name" name="name" required>
3+
4+                <label for="email">メールアドレス<span class="required">*</span></label>
5+                <input type="email" id="email" name="email" required>
6+
7+                <label for="message">お問い合わせ内容<span class="required">*</span></label>
8+                <textarea id="message" name="message" rows="6" required></textarea>

フォーム内に具体的な入力項目を追加しています。 <label>タグは入力欄の項目名（ラベル）を表示します。for属性の値と、対になる入力欄のid属性の値を同じにすることで、両者を関連付けることができます。これにより、ラベルをクリックしたときに対応する入力欄が選択状態になり、使いやすさが向上します。

<input>タグは1行の入力欄を作成します。type属性で入力されるデータの種類を指定でき、type="text"は一般的なテキスト、type="email"はメールアドレス形式の入力を想定しています。id属性はlabelと関連付けるための識別子、name属性はサーバーにデータを送信する際に使われる名前です。

<textarea>タグは、複数行のテキストを入力できる欄を作成します。お問い合わせ内容など、長い文章を入力する場合に使います。

変更点: 必須項目の設定と送信ボタンの追加

/index.htmlCopy
1+                <label for="name">お名前<span class="required">*</span></label>
2+                <input type="text" id="name" name="name" required>
3...
4+                <button type="submit" class="btn-submit">送信する</button>

各<label>タグの中にある<span class="required">*</span>は、その項目が必須であることを示す「*」マークです。<span>タグで囲むことで、後からCSSで文字を赤くするなどのデザインを適用しやすくしています。

また、<input>タグと<textarea>タグに追加されたrequired属性は、その項目が入力必須であることをブラウザに伝えます。これにより、ユーザーが必須項目を空欄のまま送信しようとすると、ブラウザが自動的にエラーメッセージを表示してくれます。

最後に<button type="submit" class="btn-submit">送信する</button>で、フォームの内容を送信するためのボタンを設置しています。type="submit"とすることで、このボタンがフォームを送信する役割を持つことを示します。class="btn-submit"はCSSでデザインを適用するためのクラス名です。

変更点: Contactセクション全体のスタイリング

/assets/css/style.cssCopy
1+/* contactセクション */
2+#contact {
3+  padding: 80px 20px;
4+  background-color: #f9f9f9;
5+}

index.htmlで追加したid="contact"を持つセクションに対して、CSSでスタイルを設定しています。 padding: 80px 20px;は、セクションの内側に上下80px、左右20pxの余白（パディング）を設けるための指定です。これにより、セクション内のコンテンツがページの端に寄らず、見やすくなります。 background-color: #f9f9f9;は、セクションの背景色を薄いグレーに設定しています。他のセクションと背景色を変えることで、視覚的にセクションの区切りが分かりやすくなります。

変更点: Flexboxによるフォームのレイアウト調整

/assets/css/style.cssCopy
1+.contact-form {
2+  max-width: 600px;
3+  margin: 0 auto;
4+  display: flex;
5+  flex-direction: column;
6+  gap: 20px;
7+}

フォーム全体を囲む要素（.contact-form）のレイアウトを整えています。 max-width: 600px;は、フォームの横幅が最大でも600px以上には広がらないようにする設定です。これにより、画面幅が広い場合でもフォームが横に伸びすぎるのを防ぎます。 margin: 0 auto;は、上下の余白を0、左右の余白を自動（auto）にすることで、フォーム全体を親要素の中央に配置します。 display: flex;でFlexboxというレイアウト方法を有効にし、flex-direction: column;で子要素（ラベルや入力欄など）を縦一列に並べています。 gap: 20px;は、縦に並んだ各項目の間に20pxの均等な間隔を空けるための指定です。

変更点: ラベルと必須マークのスタイリング

/assets/css/style.cssCopy
1+.contact-form label {
2+  font-weight: 600;
3+  margin-bottom: 6px;
4+  display: block;
5+  color: #333;
6+}
7+
8+.required {
9+  color: red;
10+  margin-left: 4px;
11+}

フォームの項目名である<label>タグと、必須を示す「*」マーク（.required）のデザインを整えています。 .contact-form labelセレクタでは、font-weight: 600;で文字を少し太くし、color: #333;で文字色を濃いグレーにしています。margin-bottom: 6px;で、ラベルの下に少し余白を作り、入力欄との間隔を調整しています。

.requiredセレクタでは、color: red;で「」マークを赤色にして目立たせています。margin-left: 4px;は、項目名と「」マークの間に少し隙間を空けるための指定です。

変更点: 入力欄（input, textarea）の共通スタイル

/assets/css/style.cssCopy
1+.contact-form input,
2+.contact-form textarea {
3+  padding: 12px 16px;
4+  border: 1px solid #ccc;
5+  border-radius: 6px;
6+  font-size: 16px;
7+  resize: vertical;
8+  font-family: inherit;
9+}

<input>（入力欄）と<textarea>（複数行のテキストエリア）に共通のデザインを適用しています。 padding: 12px 16px;で、入力欄の内側に余白を作り、文字が枠線にくっつかないようにしています。 border: 1px solid #ccc;で、1pxの太さの灰色（#ccc）の実線を枠線として表示し、border-radius: 6px;で枠線の角を少し丸くしています。 font-size: 16px;で入力される文字の大きさを指定します。 resize: vertical;は、<textarea>のサイズ変更を縦方向のみに限定する指定です。これにより、ユーザーが誤って横幅を変えてしまいレイアウトが崩れるのを防ぎます。 font-family: inherit;は、親要素からフォントの種類を継承する指定で、サイト全体のフォントと統一感を持たせることができます。

変更点: 入力欄フォーカス時のスタイル

/assets/css/style.cssCopy
1+.contact-form input:focus,
2+.contact-form textarea:focus {
3+  border-color: #0077cc;
4+  outline: none;
5+}

ユーザーが入力欄をクリックして、文字を入力できる状態（フォーカス状態）になったときのデザインを指定しています。 :focusは、要素がフォーカスされたときに適用されるCSSの疑似クラスです。 border-color: #0077cc;は、入力中の項目の枠線の色を青色に変える指定です。これにより、ユーザーは今どの項目を入力しているのかが視覚的に分かりやすくなります。 outline: none;は、ブラウザが標準で表示するフォーカス時の枠線（通常は青い太線）を非表示にするための指定です。今回はborder-colorで独自のデザインを適用しているため、標準のoutlineは不要になります。

変更点: 送信ボタンの基本スタイル

/assets/css/style.cssCopy
1+.btn-submit {
2+  background-color: #0077cc;
3+  color: white;
4+  padding: 14px 0;
5+  font-size: 18px;
6+  border: none;
7+  border-radius: 8px;
8+  cursor: pointer;
9+  transition: background-color 0.3s ease;
10+  font-weight: 600;
11+}

送信ボタン（.btn-submit）のデザインを整えています。 background-color: #0077cc;で背景色を青に、color: white;で文字色を白に設定しています。 padding: 14px 0;でボタンの上下に内側の余白を設け、高さを出しています。 font-size: 18px;とfont-weight: 600;で、文字を大きめかつ少し太くして目立たせています。 border: none;でデフォルトの枠線を消し、border-radius: 8px;で角を丸くしています。 cursor: pointer;は、ボタンの上にマウスカーソルを乗せたときに、カーソルの形状を指マークに変える指定です。これにより、クリックできる要素であることが直感的に伝わります。 transition: background-color 0.3s ease;は、背景色が変化する際に0.3秒かけて滑らかに変化させるためのアニメーション設定です。

変更点: 送信ボタンのホバーエフェクト

/assets/css/style.cssCopy
1+.btn-submit:hover {
2+  background-color: #005fa3;
3+}

送信ボタンにマウスカーソルが乗ったときのデザインを指定しています。 :hoverは、要素の上にマウスカーソルが乗ったときに適用されるCSSの疑似クラスです。 ここでは、background-colorを少し暗い青色（#005fa3）に変更しています。 前のステップでtransitionプロパティを設定したため、マウスを乗せると背景色が0.3秒かけてじわっと変わります。このような視覚的なフィードバックは、ユーザーにボタンが操作可能であることを伝え、使いやすさを向上させる効果があります。

おわりに

今回はformタグやinputタグを用いて、お問い合わせフォームの基本的なHTML構造を作成しました。CSSではFlexboxを使い、各入力項目を縦に整列させることで、すっきりとしたレイアウトを実現しています。また、入力欄の枠線やボタンの色などを細かく調整し、統一感のあるデザインに仕上げました。特に、マウス操作で色が変わる:hoverや入力中であることがわかる:focusは、ユーザーの使いやすさを向上させる重要なテクニックです。