HTML初心者向け！ゼロから始めるホームページの作り方完全ガイド

コラム

COLUMN

ホーム
コラム
WEBサイト制作
HTML初心者向け！ゼロから始めるホームページの作り方完全ガイド

HTML初心者向け！ゼロから始めるホームページの作り方完全ガイド

最終更新日：2025年11月11日
RYO ONJI

株式会社CIZRIA代表

Web黎明期より20年以上業界に携わり企業、フリーランスを経て株式会社CIZRIAを設立。700以上のWebサイト制作に携わったことでSEO対策やWebマーケティングへの知識を深める。

「自分のホームページを持ちたいけど、難しそう…」そう思っていませんか？ HTMLを使えば、誰でも簡単にホームページを作ることができます。この記事では、HTMLの基礎知識から、HTMLエディタの使い方、Webサイトの公開方法まで、初心者向けに分かりやすく解説します。この記事を読めば、あなたも自分のホームページを完成させ、公開できるはずです。

Contents
1 HTMLとは？ホームページの基礎
1.1 HTMLの役割
1.2 HTMLの基本構造
1.3 HTMLタグの種類
2 HTMLファイルの作成方法
2.1 テキストエディタの選び方
2.2 HTMLファイルの保存方法
3 CSSの基礎知識
3.1 CSSの役割
3.2 HTMLとCSSの関係
3.3 CSSの記述方法
4 HTMLエディタの紹介
4.1 おすすめのHTMLエディタ
4.2 HTMLエディタの使い方
5 Webサイト公開方法
5.1 レンタルサーバーの選び方
5.2 ドメインの取得方法
5.3 ファイルのアップロード方法
6 SEO対策の基本
6.1 titleタグ、descriptionタグの設定
6.2 見出しタグの最適化
6.3 内部リンク、外部リンクの活用
7 レスポンシブデザインとは？
7.1 スマートフォン対応の重要性
7.2 viewportの設定
8 HTML/CSSを使った簡単なWebサイトの作り方（実践編）
8.1 HTMLで基本的な構造を作成
8.2 CSSでデザインを整える
8.3 完成したWebサイトを公開する
9 まとめ：HTMLでホームページを作って、情報発信をはじめよう！

HTMLとは？ホームページの基礎

ホームページを作りたいと思ったとき、まず最初に学ぶべきなのが「HTML」です。でも、「HTMLって何？」「難しそう…」と感じる方もいるかもしれませんね。

大丈夫です！この記事では、HTMLがどんな役割を持っているのか、そしてホームページの基本的な作り方について、初心者の方にも分かりやすく解説していきます。HTMLの基本をマスターすれば、あなただけのホームページを作る第一歩を踏み出せますよ！

HTMLの役割

HTMLは、「HyperText Markup Language」の略で、簡単に言うと「Webページの内容を伝えるための言葉」です。Webブラウザ（ChromeやSafariなど）は、このHTMLの指示に従って、文字の大きさや色、画像の配置、リンクなどを理解し、画面に表示しています。

例えば、あなたが書いた文章が「これは見出しです」「これは本文です」「この文字はクリックすると別のページに飛びます」といった指示をHTMLで与えることで、ブラウザはそれを正しく解釈し、見栄えの良いWebページとして私たちに見せてくれるのです。

HTMLの基本構造

どんなWebページにも、共通する基本的な「骨組み」があります。これは、全てのHTMLファイルに必ずと言っていいほど含まれるもので、以下のような構造になっています。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ここにページのタイトルが入ります</title> </head> <body>  </body> </html>

それぞれの部分がどのような役割を持っているか見ていきましょう。

<!DOCTYPE html>: このファイルがHTML5という形式で書かれていることをブラウザに伝えます。

<html>: HTML文書全体の始まりと終わりを示します。このタグの中に、Webページの内容がすべて記述されます。

<head>: Webページ自体には直接表示されない、ページに関する情報（文字コードの種類やページのタイトルなど）を記述する部分です。

<meta charset="UTF-8">: 文字化けを防ぐため、文字コードをUTF-8に指定しています。

<title>: ブラウザのタブに表示されるページのタイトルを設定します。

