HTMLスターターテンプレート（normalize.css CDN利用）

normalize.css と python.css の両方は必要か？

✅必要です

normalize.css の目的 各ブラウザのデフォルトCSSの違いを打ち消す（リセット）ためのスタイルです。 ブラウザごとに微妙に異なるデフォルトの余白・フォント・表示方式などを揃えて、同じ土台から始められるようにするものです。 (ブラウザ間差異の初期化)

python.css は、 サイト独自の見た目とレイアウト

このページの構成

         <!DOCTYPE html>
         <html lang="ja">
         <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">

         <title>サイトタイトル</title>

         <!-- normalize.css v8.0.1 CDN -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

         <!-- 独自スタイルシート（必要なら追加） -->
         <link rel="stylesheet" href="style.css">

         </head>
         <body>

         <header>
         <h1>サイトの見出し</h1>
         </header>

         <main>
         <section>
            <h2>セクションタイトル</h2>
            <p>ここに本文が入ります。</p>
         </section>
         <section>
            <pre>
               
            </pre>
         </section>
         </main>

         <footer>
         <p>© 2025 Canape</p>
         </footer>

         </body>
         </html>

参考リンク

✅ おすすめの1行（どちらか片方に）

✅ normalize.css（安定派向け）歴史が長く、安定した対応

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

✅ sanitize.css（モダン志向）

<link rel="stylesheet" href="https://unpkg.com/sanitize.css">

必要に応じて以下も併用可能

 - 目的	-

推奨する読み込み最小限の差異吸収でOK sanitize.css のみ

                          <link href="https://unpkg.com/sanitize.css" rel="stylesheet"> 

フォームの見た目も整えたい sanitize.css + forms.css

                          <link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet">

見出し・段落なども整えたい  sanitize.css + typography.css

                          <link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet">

上位互換・進化版の理由：sanitize.css が優れている点

比較項目 sanitize.css normalize.css
🧼 HTML5対応 ✅ 最新要素にも対応
(article, main, detailsなど)		 △ 最低限
🖋 フォーム入力UIの整え方 ✅ モダンブラウザ対応 △ 限定的
📐 box-sizing の統一など ✅ デフォルトを border-box に統一できる設計 ❌ 設定しない
🎨 アクセシビリティ配慮（色、サイズ） ✅ 現代のUXに準拠 ❌ 古い設計思想が残る
📱 モバイル表示対策 ✅ viewportやリサイズの挙動を補正 △ 補正は少なめ
🚀 モダンなCSS設計思想 ✅ Yes △ Yesだが古い

理想的な順序（上に行くほど先に読み込む

 
            <!-- 1. CSSリセット・サニタイズ（Sanitize.css） -->
            <link rel="stylesheet" href="https://unpkg.com/sanitize.css">

            <!-- 2. CSSフレームワーク（使う場合。例：Bootstrapなど） -->
            <!-- <link rel="stylesheet" href="bootstrap.min.css"> -->

            <!-- 3. ベーススタイル（自作の共通スタイル） -->
            <link rel="stylesheet" href="style.css">

            <!-- 4. ページ固有スタイル（必要なら） -->
            <link rel="stylesheet" href="custom-page.css">