WP-LOAD

9/7まで 最大30％OFF 初心者編｜無料コーディング教材｜HTML・CSS・jQueryを実践で学ぶ

HTML雛形の基本｜コピペで使える最小・実務向けテンプレートを初心者向けに解説

HTML雛形をコピペしてWebページを始める記事

HTMLファイルを作ろうとしても、最初の1行から何を書けばよいのか分からないことがありますよね。毎回必要になる基本構造は、雛形として保存しておくとすぐに制作を始められます。

HTMLの最小雛形には、<!doctype html>、html、head、bodyを記述します。日本語ページでは文字コードUTF-8とlang="ja"、スマートフォン表示のためのviewportも入れておきましょう。

この記事では、すぐ使える最小雛形と、CSS・JavaScriptを読み込む実務向け雛形を紹介します。コードの役割、ファイル配置、表示されないときの確認方法まで初心者向けに解説します。

コピペで使えるHTMLの最小雛形

まずは、次のコードをそのまま試してください。テキストエディターでindex.htmlを作り、ファイル全体へ貼り付けて保存します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <p>この文章はHTMLの雛形から表示しています。<br>
    まずは内容を書き換えて、ブラウザで確認しましょう。</p>
</body>
</html>

保存したindex.htmlをブラウザで開くと、次のように見出しと文章が表示されます。ブラウザのタブにはtitleに書いた「はじめてのHTML」が表示されます。

最小構成のHTML雛形から見出しと文章を表示したブラウザ画面

最初はbodyタグ内のh1とpだけを書き換えてみましょう。保存してブラウザを再読み込みすると、変更が表示へ反映されます。

HTML雛形の各行の意味

doctypeで現在のHTML文書と伝える

<!doctype html>

<!doctype html>は、この文書を標準モードでHTMLとして表示するための宣言です。ファイルの先頭に1回だけ記述します。

html要素で文書全体を囲む

<html lang="ja">
  <!-- headとbodyを入れる -->
</html>

html要素は文書全体のルート（最上位）です。lang="ja"は主な言語が日本語であることを伝え、読み上げや翻訳などの手掛かりになります。

headにページの設定を書く

head要素には、ページに直接表示する本文ではなく、文字コード、画面幅、タイトル、CSSなどの情報を記述します。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのHTML</title>
</head>
  • charset="UTF-8"：文字コードをUTF-8にし、日本語の文字化けを防ぎます。
  • viewport：画面幅に合わせてスマートフォンでも正しく表示するための設定です。
  • title：ブラウザのタブや検索結果で使われるページタイトルです。

bodyに画面へ表示する内容を書く

body要素には、見出し、文章、画像、リンク、フォームなど、ページの主な内容を記述します。

<body>
  <h1>ページのタイトル</h1>
  <p>ここに本文を書きます。</p>
</body>

HTMLの字下げはブラウザ表示を変えませんが、要素の入れ子を読みやすくします。子要素は半角スペース2個など、プロジェクト内で同じルールに揃えましょう。

CSSと画像を含むファイル配置

HTMLだけで試したあと、CSSや画像を別ファイルに分けます。次の例では、index.htmlの隣にcssとimagesフォルダを作っています。

index.htmlとcssとimagesフォルダの配置を示す図

この配置では、index.htmlからCSSをcss/style.css、画像をimages/hero.jpgと指定します。パスはHTMLファイルの場所を基準に考えてください。

<!-- head内でCSSを読み込む -->
<link rel="stylesheet" href="css/style.css">

<!-- body内で画像を表示する -->
<img
  src="images/hero.jpg"
  alt="学習机にノートパソコンとノートを置いた様子"
  width="1200"
  height="800"
>

実務向けHTML雛形の完成コード

次は、ヘッダー、ナビゲーション、メインコンテンツ、フッターを含む雛形です。CSSも読み込み、ページの基本レイアウトまで作ります。

ヘッダー、ナビゲーション、メイン、カード、フッターを含むWebページ