<body>: Webページとして実際に表示されるコンテンツ（文章、画像、リンクなど）を記述する部分です。

この基本構造を理解しておけば、どんなHTMLファイルを見ても、どこに何が書かれているのかが掴みやすくなります。

HTMLタグの種類

HTMLでは、それぞれの要素（見出し、段落、リンクなど）に意味を持たせるために「タグ」を使います。タグは通常、「<タグ名>」のように始まり、「</タグ名>」のように閉じます。ここでは、よく使われる代表的なタグをいくつかご紹介します。

見出しタグ (<h1>～<h6>): ページの見出しを作成します。<h1>が最も大きな見出しで、<h6>が最も小さな見出しです。ページの内容を構造化するために重要です。<h1>これは一番大きな見出しです</h1> <h2>これはその下の見出しです</h2>

段落タグ (<p>): 文章の段落を作成します。文章のまとまりごとにこのタグで囲みます。<p>これは段落1の文章です。</p> <p>これは段落2の文章です。</p>

リンクタグ (<a>): 他のページへのリンクを作成します。href属性でリンク先のURLを指定します。<a href="https://www.example.com">ここをクリックするとExample.comに移動します</a>

画像タグ (<img>): 画像を表示します。¨C22C属性で画像のファイルパスやURLを指定し、¨C23C属性で画像が表示されない場合に代わりに表示されるテキスト（代替テキスト）を指定します。これはSEOやアクセシビリティの観点からも重要です。¨C24C

これらのタグを組み合わせることで、様々な情報を持ったWebページを作成していくことができます。

HTMLファイルの作成方法

ここからは、いよいよ実際にホームページの骨格となるHTMLファイルを作成していきましょう。特別な専門知識や高価なソフトは必要ありません。普段お使いのパソコンに標準で入っている「テキストエディタ」を使って、誰でも簡単にHTMLファイルを作成できます。

テキストエディタの選び方

HTMLファイルを作成するために、まずはテキストエディタを用意しましょう。テキストエディタとは、文章を作成・編集するためのシンプルなソフトウェアのことです。Windowsに標準搭載されている「メモ帳」や、Macに標準搭載されている「テキストエディット」でもHTMLファイルを作成することは可能ですが、より快適に、そして効率的に作業を進めるためには、プログラミング用途に特化した高機能なテキストエディタの利用をおすすめします。

中でも特におすすめなのが、無料でありながら非常に高機能で、世界中の開発者に利用されている「Visual Studio Code（ビジュアルスタジオコード）」です。コードの入力補完機能や、エラーの発見を助けてくれる機能などが充実しており、初心者の方でも直感的に使いやすいのが特徴です。他にも「Sublime Text」や「Atom」といった選択肢もありますが、まずはVisual Studio Codeから試してみるのが良いでしょう。

HTMLファイルの保存方法

HTMLコードの記述が終わったら、その内容をブラウザで表示できるように保存する必要があります。保存する際の最も重要なポイントは、ファイルの拡張子を「.html」とすることです。例えば、「index.html」や「about.html」のように、ファイル名の末尾に「.html」を付けて保存します。

また、文字化けを防ぐために、ファイルの保存時には「文字コード」を「UTF-8」に設定することが推奨されています。多くのテキストエディタでは、保存ダイアログの中に文字コードを選択する項目がありますので、確認してみてください。この設定を行うことで、日本語などの文字が文字化けすることなく、正しく表示されるようになります。

CSSの基礎知識

前のセクションではHTMLの基本構造について学びました。HTMLはWebページの骨組みを作るための言語ですが、これだけでは素っ気ない見た目になってしまいます。

そこで重要になるのがCSS（Cascading Style Sheets）です。CSSは、Webページの見た目（色、フォント、レイアウトなど）を整えるための言語で、HTMLと連携することで、魅力的で分かりやすいWebページを作成することができます。HTMLが「構造」を担当するのに対し、CSSは「見た目」を担当すると考えると、その役割分担が理解しやすいでしょう。

CSSの役割

