VOL13お知らせページを作成する

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

この記事のポイント

お知らせコンテンツはarticle要素を使う
ヘッダー、フッターはトップページと共通
「お問い合わせはこちら」ボタンもトップページと共通

HTMLファイルを作成する

前回までで、トップページが完成しました。
今回からは続いて2ページ目の「お知らせ」ページを作成していきます。

今回から作成するお知らせページ

まずはトップページのときと同様にHTMLファイルを作成します。
ただし、今回はトップページの「index.html」をベースに作成していくため、このファイルを複製（コピー＆ペースト）して「information.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&copy;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&copy;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をコーディングしていきましょう。

VOL13お知らせページを作成する

この記事のポイント

目次

HTMLファイルを作成する

お知らせページのページ情報を書く

information.html コード例

お知らせページの骨組みを作る

information.html コード例

HTMLを書く

information.html コード例

記事一覧