MENU

初心者でも簡単にできるホームページ作り方とhtml基礎ガイド

大規模情報サイト運営
html ホームページ 作り方
2025/11/02
目次

はじめに

はじめに

このガイドは、HTMLを使って自分のホームページを作り、公開するまでの手順を丁寧に解説する初心者向けの入門書です。パソコンやテキストエディタの準備から、HTMLの基本構造、ファイル作成、ブラウザでの確認、サーバーへのアップロード、SEOの基礎、CSSとの連携、よく使うタグ、よくあるトラブル対応までを幅広くカバーします。

対象読者

  • 初めてホームページを作る方
  • コードに自信がない方
  • 自分の情報を簡単に公開したい方

このガイドの使い方

各章は順を追って学べる構成です。実際に手を動かしながら進めると理解が早まります。サンプルコードは余分な説明を省き、まずは動作させることを優先しています。分からない用語は具体例で補足します。

目標

このガイドを読み終えるころには、シンプルなホームページを作り、ブラウザで確認してインターネット上に公開できるようになることを目指します。

注意点

作業前に必ずファイルのバックアップを取り、ブラウザで表示を確認しながら進めてください。

HTMLでホームページを作るために必要な準備

準備する基本のもの

  • パソコン：Windows、Macどちらでも構いません。普段使っているもので大丈夫です。\n- テキストエディタ：コードを書くためのソフトです。初心者には「メモ帳（Windows）」や「テキストエディット（Mac）」で始められます。少し慣れたら「Visual Studio Code」や「Atom」などの専用エディタがおすすめです。

テキストエディタの選び方（具体例）

  • メモ帳：すぐ使える、余計な機能がない。\n- Visual Studio Code：自動補完や保存時の整形、プレビューなど便利機能が豊富です。無料で使えます。

ファイルとフォルダの準備

  • 作業フォルダをひとつ作ります（例：my-website）。\n- HTMLファイルは拡張子「.html」で保存します（例：index.html）。\n- 画像は images フォルダ、CSSは css フォルダといった具合に整理すると後で管理しやすくなります。

画像やCSSなど素材の準備

  • 使いたい画像は事前に用意してサイズを確認してください。\n- CSSファイルを外部にする場合は css/style.css のように保存します。

動作確認のためのブラウザ

  • Chrome、Firefox、Edge、Safariなどを用意してください。複数のブラウザで表示を確認すると安心です。

バックアップと管理の簡単な注意点

  • 作業前にフォルダをコピーするだけでも十分なバックアップになります。\n- 慣れたらGitなどでバージョン管理を始めると便利です。

チェックリスト（短く）

  • 作業フォルダを作ったか
  • index.html を保存したか
  • 画像・CSSフォルダを用意したか
  • ブラウザで開けるか

これで準備は整います。次は実際にHTMLの基本構造を作っていきましょう。

HTMLの基本構造を理解しよう

HTMLとは

HTMLはWebページの骨組みを作る言葉です。文章や画像、リンクの配置や意味をブラウザに伝えます。専門用語は最小限にし、まずは全体の形を覚えましょう。

基本の並び

最小限のHTMLは次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ページタイトル</title>
</head>
<body>
  <h1>見出し</h1>
  <p>本文がここに入ります。</p>
</body>
</html>
  • <!DOCTYPE html>：HTML5を宣言します。
  • ：ページ全体を囲みます。lang属性で言語を指定します。
  • ：タイトルや説明、CSSのリンクなど、画面に直接表示しない設定を入れます。
  • ：実際に画面に表示する内容を記述します。

よく使う属性とタグの例

  • title：ブラウザのタブに表示されます。
  • meta description：検索結果に表示される説明に使われます。
  • a href=”…”：別ページへのリンクです。
  • img src=”…” alt=”…”：画像と代替テキストです。

セマンティックなタグ

header、nav、main、footerなどを使うと構造が分かりやすくなり、後で編集やデザインを行うときに役立ちます。

ページの骨組みを理解すると、次は実際にファイルを作ってみましょう。

