HTML(29)お問い合わせページの作成の仕方

前回はタイル型のレイアウトについて紹介しました。

HTML(28) タイル型のレイアウトの作成

今回は、タイル型のレイアウトの作成について紹介します。ブログページのメニュー等がみやすくなります。

今回はお問い合わせページの作成について紹介したいと思います。

【もっと詳しく知りたい人は是非これを読んでください！！】

1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本）

価格:747円 (2024/12/16 23:17時点) 感想(2件)

HTMLでのお問い合わせページ作成方法

お問い合わせページをHTMLで作る方法を、できるだけわかりやすく解説していきます。難しそうと思っている方でも大丈夫！一つずつ手順を追って作っていきましょう。

1. 必要な準備をしましょう

まずは準備が必要です。以下のものを用意してください。

必要なもの

テキストエディタ
- テキストを書くためのソフトです。Windowsなら「メモ帳」でもOKですが、もっと便利な「Visual Studio Code」という無料ソフトがおすすめです。
- Visual Studio Codeのダウンロードページはこちら
ブラウザ
- Google ChromeやSafariなど、普段使っているものでOKです。

準備ができたら次に進みましょう！

2. HTMLファイルを作ってみよう

お問い合わせページを作るには、まずHTMLファイルを作成します。

ステップ1: HTMLの基本構造

以下のコードをコピーしてテキストエディタに貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせ</title>
</head>
<body>
    <h1>お問い合わせ</h1>
    <!-- フォームはここに作ります -->
</body>
</html>

ステップ2: ファイルを保存

このコードを保存します。

名前は「contact.html」にしてください。
保存するときの文字コードは「UTF-8」を選びましょう。

ステップ3: ブラウザで確認

保存したファイルをブラウザで開くと、「お問い合わせ」という文字が表示されるはずです。これで準備完了です！

3. フォームを作成してみよう

次に、お問い合わせフォームを作っていきます。以下のコードを、先ほどの<body>タグ内に追加してください。

<form action="submit_form.php" method="post">
    <label for="name">お名前</label><br>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">メールアドレス</label><br>
    <input type="email" id="email" name="email" required><br><br>

    <label for="message">お問い合わせ内容</label><br>
    <textarea id="message" name="message" rows="5" required></textarea><br><br>

    <button type="submit">送信</button>
</form>

コードのポイント

<form>タグ：フォーム全体を囲むためのタグです。actionには、送信したデータを処理する場所を指定します。
<label>タグ：入力項目の説明を表示します。
<input>タグ：ユーザーが名前やメールアドレスを入力するフィールドを作成します。
<textarea>タグ：お問い合わせ内容を記入するための複数行の入力フィールドです。
<button>タグ：送信ボタンを作ります。

これを保存してブラウザで開くと、簡単なフォームが完成します！

4. 見た目を整える

次に、フォームのデザインを少し良くしてみましょう。以下のコードを、<head>タグ内に追加してください。

<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        max-width: 600px;
        margin: 20px auto;
        padding: 10px;
        background-color: #f9f9f9;
    }
    h1 {
        text-align: center;
    }
    form {
        background: #fff;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    label {
        font-weight: bold;
    }
    input, textarea, button {
        width: 100%;
        margin-top: 5px;
        margin-bottom: 15px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    button {
        background-color: #007BFF;
        color: white;
        border: none;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
</style>

これを追加するだけで、フォームが見やすくなります。