「ホームページを自分で作ってみたいけど、何から始めればいいか分からない」って不安になりますよね。
パソコンは使えるけど、コードや専門用語が出てくるとむずかしく感じてしまう人も多いと思います。
この記事では、HTMLを使ったホームページの作り方と基本テンプレートについてわかりやすく解説します。
パソコンが苦手な人や、これからはじめてホームページ作りにチャレンジする人にもピッタリの内容になっています。
HTMLのしくみやタグの使い方がわかれば、自分だけのホームページをつくれるようになりますので、ぜひ最後まで読んで参考にしてください。
HTMLホームページの基本とは？初心者が知っておくべき基礎知識
HTMLとは何か？ホームページに必要な理由
HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、ホームページを作るための基本的な言語です。
パソコンやスマホで見えるホームページの内容は、ほとんどがHTMLで作られています。
HTMLを使うことで、文章や画像、リンクなどをページに表示できます。
ホームページにHTMLが必要な理由をわかりやすくまとめると、次の通りです。
- 文字や見出しなどをページに表示できる
- 画像や動画をページに入れられる
- リンクをつけて他のページへ移動できる
- フォームを使って問い合わせができる
- 検索エンジンがページの内容を理解しやすくなる
このように、HTMLはホームページの「骨組み」を作るとても大切な言語です。
HTMLを知らないと、何も始まらないと言ってもいいでしょう。
HTMLとCSSの違いと役割
HTMLと一緒によく使われる言葉に「CSS（シーエスエス）」があります。
どちらもホームページを作るのに必要ですが、役割がちがいます。
HTMLは「何を表示するか」を決めて、CSSは「どんな見た目にするか」を決めます。
まず、HTMLとCSSの違いをまとめてみましょう。
- HTMLはホームページの内容を決める
- CSSはその内容の見た目（色、文字サイズなど）を変える
- HTMLが土台、CSSがデザインと考えるとわかりやすい
たとえば、HTMLで見出しを作ったら、それを赤くしたり大きくしたりするのはCSSの役目です。
HTMLだけでは白黒のシンプルなページですが、CSSを使えばカラフルで見やすいページにできます。
ホームページ作成に必要な準備とツール
ホームページを作るためには、いくつかの準備とツールが必要です。
でも、難しい道具はほとんどいりません。
基本的な準備は以下の通りです。
- パソコン（WindowsかMacどちらでもOK）
- テキストエディタ（メモ帳、VSCodeなど）
- Webブラウザ（ChromeやSafariなど）
- インターネット環境
- 画像や文章などのコンテンツ
これだけあれば、すぐにHTMLを書き始めることができます。
特別なソフトを買う必要はありませんので、誰でも手軽に始められます。
ファイル構成と拡張子の基本ルール
HTMLファイルを作るときには、名前の付け方や保存場所も大切です。
正しく作らないと、うまく表示されません。
ファイル構成や拡張子についてのポイントを紹介します。
- HTMLファイルは.htmlで終わる名前にする（例：index.html）
- 画像やCSSは同じフォルダにまとめて入れる
- ファイル名は英数字と「-」「_」だけにする
- 大文字と小文字は区別されるので注意する
- リンク先のパスは正しく書く必要がある
正しい構成で作ると、パソコンだけでなく他の人のスマホやタブレットでも正しく見えるようになります。
Webサイトとホームページの違い
「ホームページ」と「Webサイト」は、よく似た言葉ですが意味が少しちがいます。
とくに初心者の人は、どちらも同じ意味だと思いがちですが、実は違いがあります。
ここで、違いをわかりやすく説明します。
- ホームページ：最初に表示されるトップのページ
- Webサイト：ホームページを含めたすべてのページの集まり
- 例えるなら、ホームページは「お店の入り口」、Webサイトは「お店全体」
このように考えると、ホームページはWebサイトの一部だということがわかります。
正しい使い分けができると、プロっぽくなりますよ。
HTML5の特徴と使用するメリット
HTMLにはいくつかのバージョンがありますが、今使われているのは「HTML5」です。
HTML5は新しくて便利な機能がたくさんあり、今のホームページ作りには欠かせません。
HTML5の特徴とメリットは次のとおりです。
- スマホやタブレットにも対応しやすい
- 動画や音声を簡単に埋め込める
- 意味のあるタグ（header、footerなど）が使える
- SEOにも効果がある構造を作りやすい
- CSSやJavaScriptとの相性が良い
HTML5を使うことで、今どきのホームページが作れるようになります。
これから始める人は、HTML5から覚えるのが正解です。
レスポンシブデザインとの関係性
レスポンシブデザインとは、スマホやパソコン、タブレットなど、画面の大きさに合わせてホームページの表示を変える仕組みのことです。
今はスマホで見る人が多いので、レスポンシブはとても大切です。
HTMLは、レスポンシブデザインとどう関わっているのかを説明します。
- HTMLの構造をきれいに書くとレスポンシブがうまくいく
<meta name="viewport" content="width=device-width, initial-scale=1.0">が必要- 画像や動画は幅をパーセント指定にする
- CSSと組み合わせて表示を調整する
- 見やすさと使いやすさがアップする
つまり、レスポンシブデザインはHTMLの作り方にも関係が深いということです。
スマホ対応をしたいなら、最初から意識して作りましょう。
HTMLホームページの作り方をステップ別に解説
HTMLファイルの作成と保存方法
HTMLホームページを作るには、まず最初にHTMLファイルを作らないと始まりません。
HTMLファイルは「テキストファイル」なので、特別なソフトは不要です。
パソコンに入っているメモ帳や、無料で使える「VSCode」などのテキストエディタを使えばOKです。
HTMLファイルを作って保存する手順は次の通りです。
- テキストエディタを開く
- HTMLのコードを書く
- 「名前を付けて保存」を選ぶ
- ファイル名を index.html にする
- 文字コードを「UTF-8」にする
- 拡張子を「.html」で保存する
このようにすれば、正しくHTMLファイルが作れます。
保存したファイルをブラウザで開くと、自分のホームページが見られるようになります。
基本的なHTMLタグの使い方
HTMLには「タグ」と呼ばれる特別な記号があります。
タグを使って、見出しや文章、画像などを表示できます。
タグは <タグ名>内容</タグ名> の形で書きます。
これを「開始タグ」と「終了タグ」と呼びます。
よく使う基本的なタグを紹介します。
<h1>〜<h6>：見出しを作る<p>：段落を作る<a>：リンクをつける<img>：画像を表示する<br>：改行する<div>：区切りやグループを作る
このようなタグを組み合わせると、ホームページらしい見た目になります。
タグを正しく使うことがHTMLの基本ですので、しっかり覚えておきましょう。
ヘッダー・本文・フッターの構成を理解する
ホームページには「ヘッダー」「本文」「フッター」の3つの部分があります。
これを意識して作ることで、読みやすくて整理されたページになります。
HTMLでは、それぞれに意味のあるタグを使います。
ホームページの構成は、次のように考えるとわかりやすいです。
<header>：サイトの名前やメニューを入れる<main>：一番伝えたい内容を書く<footer>：著作権や連絡先を入れる
このような構成で作ると、検索エンジンにもわかりやすく、SEOにも強くなります。
正しいタグを使って、しっかりと構造を意識しましょう。
リンクの挿入方法と外部ページへの接続
HTMLでは、他のページへ移動できるリンクを簡単に作ることができます。
リンクは、<a>タグを使って書きます。
ホームページではリンクをうまく使うことで、ユーザーがいろいろな情報へすぐにアクセスできるようになります。
リンクの作り方にはいくつか種類があります。
<a href="ページのURL">リンク文字</a>：外部ページにリンクする<a href="about.html">このサイト内のページへ</a>：内部リンク<a href="#top">ページ内ジャンプ</a>：同じページ内の場所に移動<a href="mailto:xxx@example.com">メールリンク</a>：メールを送れるようにする
リンクをうまく使えば、ページの便利さがぐんとアップします。
クリックしたときにちゃんと動くかも、必ずチェックしましょう。
画像の挿入方法とサイズ調整
ホームページに画像を入れると、文章だけのページよりずっとわかりやすく、楽しくなります。
画像を表示するには、<img>タグを使います。
このタグは閉じタグがいらないのが特徴です。
画像を入れるときに大事なポイントをまとめました。
<img src="画像のURL" alt="説明">で画像を表示alt属性は画像の説明を書くwidthやheightでサイズを調整- 画像ファイルはHTMLと同じフォルダに保存する
- ファイル名は英数字で書く
画像はただ表示するだけでなく、どこでどう使うかも考えて配置するのがコツです。
画面サイズに合わせて調整できるように、CSSと組み合わせることも大切です。
リストや表の作成方法
情報を整理して見せたいときに便利なのが「リスト」や「表（テーブル）」です。
リストは箇条書き、表はデータを並べて見せるときに使います。
リストと表の作り方の基本は次の通りです。
<ul><li>内容</li></ul>：順番なしのリスト<ol><li>内容</li></ol>：順番ありのリスト<table><tr><td>内容</td></tr></table>：表の基本<th>：表の見出しセル<caption>：表のタイトルをつける
リストや表を使えば、情報をスッキリとわかりやすく見せることができます。
読み手にやさしいページ作りを心がけましょう。
コメントの書き方と使いどころ
HTMLのコードの中にメモを入れたいときは「コメント」を使います。
コメントは、ブラウザには表示されないけれど、あとで見直すときにとても役に立ちます。
コメントの書き方とポイントは以下の通りです。
<!-- ここにコメントを書く -->：基本の書き方- コードの区切りや説明を入れるのに使う
- 間違いやすい部分をメモしておくと便利
- ページには影響しないので安心
- 書きすぎず、簡単な言葉で書く
コメントを使うことで、自分だけでなく他の人も理解しやすいコードになります。
習慣にしておくと、あとで見直すときにとても役立ちます。
初心者でも使えるHTMLホームページの基本テンプレート
シンプルな1カラム構成のテンプレート
初心者におすすめなのが、1カラム構成のテンプレートです。
1カラムとは、ページの中央にすべての内容が縦に並ぶレイアウトのことです。
見た目がすっきりしていて、作るのもとても簡単です。
1カラムテンプレートの特徴をまとめると以下のようになります。
- 画面の中央に1列でコンテンツが並ぶ
- スマホでも表示が崩れにくい
- ナビゲーションがシンプル
- コードが短くてわかりやすい
- 初心者がレイアウトの勉強をするのに最適
例えば、基本的な構成は次のようなHTMLになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>1カラムページ</title>
</head>
<body>
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</body>
</html>
このように、1カラム構成はHTMLを始めたばかりの人にぴったりです。
見出し・段落・リンク付きの基本構造
ホームページでは、見出しや段落、リンクを正しく使うことがとても大切です。
これらを組み合わせて「読みやすくて使いやすい」ページになります。
基本の構造を覚えると、いろんなページが作れるようになります。
まず、見出し・段落・リンクのHTMLの書き方は以下のとおりです。
<h1>〜<h6>：見出し<p>：段落（文章のまとまり）<a href="URL">リンク文字</a>：リンク
例えば、次のように書くとホームページらしくなります。
<h1>ようこそ！わたしのページへ</h1>
<p>ここではHTMLの基本を紹介しています。
</p>
<a href=”about.html”>詳しくはこちら</a>
このような構成を使えば、見る人にとって読みやすいページになります。
画像とテキストを組み合わせたレイアウト
画像と文字（テキスト）を一緒に表示することで、ホームページがもっと魅力的になります。
ただ画像を貼るだけではなく、説明のテキストを加えるとわかりやすくなります。
画像とテキストを並べて表示するポイントは次の通りです。
<img>タグで画像を表示するalt属性を使って画像の説明を書く- 画像の横にテキストを表示したいときは
<div>や<span>で囲む - 横並びにするにはCSSの
display: flex;を使う - 小さい画像は
widthで調整する
たとえば、画像の横に説明を書くコードは次のようになります。
<div style="display: flex;">
<img src="image.jpg" alt="HTMLロゴ" width="100">
<p>これはHTMLのロゴです。
初心者でもすぐに使えます。
</p>
</div>
このように、画像とテキストを組み合わせるだけでページの印象が変わります。
フォームを含むコンタクトページのテンプレート
ホームページにお問い合わせフォームを入れると、見た人から連絡をもらえるようになります。
HTMLでは、<form>タグを使って簡単にフォームを作れます。
基本的なコンタクトフォームの要素を紹介します。
<input type="text">：名前やタイトルの入力<input type="email">：メールアドレス入力<textarea>：長いメッセージ<button type="submit">：送信ボタン<label>：入力欄の説明
例えば、こんなコードで簡単なフォームが作れます。
<form action="send.php" method="post">
<label>名前：</label><input type="text" name="name"><br>
<label>メール：</label><input type="email" name="email"><br>
<label>内容：</label><textarea name="message"></textarea><br>
<button type="submit">送信</button>
</form>
コンタクトページを入れることで、より実用的なホームページになります。
ナビゲーションメニューの追加方法
ナビゲーションメニューは、ページ内のリンクを並べたメニューのことです。
ページを見た人が他のページに移動しやすくなるので、サイトの使いやすさが大きくアップします。
ナビメニューを作るときのポイントは次の通りです。
<nav>タグで囲む<ul><li>でメニューをリストにする<a>タグでリンクをつける- CSSで横並びにすると見た目が良くなる
- 現在のページにマークをつけると親切
コードの例は以下のようになります。
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">このサイトについて</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
このように、ナビゲーションがあると見やすさと便利さがグッと上がります。
CSSを使ってデザインを整える例
HTMLだけでもページは作れますが、CSSを使うことでデザインをキレイに整えることができます。
色を変えたり、文字の大きさを変えたりするのはCSSの仕事です。
CSSでよく使うスタイルを紹介します。
color：文字の色を変えるbackground-color：背景色をつけるfont-size：文字のサイズを変えるmargin：外側の余白をつけるpadding：内側の余白をつける
たとえば、こんなCSSで文字の色とサイズを変えられます。
<style>
h1 { color: red; font-size: 24px; }
p { background-color: #f0f0f0; padding: 10px; }
</style>
CSSを使うと、同じHTMLでも見た目が大きく変わります。
デザインを整えて、もっと見やすいページを作りましょう。
実用性のあるテンプレートの活用方法
基本のテンプレートをそのまま使うのも良いですが、自分の内容に合わせて少しずつ変更することで、もっと使いやすいページになります。
実用的なテンプレートは、時間の節約にもなります。
テンプレートを活用するコツを紹介します。
- すでにあるHTMLテンプレートをダウンロードする
- 不要な部分を削除する
- 自分の情報に書き換える
- レイアウトをCSSで調整する
- 公開前に表示チェックをする
テンプレートを上手に使えば、ゼロから全部作らなくても高品質なホームページが完成します。
作ったHTMLホームページを公開する方法と注意点
無料・有料サーバーの違いと選び方
HTMLでホームページを作ったら、次はインターネット上に公開する必要があります。
そのときに必要なのが「サーバー」です。
サーバーには「無料」と「有料」がありますが、それぞれにメリットとデメリットがあります。
まずは無料サーバーと有料サーバーの違いを簡単にまとめてみましょう。
- 無料サーバーはお金がかからない
- 有料サーバーは安定して速い
- 無料サーバーは広告が入ることがある
- 有料サーバーは独自ドメインが使える
- 無料サーバーは容量が少ない場合がある
- 有料サーバーはサポートがしっかりしている
初心者の方は、まず無料サーバーで試してから、有料に切り替えるのもおすすめです。
自分に合った方法を選びましょう。
ドメイン取得の基本と設定手順
ホームページには「住所」のようなものが必要です。
それが「ドメイン」です。
たとえば「example.com」のような文字列がドメインで、これを使ってページを見に来てもらいます。
ドメインの取得と設定の流れは以下のとおりです。
- ドメイン販売サイトにアクセスする
- 希望の文字列で検索する
- 空いていれば申し込む
- 料金を支払って取得する
- サーバーとドメインをひもづける
ドメインを設定するには少し手間がかかりますが、一度やってしまえばずっと使えます。
オリジナルのURLを持つことで、信頼感がアップしますよ。
FTPソフトを使ったアップロード方法
作ったHTMLファイルをサーバーにアップロードするには、FTP（ファイル転送プロトコル）ソフトを使います。
無料で使えるソフトも多く、操作も簡単なので安心してください。
FTPでアップロードする手順は次の通りです。
- FTPソフトをインストールする
- サーバーのアカウント情報を入力する
- サーバーに接続する
- ファイルをドラッグしてアップロードする
- ブラウザで表示を確認する
ファイルを正しい場所にアップロードしないと表示されないので注意が必要です。
index.htmlをルートフォルダに入れるのが基本です。
公開後に必要な表示チェックポイント
ホームページを公開したあとは、ちゃんと見えるかどうか確認する必要があります。
間違ったまま公開されると、見る人が困ってしまいます。
表示確認で見るべきポイントは次のとおりです。
- トップページが正しく表示されるか
- 画像やリンクが正しく動いているか
- スマホとパソコンで見え方が違わないか
- 文字が読みにくくなっていないか
- リンク切れやエラーがないか
確認をしっかりしてから公開すれば、安心して多くの人に見てもらえるページになります。
スマホやタブレットでの見え方を確認する方法
最近は、ホームページを見る人の多くがスマホやタブレットを使っています。
ですので、パソコンだけでなく、小さい画面でも見やすく作ることが大切です。
スマホやタブレットでの表示を確認する方法を紹介します。
- 自分のスマホやタブレットで直接アクセスする
- Google Chromeの検証ツールを使って確認する
- 画面の横幅を縮めてテストする
- 文字や画像がはみ出していないかを見る
- ボタンが小さすぎないか確認する
スマホで見やすいページは、ユーザーに優しく、検索エンジンにも評価されやすくなります。
SEOを意識したHTML構造の最適化
SEOとは「検索エンジン最適化」のことで、Googleなどの検索で上位に表示されるようにする工夫です。
HTMLを書くときも、このSEOを意識することがとても大事です。
SEOに強くなるためのHTMLの工夫は以下のとおりです。
<title>タグにわかりやすいタイトルを入れる<meta name="description">で説明を書く<h1>タグは1ページに1つだけ使う- 見出しは順番に
<h2>、<h3>と使う - 重要なキーワードを文の最初に入れる
SEOを意識することで、せっかく作ったページがたくさんの人に届くようになります。
更新や管理をしやすくする工夫
ホームページは作ったら終わりではなく、情報を更新したり、デザインを変えたりしていくことが大切です。
そのために、最初から「管理しやすい作り方」をしておくと、あとが楽になります。
更新しやすくするための工夫を紹介します。
- ページをファイルごとに分けておく
- 共通部分はコピーして使いやすいようにする
- ファイル名やフォルダ名をわかりやすくする
- 日付や更新履歴を記録しておく
- CSSやJavaScriptは外部ファイルで読み込む
こうすることで、あとから修正したいときにもスムーズに作業できます。
最初のひと手間が未来の自分を助けてくれます。
まとめ
これまでに紹介してきた内容を、もう一度かんたんにまとめます。
- HTMLはホームページの土台になる言語
- HTMLタグを使えば文字や画像を表示できる
- 基本テンプレートを使えば初心者でも作りやすい
- 作ったページはサーバーにアップして公開する
- スマホ対応やSEOも最初から意識するのが大切
まずはかんたんなHTMLからはじめて、自分だけのホームページを作ってみましょう。