HTMLファイルを作成する手順

ステップ1：テキストエディタを用意する

Windowsならメモ帳、Macならテキストエディット、または Visual Studio Code や Sublime Text などのエディタを使います。無料で使えるエディタがおすすめです。

ステップ2：基本のHTMLを書いてみる

以下のような最小限の構成を書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
  <h1>こんにちは</h1>
  <p>これはサンプルページです。</p>
</body>
</html>

ステップ3：保存方法

ファイル名は index.html や sample.html にします。拡張子が .html になるように注意してください。文字コードは一般的に UTF-8 を選びます。エディタの「保存時のエンコーディング」や「ファイル形式」を確認してください。

ステップ4：動作確認

保存後、ファイルをダブルクリックしてブラウザで開きます。内容が表示されれば正しく作成できています。

よくある注意点

  • ファイル名に日本語やスペースを入れないとトラブルになりやすいです。
  • 拡張子が .txt のまま保存しないでください。

HTMLコードの記述ポイント

基本の考え方

HTMLは「タグ」で内容を囲み、「要素」はタグと中身を合わせたものです。見出しは

〜

、段落は

、画像は、リンクはで表します。具体例を見れば分かりやすくなります。

属性について

属性はタグに追加情報を与えます。例えば説明やリンクのように、属性でファイル名やリンク先、説明を指定します。属性値は必ず引用符で囲んでください。

閉じタグと自己終了タグ

多くは開始タグと閉じタグ（

…

）で成り立ちます。や
などは自己終了扱いにしますが、XHTML風に書くなら...のようにスラッシュを付けても構いません。

よくあるミスと対策

・閉じタグの付け忘れ
・タグ名や属性名のタイプミス
・引用符の付け忘れ
・全角スペースの混入
エディタの構文ハイライトやブラウザの検証ツールを使うと見つけやすくなります。

ファイル保存と文字コード

ファイル名は拡張子を「.html」にし、文字コードはUTF-8を推奨します。保存後はブラウザで開いて表示を確認してください。

簡単な実例

例

見出し

段落の例です。

ブラウザでの動作確認

作成したHTMLファイルは、エクスプローラーやFinderでファイルをダブルクリックすると既定のブラウザで開けます。まずはこれで見た目や文字が意図通りか確認してください。

確認の基本手順

  • ファイルをダブルクリックして表示を確認します。アドレスバーに「file://」から始まるパスが表示されます。
  • 表示が古いと感じたら、ブラウザでリロード（Windows: Ctrl+F5、Mac: ⌘+Shift+R）してキャッシュをクリアします。
  • 別のブラウザでも同じページを開き、ブラウザ依存の問題かを確かめます。

表示がおかしいときにチェックする項目

  • ファイル名・拡張子が「.html」になっているか確認します。
  • 文字化けがある場合は、ファイルの文字コードがUTF-8で保存されているかを確認します。
  • タグの閉じ忘れやスペルミスがないか、テキストエディタで目視します。
  • 画像やCSS、JavaScriptのパスが正しいか、相対パスと絶対パスを見直します。
  • ブラウザの開発者ツール（F12）を開き、コンソールやネットワークタブでエラーを確認します。

よくある具体例と対処

  • 画像が表示されない：リンク先のパスを修正します（例: images/photo.jpg など）。
  • 文字化け：UTF-8で保存し、HTMLのheadにを入れます。
  • CSSが反映されない：linkタグのhrefを確認し、リロードでキャッシュを消します。

困ったときは、開発者ツールのエラーメッセージをメモして検索や質問に添えると解決が早まります。

サーバーへのアップロードと公開

概要

独自ドメインとレンタルサーバーを用意し、HTMLファイルをサーバーへ置くとインターネット上で公開できます。アップロードにはFTP/SFTPソフトやレンタルサーバーの管理画面（ファイルマネージャー）を使います。

事前準備

  • ドメイン名とレンタルサーバーを契約します。
  • レンタルサーバーからFTP/SFTPの接続情報（ホスト名、ユーザー名、パスワード、ポート）を確認します。
  • 公開するファイルはindex.htmlがあることを確認します。

