HTMLファイルを作成する
前回までで、トップページが完成しました。
今回からは続いて2ページ目の「お知らせ」ページを作成していきます。
まずはトップページのときと同様にHTMLファイルを作成します。
ただし、今回はトップページの「index.html」をベースに作成していくため、このファイルを複製（コピー＆ペースト）して「information.html」というファイル名を作成してください。
お知らせページのページ情報を書く
コンテンツのコーディングを始める前に、head要素内のページタイトルを編集しておきましょう。
「information.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コーディングの時と同様に、まずはお知らせページの大まかな構造をイメージしてみましょう。
ヘッダーとフッターはトップページと共通しているため、今回はコンテンツ部分のみコーディングをしていきます。
まずは大枠だけ作成しましょう。
「information.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="information">
<div class="wrapper">
</div>
</main>
<footer id="footer">
<p>Copyright©2021 GRAYCODE.</p>
</footer>
</body>
</html>コンテンツはid属性「information」を持つmain要素に入ります。
また、コンテンツの幅、左右の余白を揃えるためのdiv要素をあらかじめ作成しておきます。
HTMLを書く
続いて、main要素内にコンテンツのHTMLを書いていきましょう。
HTMLのコーディングイメージは以下のようになります。
article要素は3つ必要ですが、文言が異なるだけでHTMLの構造は全く同じです。
「information.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="information">
<div class="wrapper">
<h1>お知らせ</h1>
<article id="part1">
<p class="text_date"><time datetime="2021-04-12">2021.04.12</time></p>
<h2>お問い合わせページを追加しました。</h2>
<p class="text_content">お問い合わせページを追加しました。<br>当サイトについてのお問い合わせは、記載した電話番号、またはメールアドレスまでお寄せください。</p>
</article>
<article id="part2">
<p class="text_date"><time datetime="2021-04-05">2021.04.05</time></p>
<h2>プロフィールを更新しました。</h2>
<p class="text_content">プロフィールを更新しました。</p>
</article>
<article id="part3">
<p class="text_date"><time datetime="2021-04-01">2021.04.01</time></p>
<h2>PROFILEサイトを公開しました！</h2>
<p class="text_content">サイトを公開しました。<br>今後も更新ができるよう頑張ります。</p>
</article>
<p class="link_contact"><a href="#">お問い合わせはこちら</a></p>
</div>
</main>
<footer id="footer">
<p>Copyright©2021 GRAYCODE.</p>
</footer>
</body>
</html>今回使用するHTML要素は以下の7種類です。
- h1要素 - 大見出し
- article要素 - お知らせ内容が入る。今回は3件分を作成
- h2要素 - 各お知らせの見出し
- p要素 - 見出し以外のテキスト系コンテンツ
- time要素 - お知らせの投稿日時
- a要素 - 「お問い合わせはこちら」ボタン。トップページと同じ内容
- br要素 - テキストを途中で改行する
今回はコンテンツが1つにまとまっているため、トップページよりもシンプルです。
コンテンツの肝になるのは3つ縦に並ぶarticle要素です。
article要素にもid属性を設定していますが、こちらはトップページからリンクを設定するときにアンカーとして使います。
リンクの設定は後ほど行うため、ここでは一旦置いておいてください。
article要素の中身はお知らせの投稿日、見出し（h2要素）、内容の3種類です。
投稿日についてはトップページと同様にtime要素を使ってマークアップします。
「お問い合わせはこちら」ボタンについてはトップページと全く同じなので、HTMLもCSSも共通になります。
ここまででお知らせページのHTMLはコーディングが完了しました。
次回はCSSをコーディングしていきましょう。