HTMLファイルを作成する
前回まででトップページとお知らせページが完成しました。
今回からは最後の3ページ目となる「お問い合わせ」ページを作成していきます。
まずはお問い合わせページのHTMLファイルを作成します。
今回はお知らせページの「information.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©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©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をコーディングしていきましょう。