はじめに
背景と目的
本ドキュメントは「ホームページ テキスト」について、初心者がテキストエディタを使いHTMLでホームページを作る手順を分かりやすくまとめたものです。基本タグの意味から、具体的なコード例、最後にCSSでの簡単なデザイン適用までをカバーします。
対象読者
パソコンの基本操作ができ、初めてHTMLに触れる方を主な対象とします。専門知識は不要で、手を動かしながら学べます。
本書の構成と使い方
第2章で準備するツールを紹介し、第3章でHTMLの基本構造を説明します。第4章で実際のコード例を示し、第5章で見た目を整える方法を説明します。各章を順に読みながら、実際にファイルを作って確認してください。
準備物（簡単）
- テキストエディタ（例: 無料のものでも可）
- ブラウザ（表示確認用）
- 保存先フォルダ（作業用）
学習のコツ
小さな例を試して、ブラウザで結果を確認する習慣をつけてください。失敗しても問題ありません。頻繁に保存し、変化を比べながら学ぶと理解が深まります。
テキストエディタの準備と推奨ツール
はじめに
HTMLを書くにはテキストエディタが必要です。特別なソフトがなくてもWindowsのメモ帳で始められますが、効率を上げるために専用エディタを使うことをおすすめします。
Windows付属のメモ帳
メモ帳は軽くて起動が早いです。保存時に拡張子を「.html」にすればブラウザで開けます。機能は少ないので、慣れてきたら別のエディタに移ると作業が楽になります。
推奨エディタ（簡単な紹介）
- Sublime Text：動作が軽く、画面がシンプルで初心者に扱いやすいです。ショートカットが覚えやすく、まずはこれを試すとよいです。
- Visual Studio Code（VS Code）：機能が豊富で拡張機能が多いです。プレビューや補完機能を導入しやすいです。
- Atom：見た目が分かりやすく、カスタマイズしやすいです。
インストールの流れ（共通）
公式サイトからダウンロードし、画面の指示に従ってインストールします。初回起動で日本語化やテーマの設定を行うと使いやすくなります。
HTML文法の設定（簡単）
新規ファイルにHTMLを記述して「ファイル名.html」で保存します。エディタの言語設定を「HTML」にすると色分けされ見やすくなります。より快適に作業したい場合は補完やプレビューの拡張機能を入れると便利です。
HTMLの基本タグと構造
基本の考え方
HTMLは文書の骨組みを作る言語です。最初に文書種別を宣言し、で全体を囲みます。見た目はCSS、動きはJavaScriptで補いますが、まずは構造を正しく作ることが大切です。
基本のひな形（例）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>ここに本文の段落が入ります。</p>
</body>
</html>
head内の主要要素
- meta charset: 文字コードを指定します。
- meta viewport: スマホ表示を調整します。
- title: ブラウザのタブに表示されます。
他に外部CSSやスクリプトの読み込みもここで行います。
よく使うタグ
- 見出し:
〜
。文書の階層を表します。
- 段落:
。文章のまとまりを作ります。
- リスト:
- （順不同）、
- 。
- リンク: テキスト。
- 画像:
。
- （順序あり）と
セマンティック要素
,