CSSの主な役割は、Webページのデザインを定義することです。具体的には、文字の色や大きさ、背景色、要素の配置（レイアウト）、余白、枠線など、Webページに表示されるあらゆる要素の見た目を細かく指定できます。例えば、見出しの文字を大きくして色を変えたり、ボタンに影をつけたり、画像を画面の中央に配置したりといったデザインは、すべてCSSによって実現されています。HTMLがコンテンツの構造を定めるのに対し、CSSはその構造に「装飾」を施し、ユーザーにとって見やすく、魅力的なデザインを作り出す役割を担っているのです。

HTMLとCSSの関係

HTMLファイルとCSSファイルは、それぞれ独立して作成されますが、CSSファイルはHTMLファイルにリンクさせることで、そのデザインがHTMLファイルに適用されます。この連携によって、Webページのデザインと構造が分離され、管理がしやすくなります。CSSを適用する方法は主に3つあります。

外部CSS: .css 拡張子のファイルにCSSコードを記述し、HTMLファイルの<head>セクションで<link>タグを使って参照する方法です。最も一般的で推奨される方法であり、複数のHTMLファイルで同じCSSファイルを共有できるため、デザインの一貫性を保ちやすく、修正も容易です。

内部CSS: HTMLファイル内の<head>セクションに<style>タグを使って直接CSSコードを記述する方法です。単一のHTMLファイルにのみ適用したい場合に便利ですが、管理は外部CSSに比べて煩雑になります。

インラインCSS: HTMLタグのstyle属性に直接CSSコードを記述する方法です。特定の要素にのみ一時的にスタイルを適用したい場合に利用されますが、コードの見通しが悪くなり、管理も難しいため、多用は避けるべきです。

一般的には、デザインの保守性や拡張性を考慮して、外部CSSファイルを利用する方法が最も効果的です。

CSSの記述方法

CSSの基本的な記述ルールは、「セレクタ」「プロパティ」「値」の3つの要素で構成されます。これらの要素を組み合わせて、どのHTML要素にどのようなスタイルを適用するかを指定します。

セレクタ: スタイルを適用したいHTML要素を指定します。例えば、h1（見出し1）やp（段落）、body（ページ全体）などがセレクタとして使われます。特定のクラス（.classname）やID（#idname）を指定することも可能です。

プロパティ: 装飾したいスタイル項目を指定します。例えば、color（文字色）、font-size（文字サイズ）、background-color（背景色）、margin（外側の余白）、padding（内側の余白）などがあります。

値: プロパティに適用する具体的な設定値を指定します。例えば、colorプロパティに対して¨C42Cや¨C43C（黒）、¨C44Cプロパティに対して¨C45Cや¨C46Cなどがあります。

これらの要素は、セレクタの後に波括弧 {} で囲み、その中に「プロパティ: 値;」の形式で記述します。各宣言の終わりにはセミコロン ; が必要です。

以下に、簡単なコード例を示します。