index.htmlを次の内容へ変更してください。headerやmainなど、役割を表すHTML要素でページを組み立てています。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTMLとCSSを学ぶ初心者向けサイトです。">
  <title>MY SITE</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="site-header">
    <a class="logo" href="/">MY SITE</a>
    <nav aria-label="メインナビゲーション">
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="#service">サービス</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>学びを、もっと楽しく。</h1>
      <p>HTMLとCSSで、はじめてのWebページを作りましょう。</p>
    </section>

    <section id="service" class="cards" aria-labelledby="service-title">
      <h2 id="service-title" class="visually-hidden">学習内容</h2>
      <article class="card">
        <h3>HTML</h3>
        <p>ページの意味と構造を作ります。</p>
      </article>
      <article class="card">
        <h3>CSS</h3>
        <p>色や余白、配置を整えます。</p>
      </article>
      <article class="card">
        <h3>確認</h3>
        <p>ブラウザで表示を確かめます。</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <small>© 2026 MY SITE</small>
  </footer>
</body>
</html>

次のCSSをcss/style.cssへ記述します。HTML側のクラス名と、CSSの先頭にピリオドを付けたセレクターが対応しています。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #172033;
  font-family: sans-serif;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 34px;
  color: #ffffff;
  background-color: #1d4ed8;
}

.logo,
.site-header a {
  color: inherit;
  text-decoration: none;
}

.logo {
  font-size: 1.25rem;
  font-weight: 800;
}

.site-header ul {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero {
  padding: 54px 44px;
  text-align: center;
  background-color: #eff6ff;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: 2.125rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 36px 34px;
}

.card {
  padding: 22px;
  border: 1px solid #d8e5f5;
  border-radius: 14px;
}

.site-footer {
  padding: 18px 34px;
  color: #cbd5e1;
  background-color: #172033;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

スマートフォン向けCSSを追加する

カード3枚とナビゲーションは、スマートフォンでは横幅が足りません。css/style.cssの末尾へメディアクエリを追加し、狭い画面で縦並びにします。

@media (max-width: 640px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .site-header ul {
    flex-wrap: wrap;
  }

  .hero {
    padding: 42px 24px;
  }

  .cards {
    grid-template-columns: 1fr;
    padding: 28px 20px;
  }
}

JavaScriptを読み込む場合

動きが必要になったら、jsフォルダへscript.jsを作り、head内で読み込みます。deferを付けると、HTMLの解析を妨げず、文書を読み終えたあとに実行されます。

<head>
  <!-- ほかのmetaやtitle -->
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script.js" defer></script>
</head>

JavaScriptを使わないページでは、無理にファイルを作る必要はありません。必要になった段階で追加しましょう。

HTML雛形が表示されないときの確認方法

ファイル名がindex.html.txtになっている

テキストエディターによっては、自動で.txtが付くことがあります。拡張子を表示し、ファイル名が正確にindex.htmlになっているか確認してください。

日本語が文字化けする

meta charset="UTF-8"をheadの先頭付近へ置き、ファイル自体もUTF-8で保存します。宣言と保存形式が一致していることが大切です。

CSSが反映されない

href="css/style.css"と実際のフォルダ・ファイル名を比べます。大文字と小文字、cssフォルダの位置、拡張子の打ち間違いも確認してください。

変更しても表示が変わらない

ファイルを保存してからブラウザを再読み込みします。別の同名ファイルを開いていないか、ブラウザのアドレス欄に表示されるパスも確認しましょう。

雛形を使うときの注意点

  • titleとdescriptionはページごとの内容へ書き換えます。
  • langはページの主な言語に合わせます。
  • 不要なCSSやJavaScriptは読み込みません。
  • 見出し、リンク、画像の代替テキストを実際の内容に合わせます。
  • パソコンとスマートフォンの両方で表示を確認します。

タグの書き方や入れ子の基本を復習したい場合は、次の記事も参考にしてください。

HTMLの基本文法を初心者向けに解説｜タグ・属性・入れ子と基本構造

HTML雛形まとめ

HTMLの雛形は、<!doctype html>、html、head、bodyを基本に作ります。日本語ページではlang="ja"、UTF-8、viewportも最初から入れておきましょう。

まず最小雛形をindex.htmlへ貼り付け、見出しと文章を書き換えて表示を確認してください。そのあとCSS、画像、必要なJavaScriptをフォルダへ分けると、構成を理解しながらWebページを育てられます。