なかけんのミニサイト講座

HTMLのひな型を作ろう

ここでは、ミニサイトのページ作成に使う、HTML ファイルのひな型について見ていきます。ただし、HTML については範囲が広すぎるので、基本的な内容のみを取り上げていくことにします。

目次

ページ全体のレイアウトを作ろう

僕は Visual Studio Code を使っているのですが、「html:5」と入力すると、次のようなテンプレートが表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

これの、langenからjaに変えて、このテンプレートをそのまま使うことにしましょう。

ページのレイアウトを考えよう で見たようなレイアウトを作るには、bodyタグ内は、次のようにしておくといいでしょう。

<div id="container">
  <header></header>
  <nav></nav>
  <div id="content">
    <main></main>
    <aside></aside>
  </div>
  <footer></footer>
</div>

ページ全体を囲ったり、メインとサイドバーを囲っているのは、将来 CSS でデザインするためです。

ヘッダーとナビゲーションを作ろう

ヘッダーとナビゲーションは、全ページ共通です。ここでは、ヘッダーにはサイトタイトルを、ナビゲーションにはカテゴリーページへのリンクを入れることにします。次のようなコードになります。

<header><h1><a href="/">サイトタイトル</a></h1></header>
<nav>
  <ul>
    <li><a href="/category1/">カテゴリー1</a></li>
    <li><a href="/category2/">カテゴリー2</a></li>
    <li><a href="/category3/">カテゴリー3</a></li>
  </ul>
</nav>

なお、リンクはルートパスで指定しています。将来、ミニサイトをサブドメインで公開するなら、この書き方ができます。ミニサイトの URL については、ミニサイトを公開しよう で説明します。

メイン部分を作ろう

メイン部分は、個別ページ、カテゴリーページ、トップページ、それぞれを作るようにしましょう。

個別ページは、ダミーのテキストを入れ、記事内に入りそうな要素を入れておくといいでしょう。例えば次のような感じで作りましょう。まずは、記事を、ヘッダー、メイン、フッターに分け、ヘッダーには記事のタイトルを表示するようにします。

<main>
  <header><h1>ページタイトル</h1></header>
  (本文など)
  <footer></footer>
</main>

「本文など」と書いたところには、リード文、目次、見出し、本文のサンプルを入れてみます。

<div id="content-body">
  <p>リード文</p>
  <div id="toc">
    <p id="toc-title">目次</p>
    <ul id="toc-list">
      <li><a href="#id-1">見出し1</a></li>
      <li><a href="#id-2">見出し2</a></li>
      <li><a href="#id-3">見出し3</a></li>
    </ul>
  </div>
  <h2 id="id-1">見出し1</h2>
  <p>本文・本文・本文</p>
  <h2 id="id-2">見出し2</h2>
  <p>本文・本文・本文</p>
  <h2 id="id-3">見出し3</h2>
  <p>本文・本文・本文</p>
</div>

本文中に他の要素も入れたい場合は、合わせて入れておきましょう。例えば、テーブルや画像も本文で使うなら、そのサンプルも入れておくといいでしょう。

footerタグには、シェアボタンや前後への記事へのリンクを載せるようにします。

<footer>
  <div class="share">
    <ul>
      <li><a href="">ツイッター</a></li>
      <li><a href="">フェイスブック</a></li>
      <li><a href="">はてなブックマーク</a></li>
    </ul>
  </div>
  <nav>
    <ul>
      <li id="prev-page"><a href="/prev/">前のページ</a></li>
      <li id="next-page"><a href="/next/">次のページ</a></li>
    </ul>
  </nav>
</footer>

これで、個別記事の内容が完成です。これをベースにして、残りのテンプレートも作ってみます。カテゴリーページは、カテゴリーの説明と、各個別記事へのリンクを張ればいいでしょう。

<main>
  <header><h1>カテゴリータイトル</h1></header>
  <p>カテゴリー説明文</p>
  <ul>
    <li><a href="#">個別記事</a></li>
    <li><a href="#">個別記事</a></li>
    <li><a href="#">個別記事</a></li>
    <li><a href="#">個別記事</a></li>
    <li><a href="#">個別記事</a></li>
  </ul>
</main>

トップページは、いろんな作り方があると思いますが、シンプルにするなら次のようになるでしょう。

<main>
  <header><h1>見出し</h1></header>
  <p>サイトの紹介文</p>
  <ul>
    <li><a href="#">カテゴリーページ</a></li>
    <li><a href="#">カテゴリーページ</a></li>
    <li><a href="#">カテゴリーページ</a></li>
  </ul>
</main>

サイドバーを作ろう

