Webページにレスポンシブなお問い合わせセクションを作成する方法【HTML/CSS】

Webページにお問い合わせフォームを設置することは、訪問者との接点づくりにおいて非常に重要です。本記事では、HTMLとCSSだけを使って、PC・タブレット・スマートフォンなど、あらゆる画面サイズに美しく対応する「レスポンシブなお問い合わせセクション」の作り方を、サンプルコード付きでわかりやすく解説します。

サンプルコード

以下のコードをそのままHTMLファイルとして保存すれば、ブラウザですぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    input[type="text"], select, textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
        font-size: 18px;
    }
    input[type="submit"] {
        background-color: rgb(139, 76, 175);
        color: white;
        padding: 12px 20px;
        border: none;
        cursor: pointer;
        font-size: 18px;
    }
    label {
        font-weight: bold;
    }
    .contactImg {
        width: 300px;
        height: 300px;
    }
    input[type="submit"]:hover {
        background-color: #45a049;
    }
    .contactForm {
        margin: auto;
        border-radius: 5px;
        background-color: #d3d3d3;
        padding: 10px;
        max-width: 1000px;
    }
    .contactCol {
        float: left;
        width: 35%;
        margin-top: 6px;
        padding: 20px;
    }
    .contactSection:after {
        content: "";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 600px) {
        .contactCol, input[type="submit"] {
            width: 100%;
            margin-top: 0;
        }
    }
</style>
</head>
<body>
<h1 style="text-align: center;">レスポンシブお問い合わせセクションの例</h1>
<div class="contactForm">
<div style="text-align:center">
<h2>お問い合わせ</h2>
</div>
<div class="contactSection">
<div class="contactCol">
<img class="contactImg" src="https://i.picsum.photos/id/8/400/400.jpg"/>
</div>
<div class="contactCol">
<form action="/action_page.php">
<label for="fname">名前</label>
<input type="text" id="fname" name="firstname" placeholder="お名前を入力してください"/>
<label for="lname">姓名</label>
<input type="text" id="lname" name="lastname" placeholder="姓名を入力してください"/>
<label for="country">メールアドレス</label>
<input type="text" id="country" name="email" placeholder="メールアドレスを入力してください"/>
<label for="subject">メッセージ</label>
<textarea id="subject" name="subject" placeholder="メッセージをご記入ください" style="height:170px"></textarea>
<input type="submit" value="送信する" />
</form>
</div>
</div>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、左側に画像、右側に入力フォームが配置された、次のようなお問い合わせセクションが表示されます。画面幅を狭めると、レイアウトが自動的に縦積みへと切り替わります。

Webページにレスポンシブなお問い合わせセクションを作成する方法【HTML/CSS】

コードのポイント解説

1. メディアクエリでレスポンシブ対応を実現

レスポンシブ化の中心となるのが「@media screen and (max-width: 600px)」の部分です。画面幅が600px以下のデバイス（主にスマートフォン）で表示された際に、画像とフォームのカラム、そして送信ボタンの幅を100%に切り替えます。これにより、横並びだったレイアウトが自動的に縦積みに変化し、小さな画面でも快適に操作できるようになります。

2. floatとclearfixによる2カラムレイアウト

.contactColクラスにはfloat: left;を指定し、左側に画像（幅35%）、右側にフォームを横並びで配置しています。さらに、親要素の.contactSectionに対して:after疑似要素を使ったclearfix（content: ""; display: table; clear: both;）を適用することで、floatによる高さの計算漏れを防ぎ、背景色が途切れずに正しく表示されるようにしています。

3. box-sizing: border-boxでレイアウト崩れを防止

全要素にbox-sizing: border-box;を指定すると、paddingやborderを含んだ状態でwidthが計算されます。その結果、入力欄やボタンが親要素からはみ出すといったトラブルを防げます。レスポンシブデザインではほぼ必須の設定なので、覚えておきましょう。

4. フォーム部品の統一感とホバー演出

テキスト入力欄・セレクトボックス・テキストエリアに共通のスタイルを当てることで、フォーム全体に統一感を持たせています。また、送信ボタンには:hover疑似クラスを設定し、マウスオーバー時に色が変わるようにすることで、クリックできる要素であることが直感的に伝わるようになっています。

なお、近年ではfloatの代わりにFlexboxやCSS Gridを使用することで、よりシンプルかつ柔軟にレスポンシブな2カラムレイアウトを実現することも可能です。まずはこのサンプルをベースに、配色や余白、画像などを自分のサイトの雰囲気に合わせてカスタマイズしてみてください。

CSSだけで作る！Webサイトの「About Us」ページの作り方【サンプルコード付き】

CSSでWebサイト全体を水平方向に中央揃えする方法

PowerPoint for the Webでタイムラインを作成する方法【初心者向けガイド】
タイムラインとは、一定期間内の重要な出来事を視覚的に表現したグラフのことです。タイムライン、ガントチャート、ロードマップなどの図表は、プロジェクト管理において非常に重要な役割を果たします。これらの図表を活用することで、プロジェクトの各段階を効率的に計画できます。この記事では、PowerPoint for the Webでタイムラインを作成する方法を詳しく解説します。パソコンでタイムラインを作成するには？パソコンでタイムラインを作成するには、Microsoft PowerPointのデスクトップアプリケーションを使用します。Microsoft Officeがインストールされていない環境でも、
無料でできる!Visual Studioを使ったオリジナルWebブラウザの作り方
自分だけのWebブラウザを作ってみたいと思ったことはありませんか?閲覧履歴などブラウザが知り得るあなたのデータがすべて自分のパソコンの中に留まることを考えれば、自作ブラウザは決して悪いアイデアではありません。むしろプライバシー保護の観点からは非常に理にかなった選択と言えます。この記事では、Microsoftの無料開発環境「Visual Studio」を使って、自分好みの基本ブラウザを無料で作成する手順を解説します。扱うコードはごくわずかで、プログラミング初心者でも安心して取り組める内容です。 Visual Studioのインストールとアップデートまずは、Microsoftが完全無料で提供し