HTMLでのホームページの作り方を完全解説｜初心者向け基本から公開まで
HTMLを使ったホームページの作り方をわかりやすく解説します。ホームページを公開するまでの手順に加え、HTMLの基本もお伝えするので、初心者の方はぜひ参考にしてください。
フランク
フランクはReaddy.aiの創業者です。 10年以上のプロダクト開発経験を持つ元デベロッパーで、優れたデザインに強いこだわりがあります。 初めてスタートアップを立ち上げた当時に「こんなツールがあったらよかった」と感じたものを、自らの手で形にしています。
ホームページを自作するには、HTMLの知識が必要です。
とはいえ、HTMLに対して、なんとなく難しそうなイメージを持っていたり、うまく作れるようになれるのか不安を感じたりする方も多いのではないでしょうか。
この記事では初心者の方でもホームページを作れるように、ホームページの基本的な作成方法やHTMLの書き方をわかりやすく解説します。
HTMLを使わずにホームページを作る方法も紹介していますので、興味のある方はぜひ参考にしてください。
HTMLでホームページを作成する方法
では、HTMLでの制作手順を見ていきましょう。
基本的には「書く道具を用意し」「骨組みを書き」「ファイルを作り」「確認して」「公開する」という5つのステップです。
ステップ1：テキストエディタを準備
まずはコードを書くためのノートを用意します。
Windowsの「メモ帳」やMacの「テキストエディット」でも書けなくはないですが、プロはほとんど使いません。
機能が少なすぎてミスに気づけないからです。
「VS Code (Visual Studio Code)」などの、コード専用の無料エディタをインストールしましょう。
色分け機能や入力補助があり、作業効率が劇的に上がります。
上の画面はVS Codeのダウンロード画面です。
Windows、Linux、Macに対応しています。
実際のダウンロードは下記のページより行ってください。
VS Codeのダウンロードページ
https://code.visualstudio.com/download
ステップ2：HTMLの基本となるタグを記述
エディタを開いたら、ホームページの骨格となるタグを書きます。
HTMLは<html>で全体を囲み、<head>に設定情報を、<body>に実際に画面に映る内容を書く、というのが基本的なルールです。
ステップ3：HTMLファイルを作成
コードを書いたら、保存します。
このとき、ファイルの名前を「index.html」にするのが一般的です。
拡張子を「.txt」ではなく、必ず「.html」にしてください。
これで、パソコンが「これはWebページのファイルだ」と認識してくれます。
ステップ4：ブラウザで表示を確認
保存した「index.html」をダブルクリックしてみてください。
Google ChromeやEdgeなどのブラウザが立ち上がり、あなたが書いた内容が表示されるはずです。
もし文字化けしていたり、レイアウトが崩れていたりしたら、コードに戻って修正します。
この、書いては確認を何百回と繰り返します。
ステップ5：サーバーにアップロード
パソコンの中で見えているだけでは、まだ世界には公開されていません。
レンタルサーバーを契約し、「FTPソフト」という転送ツールを使って、作成したHTMLファイルをインターネット上のサーバー（土地）に送ります。
これでようやく、URLを入力すれば誰でも見られるようになります。
なお、ホームページを公開するには「サーバー」と「ドメイン」の2つが必要です。
サーバーはホームページのデータを置いておく場所、ドメインはインターネット上の住所のようなものです。
多くのレンタルサーバーでは、契約時に独自ドメインを取得できるサービスも用意されています。
初心者の方は、サーバーとドメインをセットで申し込めるプランを選ぶと、設定の手間が少なくスムーズに公開まで進められます。
HTMLの基本的な仕組みと書き方
ここで少し、HTMLとは何かについて触れておきましょう。
HTMLとは「HyperText Markup Language」の略で、パソコンやスマートフォンのブラウザに対して、Webページの「構造」や「意味」を伝えるためのマークアップ言語です。
書き方の基本を学ぶ前に、まずはHTMLファイル全体の「基本構造」を理解することが大切です。
ホームページを作成する際、HTMLは大きく分けて以下のような基本的な構造で作られます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>私のホームページ</h1>
<p>文章を書く場所です。</p>
</body>
</html>
どのHTMLも上記のような基本的な枠組みを持って作られています。それぞれ簡単に、どんな意味で書かれているのか見てみましょう。
<!DOCTYPE html>
この文書はHTMLで書かれていることを宣言しているものになります。
これをブラウザが読むと「これはHTML文章なんだな」と理解した上でその後を読み込みます
<html>〜</html>
HTML文書の始まりから終わりまでを囲む一番外側のタグです。
「lang="ja"」を指定することで、日本語のページであることをブラウザに伝えています。
<head>〜＜/head>
文字化けを防ぐ設定（文字コード）や、ページのタイトルなど、検索エンジンやブラウザ向けの「裏側の情報」を記述する場所です。
ここに書いた内容は実際の画面には表示されません。
<body>〜</body>
見出し、文章、画像など、ユーザーが実際に画面で見る「表側のコンテンツ」をすべてこの中に記述します。
このように全体を定義した上で、<body>タグの中にコンテンツを配置していきます。
書き方の基本は、開始タグと終了タグで文字を「囲む」ことです。
例えば、見出しを作りたい時は<h1>と</h1>で文字を囲みます。
<h1>私のホームページ</h1>
こう書くことで、ブラウザは「これはただの文字じゃなくて、一番大きな見出しなんだな」と理解し、大きく太字で表示してくれます。
よく使うHTMLタグは以下のようなものがあります。
- <h1>〜<h6>：見出し
- <p>：段落（文章のまとまり）
- <br>：改行
- <a>：リンク
- <img>：画像
これら多くの種類のタグを、用途に合わせてパズルのように組み合わせていくのがHTMLコーディングです。
HTMLを書く際は、タグの「入れ子構造（ネスト）」を意識することも重要です。
例えば、<div>の中に<p>を入れる、といったようにタグは重ねて使います。
このとき、開始タグと終了タグの順番を正しく対応させる必要があります。
また、コードを見やすくするために、改行やインデント（字下げ）を整えることも大切です。
このように見やすいコードで記載することはミスの防止にもつながります。
ホームページにデザインを追加する方法
HTMLだけでは、白い背景に黒い文字が並ぶだけの、非常に質素なページになります。
ここに色やレイアウトを加えるのが「CSS（カスケーディング・スタイル・シート）」というスタイルを指定する言語です。
HTMLが「骨組み」なら、CSSは「服」や「メイク」にあたります。
「見出しの文字を赤くしたい」「画像を右側に寄せたい」「要素と要素の間に余白を作りたい」といった見た目の装飾から、現代のWebサイトに欠かせない「スマートフォンやタブレットの画面サイズに合わせてレイアウトを自動的に変更する（レスポンシブ対応）」といった高度な制御まで、デザインに関わるすべてをCSSが担っています。
これらは基本的に専用のCSSファイル（style.cssなど）に記述し、HTMLファイルと紐付ける必要があります。
少しだけ代表的な記述例をご紹介します。
h1 {
font-size: 10px;
color: red;
font-weight: bold;
}
これは、h1タグ（一番大きな見出しタグ）のフォントサイズを10pxにし、文字色を赤で、フォントの太さを太字にするといった指定をしています。
つまり、訪問者にとって見やすく、信頼感のある本格的なホームページを作るには、HTMLで正しい文章構造を作るだけでなく、このようなCSSの専門知識や学習もセットで必要になるということです。
HTMLを使わずにホームページを作成する方法
HTMLとCSSを使ってホームページを作るには、学習するための時間と費用、作成後の調整もすべて担当する手間や時間が必要です。
個人事業主や会社経営者の方には、負担が大きく、費用対効果も低いため適していないのが実情です。
現在は、HTMLのコードを一行も書かずに、画面上の操作だけで直感的にサイトを作れる「ノーコードツール」が主流になりつつあります。
今回はその代表格であり、AIが主力となってホームページを作ってくれるReaddy（リーディー）を使ったホームページの作り方をご紹介します。
ステップ1：Readdyにアカウント登録
まずは公式サイト（https://readdy.ai/ja）にアクセスし、無料でアカウントを作ります。
従来のHTML制作では必須だった、Web上の保管場所である「サーバー」の契約や、ファイルをアップロードするための「FTPソフト」の準備は一切不要です。メールアドレスのみで、すぐに制作環境が整います。
ステップ2：AIに作りたいサイトを伝える
チャット画面で「どのようなホームページを作りたいか」を入力します。
「美容室の集客用」「IT企業のコーポレートサイト」など、業種や目的を伝えるだけでAIが意図を汲み取ってくれます。
もちろん、プロンプト（AIへの指示文）を入力するのが手間に感じる場合は、ページ下部に用意されている豊富なテンプレートから好みのデザインを選んで作り始めることも可能です。
ステップ3：AIが自動生成＆編集
作りたいホームページの内容を入力すると、まず最初にホームページのページ構成（サイトマップ）や、ロゴの有無など簡単な設問が提示されます。
それらに回答していくと、あとは数分待つだけで、裏側でHTMLもCSSも自動で組まれた本格的なWebサイトが完成します。
生成された後の文字の修正や画像の差し替えも、コードを触る必要はありません。スマートフォンを操作するように、変更したい箇所をクリックして直接打ち替えるだけで完了します。
ステップ4：公開
編集が終わったら、画面上の「公開」ボタンを押すだけで、その瞬間に世界中へ向けてホームページが公開されます。
もちろん、企業の公式感や信頼性を高めるために、オリジナルのドメイン（独自のホームページアドレス）を指定することも可能です。
自社専用のURLを設定したい場合は、「カスタムドメインで公開」ボタンから簡単に設定手続きが行えます。
Readdyでホームページを作るメリット
ReaddyのようなAI搭載のノーコードツールを選択することは、単に制作の労力を減らすだけではありません。
事業を成長させるための貴重な時間を確保できるという、経営視点での大きな利点があります。
具体的には、以下の4つのメリットが挙げられます。
- HTML/CSSの学習コストがゼロ
- サーバー設定やセキュリティ対策もお任せ
- スマホ対応（レスポンシブ）が自動
- プロのデザイナーレベルのデザインが手に入る
これらの恩恵により、複雑なコーディング作業やセキュリティ更新といった専門的な管理に頭を悩ませる必要がなくなります。
サイトの立ち上げにかかる初期費用や時間を大幅に削減できるため、浮いたリソースを本来の業務である商品開発やマーケティング、顧客対応に集中させることが可能です。
専門知識がない初心者の方や、スピード感を重視する企業にこそ、強力な選択肢となります。
他のホームページのHTMLを参考にする方法
「プロはどうやって書いているんだろう？」と気になった時は、世の中のホームページの裏側（HTML）を覗いてみることができます。
実際にReaddyのホームページの裏側を各ブラウザごとに覗いてみましょう。
基本的にはどのブラウザも「開発ツール」というものが入っていて、そのツールを使って実際にHTMLがどのように記述されているのか確認することができます。
Google Chromeの場合
ページ上の何もないところで右クリックし、「検証」を選択します。
すると別タブが右側に開き、ズラリとHTMLコードが書かれていることがわかります。
Microsoft Edgeの場合
Chromeと同様に、右クリックメニューから「開発者ツールで調査する」を選びます。
HTMLの見え方はChromeとほぼ同じです。
Safariの場合
Safariの場合も右クリックで「要素の詳細を表示」を選んで表示します。
または、メニューバーの「開発」から「ページのソースを表示」を選びます。
メニューバーに「開発」がない場合は、事前に環境設定で「メニューバーに"開発"メニューを表示」にチェックを入れておく必要があります。
（Macの場合は「Webデベロッパ用の機能を表示」）
以下はSafariでHTMLを表示している画面です。
ChromeやEdgeとは少しだけ見え方が異なっています。
よくある質問
ここでは、ホームページをHTMLで作成する際のよくある質問をまとめました。
HTMLの最初の書き出しは？
最初の書き出しは<!DOCTYPE html>です。
2行目は<html lang="ja">で、3行目からは<head>タグを書くのが決まりになります。
HTMLを書くと何ができるの？
ホームページを作れます。
HTMLとは、専用の言葉（タグ）を使ってホームページの構造を文字で表現するための言語です。
ブラウザはHTMLで記述された内容に従って、Webページを出力します。
スマホでホームページは作れる？
テキストエディタを使えば可能ですが、HTMLで作るのは一般的ではないかもしれません。
スマホの場合は、簡単にホームページ作成ができるReaddyなどの作成サイトやアプリを利用するのがおすすめです。
HTMLの一番最初の要素は？
<html>要素です。
「このHTMLでは日本語を使用します」という意味で、<html lang="ja">と記述するのが基本です。
ホームページは自分で作れるのか？
作れます。
大きく分けて、HTMLを使って自作する方法と、HTMLを使わずにReaddyなどの作成サイトを活用して作る方法の2種類があります。
まとめ
HTMLはシンプルな言語なので、簡単な内容であれば、初心者の方でも問題なくホームページを作れます。
しかし本格的なものを作りたい場合は、ある程度の学習期間が必要になるでしょう。
学習時間を取る余裕がない場合は、HTMLを使わずに作れる作成サイトの利用がおすすめです。
本記事で紹介したReaddyは、素早く思い通りのホームページを作成できるAI搭載のサービスです。
無料で始められるので、ホームページを作ってみたい方はぜひ活用してみてください。
フランク
フランクはReaddy.aiの創業者です。 10年以上のプロダクト開発経験を持つ元デベロッパーで、優れたデザインに強いこだわりがあります。 初めてスタートアップを立ち上げた当時に「こんなツールがあったらよかった」と感じたものを、自らの手で形にしています。