CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでお問い合わせフォームを作成する方法を初心者向けに解説

Webサイトにおけるお問い合わせフォームは、訪問者と運営者をつなぐ重要な窓口です。HTMLだけでフォームは作成できますが、CSSを組み合わせることで、見た目が整った洗練されたデザインに仕上げることができます。

本記事では、CSSを使ってシンプルかつ実用的なお問い合わせフォームを作成する方法を、実際のコード例とともにわかりやすく解説します。

お問い合わせフォームの完全なコード例

以下は、CSSを使用してお問い合わせフォームを作成するサンプルコードです。そのままコピーしてHTMLファイルとして保存すれば、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
label{
    font-size: 15px;
}
input[type=text],textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
}
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color: #45a049;
}
form {
    border-radius: 5px;
    background-color: #feffc6;
    padding: 20px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Contact Form</h1>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Enter your firstname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Enter your surname">
<label for="email">Email Id</label>
<input type="text" id="email" name="Email" placeholder="Enter your emailId">
<label for="contact">Contact</label>
<textarea id="contact" name="contact" placeholder="Write your message here"
style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、淡い黄色の背景を持つフォームが中央に配置され、名前・姓・メールアドレスの入力欄、メッセージ用のテキストエリア、そして緑色の送信ボタンが縦に並んだお問い合わせフォームが出力されます。

コードのポイント解説

ここからは、このフォームを実現しているCSSの重要なポイントを順番に見ていきましょう。

1. ボックスサイズの統一（box-sizing）

冒頭の * {box-sizing: border-box;} は、すべての要素に対してpaddingやborderを含めたサイズ計算を行う指定です。これにより、入力欄の幅が意図せずはみ出すのを防ぎ、レイアウトを管理しやすくなります。

2. 入力欄とテキストエリアのスタイリング

input[type=text] と textarea には、幅100%、内側の余白12px、薄いグレーの枠線、角丸4pxを指定しています。また、上下にマージンを設定することで、ラベルとの間隔が均等になり、読みやすいフォームになります。

3. 送信ボタンのデザインとホバー効果

送信ボタンには緑系の背景色（#4CAF50）と白い文字を設定し、:hover 疑似クラスを使ってマウスカーソルを重ねたときに少し濃い緑（#45a049）へ変化させています。この小さな変化があるだけで、ボタンが押せることを直感的に伝えられます。また、cursor: pointer; を指定することで、カーソルが指の形に変わります。

4. フォーム全体の背景と余白

form 要素には淡い黄色（#feffc6）の背景色、角丸5px、内側の余白20pxを設定しています。フォーム領域がページ背景と区別され、視覚的にもまとまりのある印象になります。

まとめ

CSSを使えば、HTMLだけでは味気ないお問い合わせフォームでも、余白・角丸・配色・ホバー効果などを加えることで、使いやすく魅力的なデザインに仕上げられます。今回紹介したコードはベースとして活用し、サイトのテーマカラーに合わせて背景色やボタンの色を変更するなど、自由にカスタマイズしてみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>