お問い合わせページの作成
お問い合わせページを作成します。
contact.htmlの作成
まずはcontact.htmlを作成し、お問い合わせページのHTMLを作成しましょう。
基本レイアウトは会社案内ページのHTMLをコピーして使います。
下記の2箇所をお問い合わせページに合わせて修正してください。
また、メインコンテンツ内に記述してある会社案内のHTMLは削除します。
<!-- ナビゲーション ここから --> <div class="box-column"> <nav class="navigation"> <div class="container"> <ul class="clearfix"> <li><a href="index.html">トップページ</a></li> <li><a href="service.html">サービス案内</a></li> <li><a href="company.html">会社案内</a></li> <li><a href="blog.html">ブログ</a></li> <li class="active"><a href="contact.html">お問い合わせ</a></li> </ul> </div> </nav> </div> <!-- ナビゲーション ここまで --> <!-- タイトルバー ここから --> <div class="box-column"> <div class="title-bar"> <div class="container"> <h2>お問い合わせ</h2> </div> </div> </div> <!-- タイトルバー ここまで -->
マークアップ
完成イメージから必要なパーツを次のようにマークアップしてみましょう。

HTMLコード
次のようにHTMLを記述します。
<div class="box-column clearfix"> <div class="box-column float-left w66"> <!-- お問い合わせ ここから --> <div class="contact"> <h2 class="heading">お問い合わせ</h2> <p> お問い合わせはこちらのメールフォームよりお願い致します。 お客様のお名前、メールアドレス、ご質問内容をご入力の上、「送信」ボタンをクリックしてください。情報を入力する際は、プライバシーポリシーに同意の上、ご入力ください。ご入力頂く内容は、個人情報保護ポリシー に則り厳正に管理させていただきます。 </p> <form action=""> <table class="table"> <tbody> <tr> <th>お名前</th> <td> <input type="text" name="company" size="50"> </td> </tr> <tr> <th>メールアドレス</th> <td> <input type="text" name="email" size="50"> </td> </tr> <tr> <th>性別</th> <td> <input type="radio" name="gender" value="man">男性 <input type="radio" name="gender" value="woman">女性 </td> </tr> <tr> <th>お問い合わせ項目1</th> <td> <select name="item1"> <option>選択してください</option> <option value="1">事業について</option> <option value="2">採用について</option> <option value="3">その他</option> </select> </td> </tr> <tr> <th>お問い合わせ項目2</th> <td> <input type="checkbox" name="item2" value="1">出店について <input type="checkbox" name="item2" value="2">販促について <input type="checkbox" name="item2" value="3">海外事業について </td> </tr> <tr> <th>お問い合わせ内容</th> <td> <textarea name="content" rows="6" cols="60"></textarea> </td> </tr> </tbody> </table> <div class="text-center"> <button type="submit" class="button">送信する</button> </div> </form> </div> <!-- お問い合わせ ここまで --> </div> <div class="box-column float-left w33">
CSSコード
お問い合わせ用のスタイルを追加します。
.title-bar h2 { color: #fff; } /* -------------------------- * お問い合わせ * -------------------------- */ .contact p { font-size: 13px; } .contact form { margin-top: 20px; } .contact input, .contact textarea, .contact select { padding: 5px 6px; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; vertical-align: middle; box-sizing: border-box; } .contact .text-center { text-align: center; }
これで、お問い合わせページの完成です。
続けて ブログ一覧ページの作成 を見てください。
正しくお問い合わせページの作成ができなかった方は、
「お問い合わせページ」サンプルコードをダウンロードして、「business」フォルダの内容を上書きしてから、
次のブログ一覧ページの作成に進んでください。

「お問い合わせページ」サンプルコード 1.13 MB