VOL15お問い合わせページを作成する

今回からお問い合わせページを作成していきます。新しく「contact.html」を作成して、お問い合わせページのHTMLをコーディングしていきましょう。

この記事のポイント

お知らせページのHTMLファイルをベースにして作成する
a要素のリンクはWEBサイトのページだけじゃなく「メールアドレス」や「電話番号」を設定することもできる

HTMLファイルを作成する

前回まででトップページとお知らせページが完成しました。
今回からは最後の3ページ目となる「お問い合わせ」ページを作成していきます。

今回から作成するお問い合わせページ

まずはお問い合わせページのHTMLファイルを作成します。
今回はお知らせページの「information.html」をベースにして作成するため、このファイルを複製（コピー＆ペースト）して「contact.html」というファイル名を作成してください。

「contact.html」を作成

お問い合わせページのページ情報を書く

お知らせページを作ったときと同様に、まずはhead要素内のページタイトルを編集しておきましょう。
「contact.html」を開いて、title要素の文言を以下のように変更してください。

information.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>お問い合わせ | PROFILE</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    // 省略

  </body>
</html>

今回設定するページ情報は以上です。
引き続き、コンテンツのHTMLをコーディングしていきましょう。

お問い合わせページの骨組みを作る

お問い合わせページの大まかな構造をイメージしてみましょう。

お知らせページの構造イメージ

ヘッダーとフッターはこれまでのページと共通しています。
しかしコンテンツ部分もよく見ると、お知らせページにとてもよく似ていることが分かると思います。

そこで、お知らせページのHTMLをベースに編集してお知らせページを作成していきましょう。
「contact.html」を開いて、main要素のid属性とh1要素のテキストを編集し、article要素と「お問い合わせはこちら」ボタンのp要素を全て削除してください。

information.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>お問い合わせ | PROFILE</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header id="header">
      <div class="wrapper">
        <p class="logo"><a href="#">PROFILE</a></p>
        <nav>
          <ul>
            <li><a href="#">トップ</a></li>
            <li><a href="#">お知らせ</a></li>
            <li><a href="#">お問い合わせ</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="contact">
      <div class="wrapper">
        <h1>お問い合わせ</h1>
        
        // article要素とp要素を全て削除

      </div>
    </main>
    <footer id="footer">
      <p>Copyright&copy;2021 GRAYCODE.</p>
    </footer>
  </body>
</html>

HTMLを書く

続いて、h1要素より下のコンテンツのHTMLを書いていきます。
HTMLのコーディングイメージは以下のようになります。

コンテンツのコーディングイメージ

article要素は「メール」と「電話番号」で2つ必要になりますが、HTMLの構造は全く同じになります。
「contact.html」を開いて、以下の赤字になっているHTMLコードを入力してください。

information.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>お問い合わせ | PROFILE</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header id="header">
      <div class="wrapper">
        <p class="logo"><a href="#">PROFILE</a></p>
        <nav>
          <ul>
            <li><a href="#">トップ</a></li>
            <li><a href="#">お知らせ</a></li>
            <li><a href="#">お問い合わせ</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="contact">
      <div class="wrapper">
        <h1>お問い合わせ</h1>
        <p class="text_lead">お問い合わせはメール、または電話番号へお寄せください。</p>
        <article>
          <h2>メールでのお問い合わせ</h2>
          <p class="text_content">メールアドレス：<a href="mailto:test@gray-code.com">test@gray-code.com</a><br>お問い合わせいただく際は、本文にお名前とお問い合わせ内容を忘れずにご記入ください。<br>3日を目安にご連絡いたします。</p>
        </article>
        <article>
          <h2>電話でのお問い合わせ</h2>
          <p class="text_content">電話番号：<a href="tel:080-xxxx-xxxx">080-xxxx-xxxx</a><br>電話での受付は平日10時〜17時のみとなります。<br>時期によって繋がりづらいことがあるため、その際は上記のメールアドレスへご連絡いただきますようお願い申し上げます。</p>
        </article>
      </div>
    </main>
    <footer id="footer">
      <p>Copyright&copy;2021 GRAYCODE.</p>
    </footer>
  </body>
</html>

コーディングした中で使用するHTML要素は以下の5種類です。

p要素 – テキスト系コンテンツ
article要素 – お知らせ内容が入る。今回は3件分を作成
h2要素 – メール、電話番号の見出し
a要素 – お問い合わせ先へのリンクを設定
br要素 – テキストを途中で改行する

お知らせページよりややシンプルになり、今回は新しいHTML要素も登場しません。
しかし、お問い合わせ先のリンクを設定するa要素の使い方がポイントになります。

a要素のhref属性はWebサイトの他ページへのリンク(（URL）以外に、メールアドレスや電話番号のリンクを設定することができます。

メールアドレスのリンクを設置するときは、お問い合わせ先（宛先）になるメールアドレスの前に「mailto:」を付けます。
例えば、お問い合わせを受け付けるメールアドレスを「test@gray-code.com」だとすると、href属性には「mailto:test@gray-code.com」と記述します。
ページを閲覧した方がこのリンクをクリックすると、インストールされたメーラー（メールソフト）が起動して自動的に宛先が入力された状態で新規のメール作成画面が開きます。（起動するメーラーは閲覧している方の環境に依存します）

もう一つの電話番号のリンクは、電話を受け付ける番号の前に「tel:」を付けて設定します。
こちらのリンクは閲覧した方がクリックすると、そのまま電話をかけることができます。
スマホサイトなどで電話受付したいときは特に有効です。

ここまでで、お問い合わせページのHTMLコーディングは完了しました。
次回はCSSをコーディングしていきましょう。

VOL15お問い合わせページを作成する

この記事のポイント

目次

HTMLファイルを作成する

お問い合わせページのページ情報を書く

information.html コード例

お問い合わせページの骨組みを作る

information.html コード例

HTMLを書く

information.html コード例

記事一覧