HTMLテンプレート入門｜書き方や構造を基礎から解説

Miyuki Shimose
11月26日
読了時間: 11分

更新日：7 日前

まずはじめに：ホームページを作成 →｜HTML テンプレート →

HTMLテンプレートの書き方が学べる！Wix のコードエディタ画面とレコードストアのデザイン

ホームページの仕組みを理解したい、作ったホームページをもう少し自由にカスタマイズしたいと思ったことはありませんか。実は、その第一歩として HTML の知識がとても役立ちます。HTML を知ることで、ホームページ作成の裏側が見えるようになり、エラーが出たときの対応や、制作会社とのやり取りもスムーズになります。

そこでこの記事では、まずホームページ作成の土台となる HTML の基本を解説します。そして、学んだ知識を活かしつつ、もっと効率的にビジネスを成長させるための Web サイトの作り方として、Wix のようなノーコードホームページツールについても紹介します。

この記事の概要

HTML の基礎知識
Web ページを構成する HTML の役割と基本構造について説明します。
コピーして使える HTML テンプレート（雛形）
すぐに実践できる HTML のサンプルコード事例を紹介します。
効率的なサイト構築手法
HTML の知識を活かしながら Wix で生産性を高める方法を解説します。
ノーコード制作におすすめの HTML テンプレート
コーディング不要でカスタマイズできるテンプレートをご紹介します。

HTML は Web の仕組みを理解する上で重要ですが、必ずしも自分で全て書く必要はありません。Wix のようなノーコードツールは、この記事で学ぶ HTML の構造を自動で生成してくれるため、あなたは本来の目的であるビジネスの成長に集中できます。

HTML テンプレートとは？

HTML の基礎構造と書き方（雛形テンプレート）

HTML テンプレートのデザインカスタム方法(CSS)

CSS ファイルと HTML の紐づけ方法

HTML テンプレートでホームページ作成を効率化する方法

おすすめ無料 HTML テンプレート

よくある質問

まとめ

＼サイト制作から、集客・予約・決済・顧客管理まで。／

今すぐ無料アカウント登録

▶︎ 便利な無料ビジネスツールの詳細はこちら

HTML テンプレートとは？

HTML テンプレートとは、ホームページの基本的な構造（骨組み）があらかじめ書かれている雛形ファイルのことです。コピーして、HTML エディタにペーストするだけで、ホームページの形をすぐに作ることができます。

もっと詳しく▶︎ おすすめの Web デザインテンプレート 30 選をまとめたブログ記事もぜひチェックしてみてください。

HTML の基礎構造と書き方（雛形テンプレート）

HTML は < > で囲まれた「タグ」を使い、文章の役割を指定することでページの構造を作ります。例えば <h1> は大見出し、<p> は段落を意味します。

この基本ルールさえ覚えれば、テンプレートのどこを書き換えればよいかが見えてきます。

以下は、最もシンプルな HTML の雛形です。この構造が全てのページの基本となります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ページのタイトル</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ここにサイトの簡潔な説明（約50〜100 文字）を入れる。">
</head>
 <!-- main -->
<body>
  <main id="main">
      <h1>見出しです</h1>
      <p>ここに本文が入ります</p>
  </main>
 <!-- footer -->
    <footer role="contentinfo">
    </footer>
</body>
</html>

このテンプレートを HTML エディタに貼り付けてみましょう。

このコードはレスポンシブデザインに対応しており、CSS でデバイスごとにスタイルを指定すれば、表示を最適化できます。それでは、各要素がどのような意味を持つのかを解説します。

1. HTML の書き出し

<!DOCTYPE html>

このファイルが HTML 文書であることを宣言します。HTML5 以降、このシンプルな記述が標準となりました。HTML はこれまでに 4 回の改訂を経ており、HTML4 から HTML5 への進化は特に大きなものでした。古いサイトでは、現在主流の HTML5 以前のバージョンで書かれている場合もあります。

2. HTML タグ

<html lang="ja">
</html>

