2026年5月16日
夏休みに自分だけのホームページを作ろう
夏休みに無料でホームページを作ってみませんか？中学生でも、パソコンとブラウザがあれば今日から始められます。
「ホームページを作るのって難しそう…」と思うかもしれませんが、実はとてもシンプルです。HTML（エイチティーエムエル） と CSS（シーエスエス） という2つの言語を使えば、自分だけのオリジナルページが作れます。
この記事では、ホームページを作る手順を5つのステップで解説します。
💡 ホームページとは: ここでは「自分で作ったWebサイト（ウェブサイト）」のことを指します。インターネットに公開して、誰でも見られるページのことです。
この記事を読むと、次のことがわかります。
- ホームページ作りに必要なもの
- HTMLでページの内容を作る方法
- CSSで見た目をデザインする方法
- 完成したページをインターネットに公開する方法
すべて無料でできます。お金は一切かかりません。
プログラミングが初めての人は、プログラミングの始め方を先に読んでおくと全体像がつかめます。
夏休みのプログラミング学習の全体像は「夏休みにプログラミングを始めよう！中高生向け完全ガイド【無料】」で紹介しています。
ステップ1：必要なものを準備する
ホームページを作るために必要なものは3つだけです。
| 必要なもの | 説明 | 費用 |
|---|---|---|
| パソコン | Windows でも Mac でもOK | 手持ちのものでOK |
| ブラウザ | Google Chrome がおすすめ | 無料 |
| テキストエディタ | VS Code がおすすめ | 無料 |
VS Code（ブイエスコード） は、Microsoft が作った無料のテキストエディタです。プロのエンジニアも使っている人気のツールです。
インストール方法は「VS Codeのセットアップ」で解説しています。もっと詳しい環境構築は「環境構築ガイド」をチェックしてください。
ステップ2：HTMLでページの内容を作る
HTML（エイチティーエムエル） は、ホームページの内容と構造を作る言語です。「何を表示するか」を書きます。
まず、テキストエディタで新しいファイルを作り、名前を index.html にします。そして、以下のような内容を書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のホームページ</title>
</head>
<body>
<h1>私のホームページへようこそ！</h1>
<p>はじめまして。【名前】です。</p>
<h2>好きなもの</h2>
<ul>
<li>音楽</li>
<li>ゲーム</li>
<li>プログラミング</li>
</ul>
</body>
</html>このファイルをブラウザで開くと、ホームページが表示されます。
ポイント:
<h1>は大見出し、<h2>は中見出しです<p>は段落（文章のかたまり）です<ul>と<li>はリスト（箇条書き）です- 【名前】の部分は自分の名前に書き換えてください
HTMLの詳しい書き方は「HTMLとは？初心者向け解説」で学べます。最初のページの作り方は「はじめてのWebページを作ろう」で詳しく解説しています。
ステップ3：CSSで見た目をデザインする
HTMLだけだと見た目がシンプルすぎるので、CSS（シーエスエス） で色やフォントを変えましょう。
index.html の <head> の中に、以下を追加します。
<style>
body {
font-family: sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f0f8ff;
}
h1 {
color: #2563eb;
}
h2 {
color: #1e40af;
}
</style>ブラウザを更新（F5キー）すると、背景色が水色になり、見出しの色が変わります。
ポイント:
background-colorは背景色を変えますcolorは文字の色を変えますfont-familyはフォント（書体）を変えますmax-widthとmargin: 0 autoでページを中央に配置します
CSSの基本的な書き方を1から学びたい人は、最初のCSSで基礎を確認しましょう。プロパティの書き方や値の指定方法を丁寧に解説しています。
色やフォントを変えるだけで、ページの印象がガラッと変わります。自分の好きな色を試してみましょう。色のコードは「CSS 色 一覧」で検索すると見つかります。
CSSの詳しい書き方は「CSSとは？初心者向け解説」で学べます。色の指定方法は「CSSの色指定」、フォントの変え方は「CSSのフォント」で解説しています。
ステップ4：画像やリンクを追加する
ホームページに画像やリンクを追加すると、もっと充実したページになります。
画像を追加する
<img src="photo.jpg" alt="私の写真" width="300">photo.jpg は画像ファイルの名前です。index.html と同じフォルダに画像ファイルを置いてください。
リンクを追加する
<a href="https://example.com">おすすめのサイト</a>ステップ5：ホームページをインターネットに公開する
完成したホームページを、世界中の人が見られるようにインターネットに公開しましょう。GitHub Pages（ギットハブ ページズ） という無料のサービスを使います。
公開の手順:
- GitHubアカウントを作る（無料）
- 新しいリポジトリ（保管場所）を作る
- HTMLファイルをアップロードする
- GitHub Pagesの設定をオンにする
詳しい手順は「GitHub Pagesの使い方」と「GitHub Pagesにデプロイする方法」で解説しています。
公開すると、https://【ユーザー名】.github.io/【リポジトリ名】/ というURLで誰でもアクセスできるようになります。友達や家族にURLを送って、見てもらいましょう！
公開したページは、スマホからでも見られます。友達にLINEでURLを送ってみましょう。「自分で作ったんだよ」と言えると、きっと驚かれます。
公開後も、ファイルを更新してアップロードし直せば内容を変更できます。夏休みの間に少しずつ機能を追加していくのも楽しいです。
もっとかっこいいページにするには
基本のホームページが完成したら、次のステップに進みましょう。
- CSSコースで本格的なデザインを学ぶ: レイアウト・アニメーション・レスポンシブデザインなど、プロっぽいデザインの技術を学べます → CSSコース
- JavaScriptで動きをつける: ボタンを押したら何かが起きる、クイズやゲームなど、動きのあるページを作れます → JavaScriptコース
- 自由研究として提出する: ホームページ制作の過程をレポートにまとめれば、自由研究としても提出できます → 「夏休みの自由研究にプログラミング！」
- 他のアイデアにも挑戦する: おみくじ・クイズ・タイマーなど、作れるものはたくさんあります → 「夏休みにプログラミングで何作る？」
まとめ
- ✅ ホームページ作りに必要なのはパソコン・ブラウザ・VS Codeだけ（すべて無料）
- ✅ HTMLでページの内容を作り、CSSで見た目をデザインする
- ✅ 画像やリンクを追加して、充実したページにできる
- ✅ GitHub Pagesで無料でインターネットに公開できる
- ✅ 完成したらCSSコースやJavaScriptコースで次のステップに進もう
夏休みのプログラミング学習の全体像は「夏休みにプログラミングを始めよう！中高生向け完全ガイド【無料】」で紹介しています。