アップロード手順（代表例）

  1. FTPクライアント（例: FileZilla）をインストールします。
  2. サーバー情報で接続し、公開用フォルダ（public_html、wwwなど）を開きます。
  3. ローカルのHTML/CSS/画像ファイルを同じ階層にアップロードします。
  4. パーミッションは通常そのままで問題ありませんが、表示できない場合はファイルのアクセス権を確認します。

レンタルサーバーの管理画面が使える場合は、ブラウザ上のファイルマネージャーでアップロードできます。Git対応のサーバーなら、デプロイで更新できます。

ドメイン設定（DNS）

  • ドメイン管理画面でネームサーバーをレンタルサーバーの値に変更するか、AレコードでサーバーのIPを指定します。
  • 反映には数分〜72時間かかることがあります。

公開後の確認と注意点

  • ブラウザでドメインにアクセスし、index.htmlが表示されるか確認します。
  • SSL（https）はレンタルサーバーで無料の自動設定（Let’s Encrypt等）が使えることが多いです。必ず設定してください。
  • 定期的にバックアップを取ると安心です。

よくあるトラブルと対処

  • 403エラー：アップロード先やパーミッションを確認します。
  • 404エラー：ファイル名やパスを確認します（大文字小文字も区別されます）。
  • 接続できない：FTP情報やホスト名、ポートを確認し、SFTPを試します。

ホームページを検索されやすくする方法（SEOの基本）

1. キーワードを決める

まず狙いたい言葉を決めます。具体的な例：『初心者 向け 料理教室 東京』のように、地名や用途を組み合わせると分かりやすいです。検索者の立場で考え、短い言葉（例：料理教室）と短めのフレーズ（例：東京 料理教室 初心者）を用意します。

2. タイトルタグとメタディスクリプション

タイトル（title）は検索結果で最も目立つ部分です。先ほどのキーワードを自然に入れ、30〜60文字程度で簡潔にします。例：『初心者向け料理教室｜東京で学ぶ家庭料理』。メタディスクリプションはページの説明文です。検索ユーザーがクリックしたくなるように、要点をまとめて書きます（120〜160文字を目安）。

3. 見出しと本文の書き方

見出し（h1,h2）は内容の骨組みです。h1にページの主題を入れ、h2以降で詳しく説明します。本文は読みやすく短い段落で構成し、キーワードを自然に散りばめます。過剰な繰り返しは避けます。

4. URL、画像、内部リンク

URLは短く意味が分かるものにします（例：/tokyo-cooking-beginner）。画像にはalt属性で説明を付けます。関連ページへの内部リンクを増やすとサイト内の回遊が良くなります。

5. サイトマップとSearch Console

サイトマップ（sitemap.xml）を用意し、Google Search Consoleに送信します。これで検索エンジンがページを見つけやすくなります。Search Consoleで表示回数やクリック数を確認し、改善に活かします。

6. モバイル対応と表示速度

スマホで見やすいデザインにし、画像サイズを軽くします。表示速度が速いほど訪問者が離れにくく、検索でも有利です。

7. 実践のヒント（すぐできること）

  • タイトルと説明を見直す
  • 主要ページに分かりやすいh1を入れる
  • 画像にaltを付ける
  • Search Consoleにサイトを登録する

簡単な対策を積み重ねると、検索で見つかる可能性が高まります。初心者の方も一つずつ試してみてください。

HTMLでよく使うタグ例

見出しタグ（

〜

）

ページの見出しに使います。数字が小さいほど重要な見出しです。
例: <h1>サイトタイトル</h1>

段落タグ（

）

文章を段落ごとに分けます。改行だけでは段落にならないので注意します。
例: <p>ここが段落です。</p>

画像タグ（）

画像を表示します。srcに画像URL、altに代替テキストを必ず入れます。
例: <img src="image.jpg" alt="説明文">

リンクタグ（）

