はじめに
このガイドの目的
この文書は、超初心者から初心者の方がHTMLを使って自分のホームページを作れるようにするための入門書です。難しい言葉をできるだけ使わず、手を動かしながら学べるように構成しました。完成すると、簡単な自己紹介ページが作れます。たとえば、名前や趣味、写真やリンクを載せることができます。
対象読者
・パソコンで文字入力ができる方
・ホームページ作りをやってみたい初心者の方
専門知識は不要です。初めての方でも順を追って進めれば作成できます。
本書の進め方
まずは必要なツールを揃えます（テキストエディタとブラウザ）。次にHTMLの基本構造を学び、最後にindex.htmlというファイルを作ってブラウザで表示します。各章で具体的な手順と図例を示しますので、実際に手を動かして確かめてください。
この章を読んだ後にできること
・学習の全体像が分かります
・次に何を準備すればよいかが分かります
では、一緒にホームページ作りを始めましょう。
HTMLでホームページを作ると何ができるのか
概要
HTMLはページの骨組みを作ります。文章や見出し、画像、リンクといった要素を配置できます。CSSは色やレイアウト、文字の大きさなど見た目を整えます。両方を組み合わせると自由度の高いデザインが実現できます。
ローカルでも始められる
レンタルサーバーやCMSがなくても、PCとテキストエディタだけで作業できます。作ったHTMLファイルをブラウザで開けば即座に確認できます。まずは保存→表示の手順を繰り返して学ぶと分かりやすいです。
作れるページの具体例
- ブログ風の文章ページ
- 作品を並べるポートフォリオ
- 会社やお店の紹介ページ
- 問い合わせフォームを置いた案内ページ（後で仕組みを追加）
学ぶメリット
基本を覚えると、テンプレートの改変や別のツールの理解が速くなります。見た目を自分で調整できるので、他人に頼らずすばやく修正できます。
まず試せる簡単な流れ
- テキストエディタでindex.htmlを作る
- ブラウザで表示する
- 少しずつ要素やCSSを追加して見た目を変える
実際に手を動かすと理解が早まります。ぜひ気軽に試してみてください。
ホームページ作成前の準備：必要なツール
必要な基本ツール
ホームページ作成に必要なのは、テキストエディタとWebブラウザの2つだけです。メモ帳でも作れますが、使いやすさを優先するならVisual Studio Code（以下VS Code）などの高機能エディタをおすすめします。VS Codeは色分けや補完機能で間違いを見つけやすく、初心者の学習を助けます。
エディタの選び方（具体例）
- メモ帳（Windows）: 最も手軽。機能は少ないが学習には十分です。
- VS Code: 無料で拡張機能が豊富。HTMLやCSSの補完、ライブプレビュー拡張が使えます。
- Sublime TextやAtom: 軽快でカスタマイズ性あり。
ブラウザについて
ChromeやFirefox、Edgeなど最新のブラウザを用意してください。作ったHTMLはブラウザで開くだけで表示を確認できます。複数のブラウザで見た目を比べる習慣をつけると安心です。
作業用フォルダの準備
PC上に作業フォルダを作り、HTML、CSS、画像をまとめて管理します。例:
– mysite/
– index.html
– styles.css
– images/
– logo.png
このように整理するとファイル参照が簡単になります。
拡張子の表示を有効にする（Windows）
ファイル名の末尾にある「.html」「.css」が見えるように拡張子表示を有効にしてください。誤ってindex.html.txtのようになるのを防げます。
そのほかあると便利なもの
- 画像編集ソフト（例: 無料のGIMPや簡単なペイント系）
- コードのバージョン管理（慣れてきたらGit）
- テキストのバックアップ場所
どれも最初から全部そろえる必要はありません。まずはエディタとブラウザ、整理したフォルダを用意して始めてください。
HTMLの基本構造を理解しよう
最小限のHTMLテンプレート
まずはこれだけあれば動く最低限のテンプレートです:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
</head>
<body>
<!-- ここに内容を置きます -->
</body>
</html>
DOCTYPEとhtmlタグのlang属性
DOCTYPEはブラウザに文書の種類を伝えます。<!DOCTYPE html>でHTML5を指定します。<html lang="ja">は文書の言語を知らせ、検索や読み上げで役立ちます。
head内の基本メタデータ
<meta charset="utf-8">は文字コードを指定します。日本語を正しく表示するために必須です。<meta name="viewport" content="width=device-width, initial-scale=1">はスマホなど画面幅に合わせるための設定です。<title>はブラウザのタブに表示されるタイトルです。
bodyタグの役割
<body>は画面に表示する内容を入れます。見出しや文章、画像、リンクなどの要素をここに書きます。
よく使う基本タグ
- 見出し:
<h1>〜<h6>。<h1>が最も重要な見出しです。例:<h1>サイト名</h1> - 段落:
<p>で文章を区切ります。例:<p>こんにちは。</p> - リスト: 箇条書きは
<ul>と<li>、番号付きは<ol>を使います。 - 画像:
<img src="path.jpg" alt="説明">。altは代替テキストで必ず入れます。 - リンク:
<a href="https://example.com">リンク文字</a>。別タブで開くにはtarget="_blank" rel="noopener"を付けます。
これらを組み合わせてページを作ります。次章で実際に1ページ作っていきます。
実際に1ページ作ってみる（index.html）
準備：作業フォルダとファイルを作る
まずパソコン上に作業用のフォルダを作ります。フォルダ名は自由ですが、ここでは「mysite」とします。フォルダ内に新しいファイルを作成し、名前をindex.htmlにします。文字コードはUTF-8で保存してください（日本語が正しく表示されます）。
シンプルなサンプルコード
以下は最低限のHTMLです。コピーしてindex.htmlに貼り付け、保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>トップページ</title>
</head>
<body>
<header>
<h1>サイトのタイトル</h1>
</header>
<main>
<h2>はじめに</h2>
<p>ここは本文の例です。短い説明文を入れておきます。</p>
<h3>特徴</h3>
<ul>
<li>簡単に作れる</li>
<li>構造を後で整えやすい</li>
<li>ブラウザですぐ確認できる</li>
</ul>
</main>
<footer>
<p>© 2025 Example</p>
</footer>
</body>
</html>
ブラウザで開く方法
保存したindex.htmlをダブルクリックするだけで、普段使っているブラウザに表示されます。別の方法はブラウザの「ファイルを開く」や、ファイルをブラウザウィンドウにドラッグすることです。編集したらブラウザで再読み込み（F5や更新ボタン）すると変更を確認できます。
コンテンツを構造的にマークアップする理由
見出し（h1〜h3）や段落（p）、箇条書き（ul／li）を使うと内容が整理されます。後からCSSで見た目を変えるとき、どこにスタイルを当てるか分かりやすくなります。必要なら要素にclassやidを付けておくと、より細かく装飾できます。
次にやること
基本のHTMLができたら、styles.cssを作ってで読み込み、色や余白を整えてください。少しずつ手を加えると理解が深まります。
