はじめに
本レポートの目的
このレポートは、検索キーワード「webサイト 作り方 html」をもとに、初心者がHTMLを使って自分のWebサイトを作れるように手順と基礎知識をやさしくまとめたものです。実際の作業を重視し、疑問をすぐ解決できる構成にしています。
対象読者
初めてホームページを作る方、学び直しをしたい方、メモ帳で手を動かして覚えたい方に向けています。専門用語は最小限にし、具体例で補います。
この章で伝えたいこと
全体の流れと各章の役割を紹介します。まずは準備から基本のHTML、タグの使い方、最後にCSSで見た目を整え公開するまでを順に説明します。
読み方のポイント
章を順に進めると理解が深まりますが、知りたい項目だけを拾い読みしても実践できます。実際に手を動かしながら学ぶことをおすすめします。
HTMLとは？Webページの骨組みを理解しよう
HTMLとは何か
HTMLはWebページの構造や内容を決めるマークアップ言語です。文章・見出し・画像・リンクなどをブラウザに伝え、ページの「骨組み」を作ります。書き方は比較的シンプルで、学びやすいです。
なぜHTMLが必要か
HTMLがないとブラウザは何を表示すればよいか分かりません。たとえば見出しや段落、画像の位置はHTMLで指定します。これが土台となり、後でCSSで見た目を整えます。
HTMLの基本構造
基本は「タグ」と呼ぶ記号で要素を囲みます。代表的な流れは次の通りです。
– <!DOCTYPE html>：文書の種類
– ：ページ全体
– ：タイトルや文字コードなどの情報
– ：実際に表示する内容
タグと要素の簡単な例
-
タイトル
：大きな見出し
-
本文
：段落
- リンク：他ページへの移動
属性（例：href）は要素に追加情報を与えます。
HTMLとCSSの関係
HTMLは骨組み、CSSは見た目です。HTMLで構造を作り、CSSで色や配置を指定します。両方を組み合わせることで見栄えの良いWebページが作れます。
この章ではまず骨組みの考え方に慣れましょう。次章では準備物について具体的に説明します。
ホームページ作成に必要な準備物
概要
HTMLでホームページを作るには、主に次の3つが必要です。
- テキストエディタ（コードを書く道具）
- ブラウザ（作ったページを表示する道具）
- FTPソフト（サーバーにアップロードする道具）
すべて無料で揃えられ、初心者でも気軽に始められます。
テキストエディタ
メモ帳やVisual Studio Code（VS Code）などを使います。メモ帳はWindowsに標準で入っており、簡単な編集に向きます。VS Codeは無料で高機能、ファイル保存時に自動で色分け表示や補完が出ます。ファイル名は「index.html」のように拡張子を付け、文字コードは「UTF-8」を選んで保存してください。
ブラウザ
Google Chrome、Microsoft Edge、Safariなどを用意します。作ったHTMLファイルをダブルクリックして表示できます。開発者ツール（右クリック→検証）を使うと、見た目の調整やエラー確認が楽になります。
FTPソフト
作成したファイルをレンタルサーバーにアップロードする際に使います。FileZillaやWinSCPなどが代表例で無料です。サーバーの接続情報（ホスト名・ユーザー名・パスワード）を入力して、ローカルのフォルダから公開フォルダへファイルを転送します。
その他の準備と注意点
作業用のフォルダを作り、画像やCSSは別フォルダに分けると管理が楽です。常にバックアップを取り、ソフトは公式サイトからダウンロードしてください。
メモ帳で始める！HTMLホームページの作り方
はじめに
特別なソフトは不要です。Windowsに標準搭載のメモ帳だけで、簡単なホームページを作れます。まずは短い手順で試してみましょう。
ステップ1：メモ帳を開く
スタートメニューから「メモ帳」を選びます。すぐにテキストを書ける画面が開きます。
ステップ2：基本のHTMLを書いてみる
次のような簡単な文を書いてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは</h1>
<p>メモ帳で作ったページです。</p>
</body>
</html>
ステップ3：保存のしかた
ファイル→名前を付けて保存を選びます。ファイル名はindex.htmlとし、文字コードはUTF-8を選びます。ファイルの種類は「すべてのファイル」にして、拡張子が.htmlになるように保存してください。
ステップ4：ブラウザで見る
保存したファイルをダブルクリックすると、普段使うブラウザで表示されます。編集したらブラウザで再読み込みすると変更が反映されます。
ワンポイント
見出しは
、段落は
といったシンプルなタグを使うと分かりやすいです。まずは一つずつ試して慣れましょう。
HTMLファイルの作成手順
はじめに
メモ帳でHTMLファイルを作る基本の流れを、順を追って分かりやすく説明します。初めての方でも迷わないよう丁寧に書きます。
1. メモ帳を開く
Windowsなら「メモ帳」を起動します。Macなら「テキストエディット」を使う場合、プレーンテキストモードに切り替えてください。
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」として保存する
メモ帳の「名前を付けて保存」を選びます。ファイル名をindex.htmlと入力し、保存の種類を「すべてのファイル」にします。文字コード（エンコーディング）はUTF-8を選ぶと日本語が正しく表示されます。Windowsのメモ帳ではファイル名を”index.html”と””で囲うと.txtが付かないので安心です。
4. ブラウザで開いて確認する
保存したindex.htmlをダブルクリックすると既定のブラウザで開きます。編集したらブラウザで再読み込み（更新）してください。表示がおかしいときは、拡張子が.txtになっていないか、文字コードがUTF-8になっているかを確認します。
よくあるトラブルと対処
- テキストがそのまま表示される：拡張子が.htmlでない可能性があります。
- 文字化けする：保存時の文字コードをUTF-8にしてください。
- 真っ白なページ：HTMLのタグが閉じられていない場合があります。
これで基本のHTMLファイル作成は完了です。次の章では、このファイルを使って実際にページを少しずつ作っていきます。
ステップ別：最初のWebページ作成方法
準備するもの
メモ帳（Windowsの「メモ帳」やテキストエディタ）とブラウザだけで始められます。特別なソフトは不要です。
ステップ1：メモ帳を開く
メモ帳を起動して新規ファイルを作ります。
ステップ2：HTMLを入力する
下のコードをそのままコピーして貼り付けてください。タイトルと本文が表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webページ作成</title>
</head>
<body>
<h1>Webページ作成</h1>
<p>こんにちは！これは最初のページです。</p>
</body>
</html>
ステップ3：ファイルを保存する
保存時に拡張子を「.html」にします。例：index.html。文字化けを防ぐためにエンコードはUTF-8を選んでください。Windowsのメモ帳では「名前を付けて保存」で「ファイルの種類」を「すべてのファイル」にし、エンコードを「UTF-8」にします。
ステップ4：ブラウザで開く
保存したファイルをダブルクリックするか、ブラウザにドラッグすると表示されます。タイトルはタブに、本文はページに現れます。
よくあるトラブルと対処
- コードがそのまま表示される：拡張子が.txtのままです。拡張子を.htmlに変更してください。
- 文字が化ける：保存時のエンコードをUTF-8にして再保存してください。
HTMLタグの使い方と主要な要素
はじめに
HTMLはタグで構成します。タグは要素の開始と終了で囲み、ブラウザに表示方法を伝えます。例を交えて分かりやすく説明します。
基本の宣言と構成
<!DOCTYPE html>：文書がHTML5である宣言です。<html>：ページの最上位要素。中に<head>と<body>を置きます。<head>：文字コードやタイトルなどのメタ情報を入れます。`<title>：ブラウザのタブに表示されるタイトルを書きます。
表示用の主要タグ
<body>：実際に表示する内容を入れます。- 見出し：
<h1>〜<h6>を使い、重要度に応じて階層を作ります。 - 段落：
<p>で文章を分けます。 - リンク：
<a href="URL">リンク文字</a>で別ページや外部へ移動します。 - 画像：
<img src="画像のパス" alt="説明">で画像を表示します（altは必ず入れてください）。
他の便利な要素
- リスト：
<ul>（順不同）と<ol>（番号付き）に<li>で項目を並べます。 - テーブル：
<table>内に<tr>（行）、<td>（セル）を使います。簡単な表向けです。 - フォーム：
<form>に<input>や<button>を入れてユーザー入力を受け取ります。
使い方のポイント
- タグは正しく閉じること、属性は引用符で囲むことを守ってください。
- 画像は必ず
altを入れ、リンクはhrefで正しいパスを書くとユーザーに親切です。
CSSでホームページのデザインを整える
CSSとは
CSSはページの見た目を決める言葉です。フォントや色、大きさ、余白などを指定して、HTMLで作った骨組みに装飾を加えます。初心者でも直感的に扱えます。
適用方法
- インラインスタイル：タグに直接書きます。例：
<p style="color:blue;">本文</p> - 内部スタイル：HTMLの内に書きます。
- 外部スタイルシート：別ファイル（例：styles.css）をで読み込みます。例：
<link rel="stylesheet" href="styles.css">
用途に応じて使い分けます。外部ファイルは複数ページで共有し管理しやすいです。
よく使うプロパティ（例）
- color、background-color：文字や背景色
- font-family、font-size：書体や大きさ
- margin、padding：外側と内側の余白
- border：枠線
セレクタの基本
タグ（p）、クラス（.box）、ID（#header）で指定できます。クラスは複数要素に使え便利です。
実例（外部CSS）
body{font-family: "Hiragino Kaku Gothic", sans-serif; color:#333;}
.header{background-color:#f2f2f2; padding:20px;}
.article p{line-height:1.6;}
レスポンシブのヒント
画面幅に合わせて文字サイズやレイアウトを変えると見やすくなります。まずは幅に対して%やmax-widthを使ってみてください。
