お問い合わせフォームを作る－初心者もできる！プログラミング基礎講座【第9回】

2021年4月19日2026年4月13日

シリーズ第9回は、簡単なお問い合わせフォームの作り方です。

お問い合わせフォーム

今回は上の画像のように、簡単なお問い合わせフォームをHTMLとCSSで作成してみましょう。実際の送信先の設定などははぶきます。ざっくりと説明すると、以下の要素があります。

見出し
入力欄の説明
入力欄（1行）
入力欄（複数行）
送信ボタン

これらをHTMLで書いていきましょう。

HTML

まず、レイアウトの時にも説明した通り、お問い合わせフォーム用のレイアウトをdivタグで囲んで作ります。後からCSSでスタイルをあてることを考慮して、class属性で名前（contact-form）を付けておきます。このレイアウトの中に上述の要素を記述していきましょう。

<div class="contact-form">
　<h1 class="contact-title">お問い合わせ</h1>
　<p>お名前</p>
　<input placeholder="例: 山田花子">
　<p>メールアドレス（必須）</p>
　<input placeholder="例: example@mail.com">
　<p>お問い合わせ内容（必須）</p>
　<textarea placeholder="お問い合わせ内容を入力してください"></textarea>
　<p>※必須項目は必ずご入力ください</p>
　<input class="contact-submit" type="submit" value="送信">
</div>

コードを見るとわかる通り、見出しをh1で、入力欄の説明をpで書いています。入力欄は次の二つの要素で記述しています。

input要素

1行の入力欄を作成できます。「お名前」や「メールアドレス」などの入力欄として活用できます。注意したい点として、input要素には終了タグが必要ないという点を覚えておきましょう。

textarea要素

複数行の入力欄を作成できます。「お問い合わせ内容」など、入力する情報量が定まっていない時に使用できます。こちらは終了タグが必要です。

placeholder属性

コードを見ると、inputとtextarea要素の両方にplaceholder属性が記述されています。これにより値に入力した情報が入力欄に薄い文字として表示されます。入力例を示す時に便利です。実際に情報を入力するとこの文字はすぐに消えるようになっています。

送信ボタンの作成

<input class="contact-submit" type="submit" value="送信">

送信ボタンは、input要素にtype属性でsubmitを値として指定し作成できます。また、value属性でボタン内の文字を指定できます。上記のコードでは「送信」となっていますが、「保存」など用途に合わせて値を変更できます。

なお、value属性の値は多くのブラウザで「送信」とデフォルトで設定されています。value属性を記述しなくても「送信」ボタンになることが多いです。

CSS

最初の画像のようなスタイルをつけるため、次のように記述しています。

.contact-title {
　border-bottom: 2px solid gray
}

.contact-form {
　padding-left: 10px;
　background-color: lightgray;
}

input,textarea {
　width: 400px;
　margin-bottom: 30px;
　font-size: 20px;
　border: 1px solid gray;
}

.contact-submit {
　background-color: rgb(255, 185, 80);
　color: rgb(125, 50, 15);
}

セレクタごとのスタイルの説明

.contact-title（お問い合わせ）
border-bottomというプロパティを使用して、「お問い合わせ」という見出しに下線を引いています。2pxの実線を灰色で引くという指定です。

.contact-form
フォーム全体に左側の余白10pxと背景色に薄い灰色をしてしています。

input,textarea
このように、複数の要素をカンマ区切りで記述すると、その後に指定するスタイルを記述した要素すべてにあてることができます。幅（width）、外側の余白（margin）、フォントの大きさ（font-size）、入力欄の枠線（border）が指定されています。

.contact-submit
送信ボタンの背景色と文字色をして指定しています。今回はrgb形式での指定です。
r：レッド、g：グリーン、b：ブルーの3色を合わせて作った色という意味です。0-255までの数値で表します。例えば、255 0 0 と記述した場合、red：フル、greenとblueは0のため、真っ赤になります。

視覚的なテキストエディタ

無料のテキストエディタとして Visual Studio Code があります。このエディタでCSSファイルを作成し色を指定すると、色見本がエディタ上に表示されます。視覚的に確認できるので大変便利です。また、色見本部分にマウスホバーするとカラーパレットも表示されます。

赤丸で囲んだ部分が色見本です。カラーパレットが表示されますが、上部の色情報（赤枠で囲んだ部分）をクリックすれば、hslなど他の形式での表示に切り替えられます。

以前にご紹介したAtomもいいエディタですが、Microsoft開発のVisual Studio Codeも大変使いやすいエディタです。ショートカットキーの使い方も覚えていくと編集効率がかなり上がります。使ってみたい方は以下のリンクからダウンロードできます。

Visual Studio Code（テキストエディタ）

まとめ

シリーズ記事初心者もできる！プログラミング基礎講座【第9回】はいかがでしたか。今回は簡単なお問い合わせフォームの作り方について解説してきました。HTMLもCSSもこれが正解というものはありません。規則に従って記述して、サイトの目的を達成できれば何も問題ありません。いろいろ自分なりに試してプログラミングを楽しむことが上達の近道だと思います。

次回もお楽しみに！