別ページや外部サイトへ飛ばします。hrefにURLを指定します。
例: <a href="https://example.com">リンクテキスト</a>

リスト（

    ,

      ,

    1. ）

箇条書きに使います。ulは順不同、olは順序付きです。
例: <ul><li>項目1</li><li>項目2</li></ul>

表（

,

,

,

）

表形式でデータを並べます。見出しにはthを使います。
例: <table><tr><th>項目</th></tr><tr><td>内容</td></tr></table>

小さなポイント

  • altはアクセシビリティとSEOで重要です。
  • タグは意味を考えて使うと、検索や読みやすさが向上します。

CSSとの連携でデザインを整える

はじめに

HTMLだけでは見た目がシンプルです。CSS（スタイルシート）を使うと色・余白・レイアウトなどを自由に変えられます。ここでは基本の使い方と実践的な例を丁寧に紹介します。

CSSファイルの作り方とリンク

HTMLの内に次のように書くと外部CSSを読み込みます。

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

style.css を同じフォルダーに置けば読み込まれます。タグで内部に書く方法や、要素に直接書くインラインstyleもありますが、外部ファイルが再利用しやすくおすすめです。

基本の書き方（例）

要素、クラス、IDで指定できます。

/* 要素 */
body { font-family: Arial; }
/* クラス */
.button { background: blue; color: white; padding: 8px; }
/* ID */
#main { max-width: 800px; margin: 0 auto; }

HTML側は class=”button” や id=”main” とします。

レイアウトと余白の基本

margin（外側の余白）と padding（内側の余白）を使います。box-sizing: border-box を使うと幅の計算が分かりやすくなります。

簡単な横並び（Flexbox）

少しレイアウトを整えるなら flexbox が便利です。

.header { display: flex; align-items: center; justify-content: space-between; }

短い記述で要素を横並びにできます。

レスポンシブの基本

画面幅に合わせるには max-width やメディアクエリを使います。

@media (max-width: 600px) { .sidebar { display: none; } }

実践のコツ

  • ファイル名や読み込み順を確認してください。後で読み込んだCSSが優先されます。
  • ブラウザの開発者ツールでスタイルを確かめると早く直せます。
  • まずはシンプルなルールから始め、少しずつ調整しましょう。

よくある質問・トラブル対応

ホームページ作成でよく起きる問題と簡単な対処法をまとめます。順番に確認すると原因を特定しやすくなります。

ページが表示されない

  • ファイル名と拡張子を確認（例: index.html）。大文字小文字は区別される場合があります。
  • タグの閉じ忘れを確認（特に や 、

    ）。1つの閉じ忘れで表示が崩れることがあります。

  • 文字コードをUTF-8に統一し、BOMが付いていないか確認します。

画像が表示されない

  • 画像のパスが正しいか（相対パス／絶対パス）、フォルダ位置を確認。
  • ファイル名や拡張子（.jpg .png .gif）を正確に記述。大文字小文字も注意。
  • ブラウザで画像ファイルのURLを直接開いてみると原因がわかります。

CSSや見た目が反映されない

  • link要素のhrefが正しいか、rel=”stylesheet”があるか確認。
  • ブラウザのキャッシュをクリア（Ctrl+F5）して再読み込み。

サーバー側の問題

  • 404や403が出る場合はファイルの配置やパーミッション（chmod 644 など）を確認。index.htmlがトップにあるか確認。
  • MIMEタイプの設定でCSSや画像が正しく配信されているかも確認します。

ブラウザでの確認方法（簡単）

  • 開発者ツール（F12）でConsoleとNetworkを確認。エラーや読み込み失敗が分かります。

問い合わせ時に伝える情報

  • 発生しているURL、スクリーンショット、該当のHTML/CSSの抜粋、Consoleのエラーメッセージ、使ったブラウザ名とOS。

困ったときは上記を順に確認してください。必要なら確認した内容を教えていただければ、具体的にお手伝いします。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
html ホームページ 作り方
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

092-292-5231
お問い合わせ

© 株式会社GLOBAL・CREATIVE.

目次