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>これの、langをenから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>© 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>© 2020 xxxxx.com All rights reserved.</div>
</footer>
</div>
</body>
</html>おわりに
ここでは、ページを作る上で必要となる HTML ファイルのひな型を作ってきました。各サイトによって作るものは異なるので、必要なものを加えたり不要なものを削除してください。
これで HTML ファイルができあがりましたが、このままでは表示しても見にくいです。そこで、次のページ では、CSS ファイルを作成してページを見やすくしていきましょう。