全ての要素を囲む、最も大きな枠組みです。このタグは、その中身が HTML 文書であることを示します。「lang=”ja”」で日本語であることを示します。

また、<html> タグには必ず終了タグ </html> が必要です。終了タグは開始タグの前にスラッシュ / を付けて記述します。<html> と </html> の間に記述された内容が、ブラウザ上で表示されます。

3. head 要素

<head>
</head>

head 要素は、HTML 文書の設定を記述する場所です。そのため、head 内に記述された内容は、Web ページ上には表示されません。

head 要素では、Webページの概要、文字コード、キーワードといったメタデータを定義し、検索エンジンやブラウザに伝えます。

その他にも、文書のタイトルを指定したり、外部ファイルを読み込んだり、CSSコードを直接記述したりすることも可能です。

上記のテンプレートでは、一般的に使われるメタデータをいくつか記述しています。

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

サイトのタイトルは、タイトルタグで指定します。このテキストは、ブラウザのタグに表示されます。

<meta charset="UTF-8">

「charset」は文字のエンコード、つまり文字の表示方法指定します。通常は「utf-8」が使われるため、このまま記述しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

レスポンシブ対応させるための vewport 設定です。「width=device-width」でデバイスの画面幅（物理幅ではなく CSS ピクセル幅）にページ幅を合わせます。そして、「initial-scale=1.0」で初期表示のズーム倍率を 1（等倍）に設定しています。

 <meta name="description" content="サイトの簡潔な説明（約50〜100 文字）">

メタディスクリプションとは、検索結果でサイト名や記事名の下に表示されるサイト概要です。ここには SEO キーワードを含めた、サイトの説明を追加します。

4. body 要素

<body>
</body>

<body> は、ブラウザに表示されるすべてのコンテンツ（テキスト、画像、リンク、構造など）を書くための領域です。

タグを使ってコンテンツの種類を指定したり、設定やリンクを追加したりします。ここではその一例を紹介します。

タグ	役割
<header>	サイトまたはページのヘッダー（ロゴ・ナビ）
<nav>	ナビゲーション
<main>	ページの主要コンテンツ（1つだけ）
<section>	トピックごとの区切り
<article>	独立した内容（ブログ記事など）
<h1>〜<h6>	見出し
<p>	段落
<span>	意味のないインライン要素（スタイル用）
<aside>	補足情報、サイドバー
<footer>	末尾（コピーライト等）

他にもさまざまなタグがあるので、ChatGPT やオンライン検索を活用してみてください。

HTML テンプレートのデザインカスタム方法(CSS)

HTML だけでは、文字の色・背景・レイアウトなどの「見た目」を変えることはできません。ウェブページのデザインを整えるためには CSS（Cascading Style Sheets）を利用します。

CSS を使うことで、同じ HTML 構造でも以下のようにデザインを自由に変更できます。

文字の色やフォントサイズ
背景色や背景画像
余白や行間
レイアウトや配置
PC・スマホそれぞれに最適化したレスポンシブ対応

CSS ファイルと HTML の紐づけ方法

CSS は通常、別ファイル（例：style.css）として作成し、HTML の <head> 内に次のように読み込ませます。

<link rel="stylesheet" href="style.css">

これにより、HTML 内のタグに対して CSS のデザインが適用されます。

例えば、段落テキストを装飾する CSS を追加します。以下のように CSS を書くと .paragraph クラスが付いた要素の見た目を変更できます。

.paragraph {
    font-family: madefor-text, sans-serif;
    font-size: 30px;
    line-height: 110%;
    color: #000000;
}

HTML 側では、次のようにクラスを指定すると適用されます。

<p class="paragraph">ここにテキストが入ります。</p>

HTML テンプレートでホームページ作成を効率化する方法

ビジネスを本格的に成長させるホームページを作成するには、HTML を手作業で作成するには限界があります。スマートフォン表示対応、お問い合わせフォーム、予約機能、決済システム、SEO 対策、表示速度の改善など、ホームページに実装するべき機能は山積みです。

