HTMLでホームページの作り方を徹底解説！初心者のために1から解説！
最近よく耳にする「ITスキル」や「プログラミング」。なんとなく気になって、実際に触れてみたいけど、どういう風に進めるのかわからない、そんなスタートでつまずいている方もも多いのではないでしょうか？
「プログラミングに気になっているけど、手を出せていない」
「自分のWebサイトを作ってみたい」
そんな思いが少しでもあるなら、HTMLから始めてみるのがおすすめです。
この記事では、プログラミング未経験の方でも迷わず進められるように、HTMLを使ったホームページ制作の流れをステップごとに丁寧に解説していきます。特別なソフトや知識は必要ありません。この記事に書かれている通りに手を動かしていけば、きっと「自分でも作れる！」という感覚を味わえるはずです。
目次
HTMLってどんな言語？
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webページを作るための基本的な言語です。Webサイトの骨組みを作る設計図のようなものです。
普段見るWebページは、文章や画像、動画、リンクなどが組み合わさってできています。HTMLは、それらをどのように並べて表示するかをブラウザに伝えます。
たとえば、「ここは見出し」「ここは段落」「ここに画像を置く」といった指示をHTMLで書くと、ブラウザはその通りにページを表示します。
また、HTMLはプログラミング言語とは違い、「マークアップ言語」と呼ばれます。これは「処理を実行する」のではなく、「情報の構造や意味を示す」ことに特化しているためです。
なので、初心者でも取り組みやすく、Web制作の第一歩に適しています。
ホームページを制作する上で、必要なHTMLの知識とは？
ホームページを作ると聞くと、難しい専門知識がたくさん必要だと感じるかもしれません。
しかし、最初に覚えるべきHTMLのポイントは限られています。ここでは、実際にサイトを作る上で必ず押さえておきたい「タグ」について解説していきます。
タグの概念
HTMLは「タグ」と呼ばれる特別な記号を使って書かれています。タグは「<」と「>」で囲まれた文字列で、Webページの構成要素を示すための目印のようなものです。
たとえば、「ここはタイトル」「ここは段落」とブラウザに伝える役割を持っています。タグは必ずペアで使うものが多く、開始タグと終了タグの2つでひとつのセットです。
<p>これは段落です</p>この例では、<p> というタグで「段落の始まり」を表し、</p> で「段落の終わり」を示しています。
このように、開始タグと終了タグで挟んだ部分が、実際にブラウザに表示される内容となります。
いくつかの代表的なタグを紹介します。
- <h1>〜<h6>
見出し（数字が小さいほど大きな見出し） - <p>
段落（本文のまとまり） - <a>
リンクを作る - <img>
画像を表示する - <ul> <li>
箇条書きリスト
基本的には、タグが「これは何か」をブラウザに伝えて、Webページが正しく表示されるという仕組みです。
難しい理屈を覚えるよりも、実際に書いてみることが理解への近道です。次のステップでは、HTMLファイルを自分のパソコンに作って、実際に動かしてみる方法を紹介していきます。
実際にHTMLファイルを作ってPC上で確認する方法を解説！
HTMLの仕組みがわかってきたところで、次は実際に手を動かしてファイルを作ってみましょう。PC上で動かすための準備（環境構築）は必要ありません。
ここから紹介する手順を順番に進めていけば、自分で書いたHTMLファイルをパソコンで確認できるようになります。
STEP 1 パソコンでHTMLファイルを書く上で必要なアプリを準備！
HTMLファイルは、普通のテキストエディタで書くことができます。極端に言えば、Windowsなら「メモ帳」や、Macなら「テキストエディット」でも問題ありません。
ただ、より見やすく効率的に作業を進めるには、「Visual Studio Code（通称：VS Code）」というツールを使うのがおすすめです。
多くのエンジニアが実際に使っている無料のツールで、HTMLだけでなくCSSやJavaScriptなど、さまざまな言語に対応しています。
以下の公式サイトからダウンロードできます：
👉https://code.visualstudio.com/
ダウンロードしたら、画面の指示に従ってインストールしましょう。
STEP 2 VSコードでフォルダとファイル生成！
VS Codeが使えるようになったら、まずはHTMLファイルを保存するフォルダを作りましょう。今回はデスクトップ上に「HTMLフォルダ」を作成する形で進めていきます。
フォルダの作成方法（例：Windowsの場合）
- デスクトップを右クリック
- 「新規作成」→「フォルダー」をクリック
- フォルダ名を 「HTMLフォルダ」 にする
次に、このフォルダの中にHTMLファイルを作ります。
ファイルの作成方法（VS Code）
- VS Codeを起動する
- 画面上部の「ファイル（Files）」→「フォルダを開く（Open Folder）」で、先ほど作成した 「HTMLフォルダ 」を選択
- 左上の「新しいファイル」ボタンをクリックし、ファイル名を index.html にする
これで、HTMLファイルを書く準備が整いました。
STEP 3 実際にHTMLファイルを書いてみよう！
作成した index.html ファイルを開いたら、次のようなコードを入力してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>はじめてのホームページ</title>
</head>
<body>
<h1>こんにちは、HTMLの世界！</h1>
<p>これは自分で書いたホームページです。</p>
</body>
</html>入力ができたら、Ctrl + S（Macなら ⌘ + S）で保存します。画面上部のファイル名の横にある白丸が消えれば保存完了です。
STEP 4 PCのフォルダから自分で書いたHTMLファイルを確認してみよう！
保存ができたら、あとは実際に自分のブラウザでHTMLファイルを開いて、表示させてみましょう。
【確認手順】
- エクスプローラー（Finder）で先ほどの HTMLフォルダ を開く
- 中にある index.html ファイルをダブルクリックする
- ブラウザが起動し、作成したページが表示される
たとえば、ファイルのパスが User/<ユーザー名>/Desktop/HTMLフォルダ/index.htmlなら、そのままブラウザ上に表示されるURL欄にも同じようなファイルパスが出てくるはずです。
ここまでできれば、「自分でWebページを作って表示させる」体験がひと通り完了です。あとは内容を増やしたり、見た目を整えたりしていくことで、より本格的なホームページへと近づいていきます。
STEP 5 【上級者向け】 HTMLファイルを公開してみよう！
これまでのステップで、HTMLファイルを作成し、パソコン上で表示するところまではできました。
ここまで来ると、「このページをインターネット上に公開して、誰でも見られるようにしたい！」と思う方もいるのではないでしょうか。
実は、HTMLファイルをWeb上に公開する方法はいくつかあり、用途や目的に応じて選ぶことができます。
ここでは、代表的な方法や簡単にできる方法を紹介します。
方法①：FTPを使ってサーバーにアップロードする
もっとも一般的で昔から使われているのが「FTP（File Transfer Protocol）」を使ったアップロード方法です。
【必要なもの】
- サーバーの契約（例：ロリポップ、さくらインターネットなど）
- FTPソフト（例：FileZillaなど）
- サーバーのログイン情報（ホスト名／ユーザー名／パスワード）
【流れ】
- サーバーを契約して、FTP接続情報を取得
- FileZillaなどのFTPソフトを使って、サーバーに接続
- 自分のHTMLファイル（index.htmlなど）をアップロード
- アップロード先のURLにアクセスすると、自分のページが見られるようになります
この方法は自分のドメインを使いたいときや、しっかり管理されたWebサイトを作りたいときに向いています。
方法②：GitHub Pagesを使って無料で公開する
もっと手軽に始めたい場合は、「GitHub Pages（ギットハブ・ページズ）」を使う方法がおすすめです。
GitHubはエンジニアがよく使うコードの共有サービスですが、HTMLなどの静的ファイルを公開する機能も備わっています。
【必要なもの】
- GitHubのアカウント（無料）
- Gitのインストール（またはGitHubのWeb UI）
【流れ】
- GitHubにサインアップして、新しいリポジトリ（プロジェクト）を作成
- index.html をアップロード（もしくはGitでPush）
- リポジトリの「Settings」→「Pages」で公開設定を行う
- 自動的に生成されるURLでページが公開されます（例：https://ユーザー名.github.io/リポジトリ名/）
この方法は無料で始められ、ドメインなしでもすぐに公開できるのが魅力です。
HTMLで作ったファイルは、自分のパソコンだけで完結させることもできますが、インターネットに公開することで、自分の作品を多くの人に見てもらえる楽しさが生まれます。
最初は難しそうに感じるかもしれませんが、上で紹介した方法を使えば、初めてでも意外と簡単に公開までたどり着けるはずです。
本格的なホームページを作るにはどうしたらいい？
HTMLファイルを作成して、自分のパソコン上でページを表示できるようになれば、ホームページづくりの第一歩はクリアです。
ただし、この段階ではまだ「文字だけの、シンプルなページ」になっているかと思います。
本格的なホームページに近づけていくためには、次のような要素が必要になってきます。
- 装飾をつける（CSS）
- 動きをつける（JavaScript）
CSSファイルを作って装飾しよう
HTMLは、ページの構造や中身を表現するための言語です。
しかし、「見た目のデザイン」はHTMLだけではコントロールできません。
そこで必要になるのが、CSS（Cascading Style Sheets）という言語です。
CSSを使えば、次のような装飾ができるようになります。
- 背景色や文字の色を変更する
- フォントサイズや行間を調整する
- ボタンや画像を整列させる
- スマホやタブレットにも対応したレイアウトを作る
たとえば、以下のようなHTMLに対し、
<h1>ようこそ、わたしのホームページへ</h1>
<p>ここでは、日々の記録や趣味のことを書いています。</p>
以下のようなCSSを適用すると、
h1 {
color: navy;
font-size: 32px;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
}
見た目が一気に洗練されて、読んでもらいやすいページになります。
CSSファイルは、.cssという拡張子で保存し、HTMLファイルの<head>タグの中にリンクすることで読み込むことができます。
<link rel="stylesheet" href="style.css">最初はコピー＆ペーストでも大丈夫なので、実際に自分でCSSファイルを作って装飾してみるのがおすすめです。
JavaScriptファイルを作って動きをつけよう
CSSで見た目を整えたら、次は「動き」を加えてみましょう。
そこで登場するのがJavaScriptという言語です。
JavaScriptは、ユーザーの操作に応じてページの動きを制御するプログラミング言語で、ボタンを押したときにメッセージを表示したり、メニューを開いたり、ページをスクロールしたときに要素がフェードインするようなアニメーションも作れます。
たとえば、ボタンを押すと「こんにちは」と表示するだけのコードでも、JavaScriptを使えばこんなにシンプルです。
<!-- HTML内にボタンを配置 -->
<button onclick="greet()">挨拶する</button>
<script>
function greet() {
alert("こんにちは！");
}
</script>
また、HTMLとは別に .js ファイルを作成して、HTMLに読み込むこともできます。
<script src="script.js"></script>JavaScriptはWebページにインタラクション（対話性）を加える重要な技術で、動きのあるサイトやアプリの土台となります。
ゲームのような動き、リアルタイムなチャット、ボタンを押して画面が切り替わるような処理もJavaScriptで実現されています。
HTMLだけでもページは作れますが、CSSとJavaScriptを加えることで、見た目も使い勝手も大きくレベルアップします。
本格的なホームページを目指すなら、少しずつこの2つの技術にも触れていくとよいでしょう。
次は、さらに効率的にページを作成できる CMS（コンテンツ管理システム） について紹介していきます。
WordPressなどのCMSを使ってサイトを作ろう
ここまで、HTML、CSS、JavaScriptといった技術を使ってホームページを作る方法を見てきました。
しかし、これらの言語を一つひとつ学んで、デザインや動きをすべて自分で作るのは、時間も労力もかかります。
そこで、多くの人に使われているのがCMS（コンテンツ管理システム） です。
CMSを使うと、専門的な知識がなくても、比較的簡単に見た目の良いWebサイトを作ったり、更新したりすることができます。
中でも特に人気なのが「WordPress（ワードプレス）」です。
世界中のWebサイトの約4割はWordPressで作られていると言われており、その使いやすさや拡張性の高さが大きな理由です。
CMSとは？
CMSは「Content Management System」の略で、日本語では「コンテンツ管理システム」と呼ばれます。
簡単に言うと、Webサイトのコンテンツ（文章や画像、動画など）を専門知識なしに管理し、更新できる仕組みのことです。
たとえば、ブログを書いたり、写真を追加したり、メニューの順番を変えたりといった作業を、プログラミングなしで行うことができます。
管理画面が用意されているため、そこから直感的に操作できるのが特徴です。
また、CMSにはさまざまなテーマ（デザインのテンプレート）やプラグイン（機能拡張）が用意されていて、クリックだけでサイトの見た目や機能を自由にカスタマイズできます。
ホームページを本格的に運営したい方や、更新を頻繁に行いたい方にとって、CMSは非常に心強い味方になります。
プログラミングの知識がまだ浅くても、CMSを使いこなせれば、自分の思い通りのWebサイトを手軽に作成できるようになります。今すぐにHPを作りたい人にとっては、CMSを活用するのも一つの手です。
本格的なホームページ作成を学びたい方は、プログラミングスクールがオススメ
ここまでHTMLを中心に、ホームページを作るための基本的な知識と手順を紹介してきました。
実際に手を動かしながら体験してみることで、「思っていたより簡単だった」「もっと深く知りたい」と感じた方もいるかもしれません。
ただ、HTMLやCSS、JavaScriptなどの技術を本格的に習得しようとすると、自己学習だけでは限界を感じる場面も出てきます。
「もっと効率的に学びたい」「わからないところをすぐに質問したい」「就職や副業にも活かしたい」
そんな方には、プログラミングスクールで体系的に学ぶことも視野に入れてみてはいかがでしょうか？
プログラミングスクールで学ぶメリット
スクールには、学習を継続しやすく、実践的な力を伸ばせる環境が整っています。ここでは、プログラミングスクールで学ぶことの主なメリットを紹介します。
- 学習のロードマップが明確に用意されている
- 講師に質問できる環境がある
- チーム開発やポートフォリオ制作の機会がある
- 同じ目標を持った仲間と出会える
学習のロードマップが明確に用意されている
初心者にとってよくある悩みは、「どこから始めて、何をどの順番で学べばいいのか分からない」ということです。プログラミングスクールでは、その道筋があらかじめ整理されており、段階的にスキルを習得できるカリキュラムが組まれています。無理なく基礎から応用へと進めるため、自分の成長を実感しながら学び続けられるのが大きな魅力です。
講師に質問できる環境がある
独学では、エラーやバグに直面したときに原因がわからず、そこで立ち止まってしまうことも珍しくありません。多くのスクールには、つまずいたときにすぐに相談できる環境が用意されています。早い段階で疑問を解消できることで、効率的に理解が進み、挫折するリスクを大きく減らすことができます。
チーム開発やポートフォリオ制作の機会がある
スクールでは、個人の学習だけでなく、他の受講生とチームを組んで一つのサービスを開発する「チーム開発」や、学んだことを活かして自分のWebサービスを作る「ポートフォリオ制作」など、実践的な機会も用意されています。こうした機会は、単に知識を身につけるだけでなく、就職・転職活動の場面でもアピール材料として非常に効果的になります。
同じ目標を持った仲間と出会える
独学での学習は孤独になりがちです。しかし、スクールには同じ方向を向いた仲間が集まっており、一緒に学び、励まし合える仲間の存在は、大きなモチベーションに繋がります。学習の進捗やつまずきも共有しやすく、情報交換を通じて新しい気づきを得ることもできます。
どんなスクールを選べばいい？
プログラミングスクールとひと口に言っても、学べる内容やサポート体制、受講スタイルには大きな違いがあります。自分に合ったスクールを選ぶためには、「何を学びたいのか」「どのように学びたいのか」「どこまでのレベルを目指すのか」といった視点で比較・検討することが大切です。
大学生がプログラミングを学ぶならGeekSalon！
GeekSalonは、大学生向けのプログラミングスクールです。HTMLを学べるWebサービス開発コースなど様々なコースがあり、特にWebサービス開発コース、WebExpertコースでは、HTMLだけでなくCSSも（WebExpertコースではJavaScriptも）体系的に学べます。
GeekSalonではインプットとアウトプットの両方を通じてプログラミングを学ぶことができ、教材を読み進めながら手を動かし、わからない部分は自分専属の担当メンターがついてくれるのでいつでも質問できます。
専属の担当メンター制度以外にも、大学生向けなので年齢が近い受講生が多く、挫折せずに学習をしていくことができます。
HTMLを使ったホームページ制作は、プログラミングの中でも特に取り組みやすく、実際に形になる楽しさを感じられる分野です。最初はわからないことだらけでも、手を動かして少しずつ積み重ねていけば、確実にできることが増えていきます。
学ぶ手段は人それぞれですが、「何か始めてみたい」「自分の可能性を広げたい」という思いがあるなら、その気持ちを大切にしてほしいと思います。独学でも、スクールでも、最初の一歩を踏み出すことで、見える景色はきっと変わっていきます。Webの世界にぜひ飛び込んでみてください！