/* body全体の文字色を黒、フォントサイズを16ピクセルにする */ body { color: #333; font-size: 16px; } /* h1見出しの文字色を青にする */ h1 { color: blue; } /* クラス名が "highlight" の要素の背景色を黄色にする */ .highlight { background-color: yellow; }

このように、CSSを使うことで、HTMLで作成した構造に、見た目の装飾を自由自在に加えることができます。

HTMLエディタの紹介

前のセクションでHTMLの基本構造とファイルの作成方法について学びました。次に、実際にコードを記述・編集していくためのツール、HTMLエディタについて解説します。コードを書く上で、エディタ選びは非常に重要です。ここでは、初心者の方にもおすすめの無料エディタと、その基本的な使い方をご紹介します。

おすすめのHTMLエディタ

HTMLやCSSのコーディングにおすすめなのが、「Visual Studio Code（以下、VSCode）」です。VSCodeはMicrosoftが開発している高機能なテキストエディタで、無料で利用できるにも関わらず、非常に多くの拡張機能（プラグイン）を追加でき、カスタマイズ性が高いのが特徴です。コードの入力支援やエラーチェック、リアルタイムプレビューなど、開発を効率化する機能が豊富に搭載されています。

もちろん、VSCode以外にも「Sublime Text」や「Atom」といった人気のテキストエディタがありますが、VSCodeは特に情報が多く、初心者でも学習しやすい環境が整っています。そのため、まずはVSCodeから試してみることを強くおすすめします。

HTMLエディタの使い方

ここでは、VSCodeを例に、基本的な使い方を解説します。まず、VSCodeを公式サイトからダウンロードしてインストールしてください。

インストール後、VSCodeを開き、「ファイル」メニューから「新規ファイル」を選択して、新しいファイルを作成します。ファイルを作成したら、<!DOCTYPE html> と入力し始めると、コード補完機能が働き、候補が表示されます。Enterキーを押せば、コードが自動で入力され、入力ミスを防ぐことができます。

HTMLファイルは、拡張子を.htmlとして保存する必要があります。例えば、「index.html」のようにファイル名を付け、「ファイル」メニューの「名前を付けて保存」から保存します。保存する際に、ファイルのエンコーディングを「UTF-8」に設定しておくと、文字化けを防ぐことができます。

VSCodeには、入力中のコードを色分けして表示する「シンタックスハイライト」機能や、入力候補を自動で表示する「コード補完」機能など、コーディングを助ける機能がたくさんあります。これらの機能を活用することで、効率的かつ正確にコードを入力することができます。ぜひ、実際に手を動かして、これらの便利な機能を体験してみてください。

Webサイト公開方法

ここまでHTMLとCSSの基本を学び、簡単なWebサイトを作成しました。いよいよ、この自慢のホームページを世界中の人に見てもらうための「公開」のステップに進みましょう。Webサイトを公開するには、あなたの作ったデータをインターネット上に置くための「サーバー」と、その場所を示す「住所」となる「ドメイン」が必要です。ここでは、初心者の方でも迷わないように、レンタルサーバーの選び方からドメインの取得方法、そして実際にファイルをアップロードする手順までを丁寧に解説していきます。

レンタルサーバーの選び方

Webサイトのデータを保管し、インターネットを通じて閲覧できるようにしてくれるのが「レンタルサーバー」です。たくさんの会社がサービスを提供していますが、初心者の方は以下のポイントを参考に選ぶと良いでしょう。

料金: 月額数百円から利用できるものが多いです。最初は安価なプランから始めて、必要に応じてアップグレードするのがおすすめです。

容量: 作成したWebサイトのファイル（HTML、CSS、画像など）を置くためのスペースです。一般的に、静的なWebサイトであれば数GBもあれば十分ですが、多くの画像や動画を扱う場合はより大容量のプランが必要になります。

サポート体制: 初めてで不安な場合は、日本語でのサポートが充実しているレンタルサーバーを選ぶと安心です。電話やメール、チャットなどで質問できるか確認しておきましょう。

表示速度: サイトの表示速度はユーザー体験に大きく影響します。高速なサーバーを選ぶことで、訪問者が快適にサイトを閲覧できるようになります。

代表的なレンタルサーバーとしては、「エックスサーバー」「ConoHa WING」「さくらのレンタルサーバ」などがあります。それぞれの公式サイトで、料金プランや機能の詳細を確認し、ご自身の目的に合ったものを選んでみてください。

ドメインの取得方法

ドメインは、インターネット上のWebサイトの「住所」のようなものです。例えば、「example.com」や「yourname.jp」といった独自の文字列で、あなたのWebサイトを特定できるようにします。検索エンジンでの信頼性や、サイトのブランディングのためにも、オリジナルのドメインを取得することをおすすめします。

ドメインは、ドメイン取得サービス（レジストラ）を通じて取得します。代表的なサービスには、「お名前.com」「Xserverドメイン」「Google Domains」などがあります。

ドメインを選ぶ際のポイントは以下の通りです。

覚えやすい文字列: 短く、覚えやすく、タイプしやすい文字列を選びましょう。

希望するトップレベルドメイン（TLD）: 「.com」「.jp」「.net」「.org」など、様々なTLDがあります。「.com」は世界的に最も一般的で、「.jp」は日本国内での信頼性が高いとされます。ビジネス用途なら「.com」や「.jp」がおすすめです。

利用規約と料金: ドメインの年間費用や、更新時の料金を確認しましょう。また、ドメインの利用規約も確認しておくと安心です。

希望するドメイン名が利用可能か検索し、利用規約と料金に問題がなければ、サービスを通じて取得手続きを進めてください。通常、数分で取得が完了します。

ファイルのアップロード方法

レンタルサーバーとドメインの準備ができたら、いよいよ作成したWebサイトのファイルをサーバーにアップロードします。この作業には、「FTPソフト」と呼ばれるツールを使うのが一般的です。

FTPソフトとは？

FTP（File Transfer Protocol）ソフトは、あなたのパソコンとレンタルサーバーの間でファイルを送受信するためのソフトウェアです。無料で利用できる高機能なソフトとして、「FileZilla」が有名です。まずはFileZillaをダウンロードしてインストールしましょう。

アップロードの手順（FileZillaの場合）

サーバー情報の確認: レンタルサーバーの管理画面から、FTPアカウント情報（ホスト名、ユーザー名、パスワード、ポート番号）を確認します。

FileZillaに接続: FileZillaを起動し、確認したサーバー情報を入力して接続します。

ファイルの転送: 左側のペインに表示されるあなたのパソコン内のファイル一覧から、Webサイトのファイル（HTML、CSS、画像など）を選択し、右側のペイン（サーバー上）の公開用ディレクトリ（通常は「public_html」や「www」といった名前）にドラッグ＆ドロップします。

これで、あなたのWebサイトのファイルがサーバーにアップロードされ、インターネットを通じてアクセスできるようになります。アップロードが完了したら、ブラウザで自分のドメイン名（例：http://yourdomain.com）にアクセスして、正しく表示されるか確認しましょう。

SEO対策の基本

せっかく作ったホームページも、検索エンジンで見つけてもらえなければ意味がありません。ここでは、検索エンジンからのアクセスを増やすための基本的なSEO（検索エンジン最適化）対策について解説します。特にHTML構造の最適化に焦点を当て、検索エンジンと読者の両方にとって分かりやすいホームページにするためのポイントを、初心者の方にも理解できるように平易な言葉で説明していきます。

titleタグ、descriptionタグの設定

検索結果に表示されるタイトル（titleタグ）と説明文（meta descriptionタグ）は、ユーザーがあなたのページをクリックするかどうかを決める、非常に重要な要素です。この部分が魅力的でないと、せっかく良いコンテンツを作っても見てもらえません。

titleタグは、検索結果のタイトルのほか、ブラウザのタブにも表示されます。ここに、ページの内容を簡潔かつ具体的に表すキーワードを含めましょう。例えば、「HTML初心者向け！ゼロから始めるホームページの作り方完全ガイド」のように、ターゲットとするキーワードと、記事の内容がすぐにわかるような表現が効果的です。

meta descriptionタグは、検索結果のタイトルの下に表示される説明文です。ここでは、タイトルだけでは伝えきれないページの内容を補足し、ユーザーの興味を引くような文章を作成します。こちらもキーワードを自然に含めつつ、クリックしたくなるような魅力的な文章を心がけましょう。文字数は、検索結果で途切れないように、全角120文字程度を目安にするのがおすすめです。

<title>HTML初心者向け！ゼロから始めるホームページの作り方完全ガイド</title> <meta name="description" content="HTMLの基礎からホームページ公開までを初心者向けに解説。エディタの使い方やコード例も掲載！あなただけのホームページを今すぐ作ろう！">

見出しタグの最適化

ホームページの内容を検索エンジンと読者の両方に理解してもらうためには、見出しタグ（<h1>～<h6>）を適切に使うことが不可欠です。見出しタグは、コンテンツの階層構造を示し、情報の重要度を伝える役割があります。

通常、ページに一つだけ使用する<h1>タグには、そのページで最も伝えたい中心的なキーワードを含んだタイトルを設定します。例えば、このセクションであれば「SEO対策の基本」といった見出しがこれにあたります。

その後の<h2>、<h3>といったタグは、コンテンツの章や節の見出しとして使用し、<h1>タグで設定したテーマをさらに細分化していきます。これらの見出しにも、関連するキーワードを自然な形で含めることで、検索エンジンがページの内容をより正確に理解しやすくなります。

読者にとっても、見出しが整理されていることで、コンテンツの全体像を把握しやすくなり、必要な情報を見つけやすくなります。このように、見出しタグを構造的に正しく使用することは、SEOとユーザーエクスペリエンス（UX）の両面で非常に重要です。

内部リンク、外部リンクの活用

ホームページの評価を高め、ユーザーがより多くの情報を得られるようにするためには、リンクを効果的に活用することが大切です。リンクには、サイト内の他のページへ誘導する「内部リンク」と、外部の信頼できるサイトへ誘導する「外部リンク」の2種類があります。

内部リンクは、あなたのサイト内の関連性の高いページ同士を結びつけるものです。例えば、ある商品ページから、その商品の使い方を解説した別のページへリンクを貼る、といった具合です。これにより、ユーザーは興味を持った情報に関連する他のページへスムーズに移動でき、サイト内での滞在時間や回遊率の向上が期待できます。検索エンジンも、内部リンクをたどってサイトの構造を理解し、各ページの重要度を判断します。

外部リンクは、あなたのサイトから外部のサイトへリンクを貼ることです。例えば、専門用語の解説ページや、参考にした情報源などを紹介する場合に利用します。信頼性の高い情報源へのリンクは、あなたのサイトの信頼性向上にも繋がります。ただし、無関係なサイトや低品質なサイトへのリンクは、逆にサイトの評価を下げる可能性があるので注意が必要です。

これらのリンクを適切に設置することで、ユーザーの利便性を高め、検索エンジンからの評価も向上させることができます。

レスポンシブデザインとは？

前のセクションではHTMLエディタについて解説しました。ここでは、作成したWebサイトが様々なデバイスでどのように表示されるかに焦点を当てます。

現代では、多くの人がスマートフォンでWebサイトを閲覧します。そのため、PCだけでなく、様々なデバイスで快適に表示される「レスポンシブデザイン」は必須の知識です。このセクションでは、レスポンシブデザインの重要性、そしてその基本的な設定方法について解説し、読者のWebサイトがスマートフォンでも見やすく表示されるように導きます。

スマートフォン対応の重要性

なぜWebサイトがスマートフォンで見やすい（＝レスポンシブ対応）必要があるのでしょうか？その理由は主に2つあります。1つ目は、ユーザー体験の向上です。スマートフォンでの閲覧者が、文字が小さすぎたり、横スクロールが頻繁に発生したりすると、ストレスを感じてすぐに離脱してしまう可能性があります。レスポンシブデザインに対応することで、どのようなデバイスからアクセスしても、ユーザーは情報を探しやすい、読みやすいと感じるようになり、サイト滞在時間の増加やコンバージョン率の向上につながります。

2つ目は、SEO（検索エンジン最適化）への影響です。Googleは、モバイルフレンドリー（スマートフォンでの表示に最適化されていること）を検索順位の決定要因の一つとしています。レスポンシブデザインは、モバイルフレンドリーを実現するための最も推奨される方法の一つであり、検索結果での表示順位を有利にする効果が期待できます。

viewportの設定

レスポンシブデザインを実現するために最も基本的かつ重要な設定が、HTMLの<head>セクション内にある<meta name='viewport'>タグです。このタグは、ブラウザにページの表示領域（ビューポート）の幅や拡大率を指示するために使用されます。具体的には、以下のように記述します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

このコードの意味は以下の通りです。

width=device-width: ページの幅を、デバイスの画面幅に合わせます。これにより、デバイスごとに適切な幅で表示されるようになります。

initial-scale=1.0: ページが最初に読み込まれたときのズーム倍率を1倍（等倍）に設定します。これにより、意図しない拡大・縮小を防ぎ、デザイン通りの表示を保ちます。

この<meta name='viewport'>タグをHTMLファイルの<head>内に記述することで、CSSで設定したレイアウトが各種デバイスの画面幅に応じて適切に表示されるようになり、レスポンシブデザインの基盤が整います。

HTML/CSSを使った簡単なWebサイトの作り方（実践編）

これまでのセクションで学んだHTMLの基礎知識とCSSの基本を活かして、実際に簡単なWebサイトを作成してみましょう。ここでは、ヘッダー、ナビゲーション、メインコンテンツ、フッターといった基本的な構造を作り、CSSでデザインを整え、最終的にWebサイトとして公開できる形にするまでの手順を、具体的なコード例を交えながら解説します。このセクションを終える頃には、あなた自身のWebサイトが完成し、インターネット上で見られるようになっているはずです。

HTMLで基本的な構造を作成

まずは、Webサイトの骨格となるHTMLを作成します。ここでは、ヘッダー、ナビゲーション、メインコンテンツ、フッターといった基本的な要素を、セマンティックタグ（意味のあるHTMLタグ）を使って記述していきます。これにより、検索エンジンや支援技術にも理解しやすい構造になります。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>私の最初のWebサイト</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>私のWebサイトへようこそ！</h1> <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> <main> <h2>ようこそ！</h2> <p>これは私の初めてのWebサイトです。HTMLとCSSを使って作成しました。</p> <p>ここに、サイトのメインとなるコンテンツを記述していきます。</p> </main> <footer> <p>&copy; 2023 私のWebサイト. All rights reserved.</p> </footer> </body> </html>

上記のコードを index.html という名前で保存してください。<head>内の<link rel="stylesheet" href="style.css">は、後で作成するCSSファイルを読み込むためのものです。

CSSでデザインを整える

次に、作成したHTMLにスタイルを適用し、見た目を整えていきます。ここでは、ヘッダーの背景色、文字の色やサイズ、ナビゲーションの配置などを調整します。先ほど作成した index.html と同じフォルダに style.css という名前で以下のコードを保存してください。

body { font-family: sans-serif; margin: 0; line-height: 1.6; color: #333; } header { background-color: #4CAF50; color: white; padding: 1rem 0; text-align: center; } header h1 { margin: 0; } nav ul { padding: 0; list-style: none; } nav ul li { display: inline; margin: 0 10px; } nav ul li a { color: white; text-decoration: none; } main { padding: 20px; max-width: 800px; margin: 20px auto; background-color: #f4f4f4; border-radius: 8px; } footer { text-align: center; padding: 1rem 0; margin-top: 20px; background-color: #333; color: white; }

このCSSを適用することで、Webサイトに色やレイアウトが加わり、より見やすいデザインになります。

完成したWebサイトを公開する

最後に、作成した index.html ファイルと style.css ファイルをWebサーバーにアップロードして、インターネット上に公開します。これまでのセクションで解説したレンタルサーバーの契約、ドメインの取得、そしてFTPクライアントなどを使ってファイルをアップロードする手順に従ってください。

具体的には、レンタルサーバーのコントロールパネルから提供されるFTPアカウント情報（ホスト名、ユーザー名、パスワード）を使用して、FTPクライアント（例：FileZilla）に接続し、作成した index.html と style.css ファイルを、指定された公開ディレクトリ（通常は public_html や www など）にアップロードします。

アップロードが完了すれば、あなたのドメイン名（例：http://yourdomain.com）にアクセスすることで、世界中のどこからでもあなたのWebサイトを見ることができるようになります。これで、あなた自身のホームページを持つことができました！

まとめ：HTMLでホームページを作って、情報発信をはじめよう！

ここまで、HTMLの基礎から、HTMLエディタの使い方、Webサイトの公開方法、SEO対策、レスポンシブデザインまで、ホームページ作成の全体像を学んできました。

「自分のホームページを持ちたいけど、難しそう…」

そう思っていた方も、この記事を通して、HTMLを使えば意外と身近にホームページづくりを始められることを感じていただけたのではないでしょうか。

HTMLはシンプルな構造でありながら、デザイン性やユーザビリティを追求していくととても奥が深い世界です。
最初の一歩は誰でも踏み出せますが、より魅力的で成果につながるサイトを作るには、専門的な視点やノウハウも欠かせません。

もしホームページ制作で「もっと本格的に仕上げたい」「デザインや集客面も相談したい」と感じたら、ぜひ私たちにご相談ください。
あなたの目的や想いを形にするお手伝いをいたします。