1 ページずつ HTML を手直しする方法は、ビジネスの成長スピードを考えると非効率かもしれません。そこでおすすめなのが、HTML テンプレートや、ノーコードツールを使ってホームページを作成する方法です。

HTML の知識と Wix のようなツールを組み合わせることで、あなたのビジネスを次のステージへと進めることができます。

ステップ 1　テンプレートを選ぶ

Wix なら飲食店、美容室、士業など、800 以上の無料 HTML テンプレートから選ぶだけで、あなたの業種に最適化されたホームページが作成できます。ビジネスの目的に合ったデザインを見つけましょう。

もっと詳しく ▶︎ HTML テンプレートを配布しているサイトのおすすめはこちらの記事で紹介しています。

ステップ 2　ドラッグ＆ドロップで編集

テキストや画像を、好きな場所にドラッグ＆ドロップするだけで編集できます。HTML のタグを意識する必要はありません。

ステップ 3　HTML コードを追加する

特定の場所に独自の機能やデザインを追加したい場合、Wix の「HTML 埋め込み」機能を使ってカスタムコードを埋め込むことができます。HTML の技術を活かせます。また、さらに高度な利用方法として「カスタム要素」の追加も可能です。Wix エディタのパーツや機能を、HTML を学ぶことでさらに拡張できます。

ステップ 4　公開ボタンをクリック

編集が終わったら、公開ボタンを押すだけです。Wix なら今日始めて、今日公開。スピード感のあるホームページ作成でビジネス機会を逃しません。

よくある質問

HTML の知識がなくてもホームページは作れますか？

問題ありません。この記事で紹介した雛形をコピーして、テキストを書き換えることから始められます。Wix のようなツールを使えば、HTML を一切書かなくてもホームページは作成できます。

無料テンプレートを使う上での注意点はありますか？

テンプレートによっては、著作権表示の削除が禁止されている場合があります。利用規約をよく確認しましょう。また、サポートがない場合がほとんどなので、トラブルは自力で解決する必要があります。

SEO 対策はできますか？

基本的な SEO 対策は可能です。<title> タグや <h1> タグを適切に設定することが重要です。ただし、本格的な SEO 対策には専門知識が必要です。Wix を利用すると、SEO 自動チェック＆改善提案といった機能で、サイト作りをしっかりサポートします。

HTML テンプレートを使えば、どんなホームページでも作れますか？

簡単な紹介ページやブログは作れます。しかし、ネットショップや予約システムのような複雑な機能を持つサイトを作るのは非常に困難です。そうした場合は、初めから機能が組み込まれている Wix のようなプラットフォームが適しています。

スマホ対応はできますか？

スマホ対応させるには、CSS で実装する必要があります。これは初心者には少し難しい作業です。Wix のテンプレートは全て自動でスマホ表示に最適化されるため、特別な作業は不要です。

まとめ

この記事では、HTML テンプレートの基本的な書き方から、ホームページ作成のメリット・デメリットまでを解説しました。HTML の仕組みを理解することは、あなたの Web スキルを一段階引き上げてくれます。

HTML テンプレートは、ホームページ作成の時間短縮に役立つ
基本的なタグを覚えれば、簡単なカスタマイズは自分でできる
複雑な機能や本格的なビジネスサイトには、Wix のようなツールが効率的

HTML の仕組みを知った今だからこそ、ノーコードでそれを実現してくれる Wix を一度触ってみると、「裏でこんなことを自動でやってくれていたんだ」と深く実感できるはずです。あなたのビジネスを「手作業の Web」から「育てていける Web サイト」に変える入り口として、Wix でのサイト作成を始めてみませんか。

＼本格的なホームページ作成を Wix で実現／

今すぐ無料アカウント登録

▶︎ Wix の機能でできること

関連記事

この記事を書いた人

下瀬美幸（Miyuki Shimose）

Wix 公式ブログ編集者／SEO エキスパート