サイドバーは、WordPress のようにウィジェットを追加していくと考えて、次のように作ることにします。

<aside>
  <div class="widget">
    <div class="widget-title">このサイトについて</div>
    <div class="widget-body">サイトの紹介文</div>
  </div>
  <div class="widget">
    <div class="widget-title">プロフィール</div>
    <div class="widget-body">自己紹介文</div>
  </div>
  <div class="widget">
    <div class="widget-title">記事の一覧</div>
    <div class="widget-body">
      <ul>
        <li><a href="#">個別記事</a></li>
        <li><a href="#">個別記事</a></li>
        <li><a href="#">個別記事</a></li>
      </ul>
    </div>
  </div>
  <div class="widget">
    <div class="widget-body">
      <ul>
        <li><a href="#">お問い合わせ</a></li>
        <li><a href="#">リンク集</a></li>
      </ul>
    </div>
  </div>
</aside>

こうしておくと、ウィジェット全体で同じデザインを適用することが簡単になり、統一感のある見た目にすることができます。個別で何か設定したい場合は、ウィジェットに ID を付与すればいいでしょう。

フッターを作ろう

最後にフッターを作りましょう。といっても、入れるものはほとんどありません。次のような形でいいでしょう。

<footer>
  <div><a href="/">サイトタイトル</a></div>
  <div>&copy; 2020 example.com All rights reserved.</div>
</footer>

サイドバーの内容をフッターに入れるなら、ここに移動させましょう。ただ、PCで表示する際、フッターを2段や3段にしたい場合は、先ほどのwidgetクラスをさらにdivタグでくくる必要が出てくるかもしれません。

全体像

長かったですがこれでおしまいです。個別ページに適用する HTML ファイルのテンプレートの全体は次のようになります。今までの内容をまとめているだけです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container">
    <header><h1><a href="/">サイトタイトル</a></h1></header>
    <nav>
      <ul>
        <li><a href="/category1/">カテゴリー1</a></li>
        <li><a href="/category2/">カテゴリー2</a></li>
        <li><a href="/category3/">カテゴリー3</a></li>
      </ul>
    </nav>
    <div id="content">
      <main>
        <header><h1>ページタイトル</h1></header>
        
        <p>リード文</p>
        <div id="toc">
          <p id="toc-title">目次</p>
          <ul id="toc-list">
            <li><a href="#id-1">見出し1</a></li>
            <li><a href="#id-2">見出し2</a></li>
            <li><a href="#id-3">見出し3</a></li>
          </ul>
        </div>
        <h2 id="id-1">見出し1</h2>
        <p>本文・本文・本文</p>
        <h2 id="id-2">見出し2</h2>
        <p>本文・本文・本文</p>
        <h2 id="id-3">見出し3</h2>
        <p>本文・本文・本文</p>

        <footer>
          <div class="share">
            <ul>
              <li><a href="">ツイッター</a></li>
              <li><a href="">フェイスブック</a></li>
              <li><a href="">はてなブックマーク</a></li>
            </ul>
          </div>
          <nav>
            <ul>
              <li id="prev-page"><a href="/prev/">前のページ</a></li>
              <li id="next-page"><a href="/next/">次のページ</a></li>
            </ul>
          </nav>
        </footer>
      </main>
      <aside>
        <div class="widget">
          <div class="widget-title">このサイトについて</div>
          <div class="widget-body">サイトの紹介文</div>
        </div>
        <div class="widget">
          <div class="widget-title">プロフィール</div>
          <div class="widget-body">自己紹介文</div>
        </div>
        <div class="widget">
          <div class="widget-title">記事の一覧</div>
          <div class="widget-body">
            <ul>
              <li><a href="#">個別記事</a></li>
              <li><a href="#">個別記事</a></li>
              <li><a href="#">個別記事</a></li>
            </ul>
          </div>
        </div>
        <div class="widget">
          <div class="widget-body">
            <ul>
              <li><a href="#">お問い合わせ</a></li>
              <li><a href="#">リンク集</a></li>
            </ul>
          </div>
        </div>
      </aside>
    </div>
    <footer>
      <div><a href="/">サイトタイトル</a></div>
      <div>&copy; 2020 xxxxx.com All rights reserved.</div>
    </footer>
  </div>
</body>
</html>

おわりに

ここでは、ページを作る上で必要となる HTML ファイルのひな型を作ってきました。各サイトによって作るものは異なるので、必要なものを加えたり不要なものを削除してください。

これで HTML ファイルができあがりましたが、このままでは表示しても見にくいです。そこで、次のページ では、CSS ファイルを作成してページを見やすくしていきましょう。