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

ベースのHTML

基本的なHTMLですが、私はこんな感じをベースにしています。

モバイル用のスライドメニューやパンくずリストをつける場合はもっとコードが増えるのですが、ここでは説明のために省いています。スライドメニューについては別サイトで

サンプルは当サイトです。(実際はfont_family.cssも読み込んでいます)

<!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">
<!-- ファビコンの指定 -->

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

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

</head>
<body>

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

<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>

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

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

次ページ:分割方法の解説