HTML手打ちサイト更新簡略化計画

分割方法

ファイルを5つに分け、サイト全体で共通の4つをincludesディレクトリに。残った部分はメインコンテンツ用ひながた(複製して使う)です。

サイト folder
├─css folder
├─images folder
├─includes folder
│ ├─head.php
│ ├─header.php
│ ├─nav.php
│ └─footer.php

├─index.php
└─ひながた.php(メインコンテンツ部分)

各パーツ

head.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<!-- レスポンシブのためのタグ -->

<link rel="stylesheet" href="css/minimal_reset.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- 最初にリセットCSSを、次に自作のCSSを。 -->
<link rel="icon" href="icon.ico">
<!-- ファビコンの指定 -->

HTMLファイルの冒頭からファビコン指定部分まで。
<head>~</head>内のタグは、<meta charset="utf-8" />をはじめに書くこと以外は順番に決まりはありません。ページごとに変える必要がないものを上部に書いて、それらをまとめてhead.phpとします。

皆が手打ちでホームページを作っていた頃とは書き方が変わりました。以前よりシンプルで、便利になっています。冒頭は<!DOCTYPE html>だけですみますし、シフトJISではなくutf-8にすることで文字化けもなくなります。

スマホに対応させるために<meta name="viewport" ~を追加します。
user-scalable=yesの部分はユーザーが指で画面を拡大することを許可しています。

header.php

<header>
<h1><a href="index.php">サイトタイトル</a></h1>
</header>

サイトのタイトルが表示されるヘッダー部分。ここもページごとに変化するわけではないのですが、位置的にheadに含められないのでやむなく分割といったところ。

nav.php

<nav role="navigation">
    <ul>
        <li>
          <a href="#">メニュー1</a>
          <ul>
              <li><a href="#">1サブメニュー1</a></li>
              <li><a href="#">1サブメニュー2</a></li>
              <li><a href="#">1サブメニュー3</a></li>
          </ul>
        </li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
    </ul>
</nav>

各ページへのリンクを書くナビゲーション(メニュー)部分。更新する=ページを増やすことで、メニューは頻繁に変更されますね。切り分けておいて一番助かるのはここだと思います。
ところで、メニューをわざわざリストで書くのは面倒ですよね。あとでCSSで横並びにするならリストにする意味なくね?って言いたくなりますが、アクセシビリティ的に意味があるのだそうです。

スクリーンリーダーやその他の支援技術を使用するユーザーにとって、リストでのメニュー表現はナビゲーションを容易にします。(ChatGPTの回答)

footer.php

<footer>
<p>&copy;2023 サイトタイトル / <a href="#">連絡先</a></p>
</footer>
</body>
</html>

ページ下部。フッター部分。

ひながた.php(メインコンテンツ)

<title>ページタイトル:サイトタイトル</title>
<meta name="description" content="説明文" />

<meta name="robots" content="noindex,nofollow" /><!-- 検索避け・不要なら消す -->

</head>
<body>

<main>
メインコンテンツ部分
</main>

ページごとに変化するものをメインコンテンツ部分としてまとめます。<head>~</head>内のタグのうち、ページごとに変える必要があるもの(ページタイトル、説明文)を下部に配置して</head>で閉じ、<body>開始タグまでを含めました。そのあとにメインコンテンツ部分が続きます。
検索避けタグは不要なら削除します。

メインコンテンツ部分にパーツを読み込むコードを書く

そしてこのメインコンテンツに、他の4つのファイルを読み込むコードを書きます。

<?php include 'includes/head.php'; ?>

<title>ページタイトル:サイトタイトル</title>
<meta name="description" content="説明文" />

<meta name="robots" content="noindex,nofollow" /><!-- 検索避け・不要なら消す -->

</head>
<body>

<?php include 'includes/header.php'; ?>
<?php include 'includes/nav.php'; ?>

<main>
メインコンテンツ部分
</main>

<?php include 'includes/footer.php'; ?>

<?php include ''; ?>というタグでphpファイルを読み込めます。このひながたファイルを複製して任意のファイル名(例:index.php)に変更し、PHPのある環境で、ブラウザからこのファイルにアクセスすると、4つのファイルが読み込まれた1ファイルとして表示されます。

次ページ:PHPのある環境を用意するには