ホームページをHTMLで作成する方法は？初心者にもわかりやすく基本手順などを解説
「イメージ通りのデザインや機能のホームぺージを、ゼロから作り上げたい」
「Web業界で働くために、HTMLの基礎的なスキルを身につけたい」
そう思ってHTMLでのホームページ作成を決心したものの、何から始めればいいか迷っていませんか。
そこで本記事では、Web制作初心者の方や自分でオリジナリティの高いホームページを作りたい個人事業主や店舗オーナー、またとりあえずHTMLを触ってみたい人に向けて、HTMLでホームページを作る方法をわかりやすく解説します。
HTMLとは何か、といった基本概念の理解から、基本構文や具体的な記述の方法まで紹介。本記事を読み終えるころには、実際に手を動かしてHTMLを組むスタートラインに立てるでしょう。
目次
HTMLの基礎知識と構造を初心者向けにわかりやすく解説
HTMLでホームページを作成するために、まずはHTMLが果たす役割や、HTMLの基本ルールについての理解を深めましょう。
- HTMLとは何か？Webページにおける役割を理解しよう
- 基本構文（<!DOCTYPE html>など）とその意味を解説
- Webページの見た目やレイアウトを整えるのはCSS
- Webページに動きをつけるのはJavaScript
HTMLとは何か？Webページにおける役割を理解しよう
HTMLは、1つのWebサイトを構成する要素であるWebページの構造を記述する、マークアップ言語です。なおマークアップ言語は、文の構造や要素に関して記述するために使用します。
例えるならHTMLは、Webページの設計図です。建物を建てる際は、部屋をどう配置するか、窓はどこに、どのくらいのサイズで設置するかといったことを考えながら、設計図を作成します。Webページのどこに見出しを配置するか、どこに本文の段落を入れるか、画像はどの部分に入れるか、といった配置図を作成するために使用するのが、HTMLです。
基本構文（<!DOCTYPE html>など）とその意味を解説
Webページの設計図であるHTMLには、基本ルールがあります。基本構文を覚えることが、HTMLでホームページを作成するための第一歩です。
ここでは、HTMLの基本構文をご紹介します。早速覚えて、ホームページの設計図作りに向けて大きく前進しましょう。
<html>・<head>・<body>タグの使い方と順番について
HTMLで最も基本的であり重要な骨組みとなるのが、<html>・<head>・<body>という3つのタグです。これらのタグにはそれぞれ、役割と記述の順番が決められています。
<html>タグ：全体の始まりと終わり
<html>タグは、HTMLで書かれたWebページ全体の、始まりと終わりを示します。HTMLタグを設置すると、Webブラウザに、「これはHTMLで書かれたWebページです」と伝えられます。
HTMLドキュメントの、<!DOCTYPE html>宣言の直後に記述する、最も外側に設置するタグです。
なお<!DOCTYPE html>宣言とは、Webブラウザに対して「この文書は、HTML5という最新のバージョンのHTMLで書かれています」と伝えるための記述です。例えば、本の表紙に「これは最新の日本語で書かれた本です」と記載されているイメージといえるでしょう。
日本語は頻繁に文法や単語が更新されるわけではないので、不思議に思うかもしれません。しかしHTMLのようなマークアップ言語は、随時更新されます。
そこで冒頭で<!DOCTYPE html>を記述して、最新のHTML（HTML5）というルールで書かれていることを、Webブラウザに伝えるのです。この<!DOCTYPE html>は、HTMLのいわばお約束です。
さらに、<!DOCTYPE html>の次に<html lang=”ja”>を記述することも、忘れてはならないお約束です。これは、「このWebページは日本語で書かれています」と、ブラウザや検索エンジン伝える役割を果たしています。”ja”の部分が、日本語を表す記述です。
日本語で作成するWebサイトでは必ず、<!DOCTYPE html><html lang=”ja”>はワンセット必ず書くものと、覚えましょう。
なお、”ja”の部分は、IETF言語タグ（ISO 639-1 規格） に基づいています。例えば、アメリカ英語を使ったホームページなら、”en”、中国語（簡体）なら”zh-CN”、に変更してください。
<!DOCTYPE html>と<html>タグの具体的な記述方法は、以下の通りです。
<!DOCTYPE html>
<html lang="ja">
・
・
・
</html>
上記例では、最後の部分に</html>が記述されています。</html>は、「このWebページはここまでです。」とブラウザに伝えるタグです。<html>と</ html>はワンセットで使用し、この間にWebページの内容を挟むように記述します。
家を建てる際に「ここからが敷地の始まり」で、「ここが敷地の終わり」という境界線を設置するのが<html>と</ html>タグ、と覚えましょう。
<head>：Webページの「基本情報」と「設定」をまとめて置く
<head>は、Webページ自体には直接表示されないけれど、そのページが正しく機能したり、検索エンジンに認識されたりするために必要な基本情報や設定を、特定の場所に集めておく場所です。
例えるなら、本の巻末にある、本の情報を記した奥付です。本の奥付には、著者名・発行者（所）名・発行年月日・定価などが印字されています。本の内容に、直接かかわる内容ではありません。しかし、本を出版する際に、必ず書かなければならない重要な情報が書かれています。
HTMLの<head>タグも、奥付と同様です。具体的には<head>タグの中には、次のような内容が記述されます。
- ページのタイトル（ブラウザのタブに表示されるもの）
- そのページの内容を検索エンジンに伝えるための説明文
- ページで使われている文字（日本語、英語など）
- 見た目を整えるためのCSSファイル（デザイン設定）の場所
- 動きをつけるためのJavaScriptファイル（プログラム）の場所
上記の情報は、Webページを閲覧するユーザーには、直接表示されることはありません。しかしブラウザが正しくページを表示したり、検索エンジンにWebページの存在、そして内容を伝えたりするために、欠かせない重要な情報です。
<head>タグの中の記述は、ユーザーには見えないけれど、Webページにとって重要な情報が書かれていると覚えてください。
<body>：Webページの「中身」を記述
先ほど解説した<head>タグと逆に、<body>の中に書かれた内容は、全て実際のユーザーの目に触れる情報です。<head>タグが本の奥付なら、<body>タグに記述する内容は本文と表現できます。
<body>タグに記述する内容の具体例を挙げると、次の通りです。
- 文章（見出し、段落、リストなど）
- 画像
- 動画
- リンク
- ボタン
- 表
Webブラウザは、この<body>タグの中身を読み込んで、それをユーザーが閲覧する画面に表示します。あなたが「このWebページに、こんな内容を表示したい」と思ったものは、全て<body>タグの中に記述する、と覚えてください。
<body>の記述例を見ておきましょう。
<body>
<p>こんにちは、私のWebサイトへようこそ！</p>
<p>これは初めてHTMLで作ったホームページです。</p>
<img src="flower.jpg" alt="美しい花の写真" />
<a href="about.html">自己紹介ページはこちら</a>
</body>
上記の場合、ユーザーの画面には以下が表示されます。
こんにちは、私のWebサイトへようこそ！
これは初めてHTMLで作ったホームページです。
美しい花の写真（実際は写真）
自己紹介ページはこちら
h1〜pタグなどの基本的な記述例を紹介
HTMLでホームページを作成する際は、上記の他に、次のタブも使用します。
見出しタグ：<h1>〜<h6>
<h1>〜<h6>は、Webページの見出しを設置したい際に使うタグです。大見出し・中見出し・小見出しといった階層を設定する際に使用します。
基本的なルールは、数字が大きいほど重要度が上がる、というものです。<h1>は、最も重要な大見出しであり、以降、数字が小さくなるほど、階層も重要度も下がります。
なお<h1>タグはページの主題を表すタグです。そのため1つのWebサイトの中で1つだけ使います。<h2>タグ以降は、使用回数に制限はありません。ただし、階層を意識して使います。
例えば、<h2>の中に入るのは<h3>タグ、<h3>の中には<h4>タグが入ります。数字が小さいからといって、<h2>タグの中にいきなり<h4>は入れません。また、<h3>の中に<h2>を配置するのは、誤りです
段落タグ：<p>
<p>は、段落を表すタグです。<p>を設置すると、その中のテキストが一まとまりで表示されます。一つの段落は一つの<p>タグで囲むのが、基本ルールです。なお改行したい場合は、<br>タグを使えます。
<p>タグの記述と表記の例も、見ておきましょう。
記述例
<body>
<h4>HTMLの学習について</h4>
<p>HTMLは、Webページの構造を定義するためのマークアップ言語です。Webコンテンツの「骨組み」を作る役割を担います。
</p>
<p> HTMLを学ぶと、Webブラウザがあなたの情報をどのように表示するかを指示できます。例えば、見出しや段落、画像などの配置が可能です。
</p>
</body>表示例
HTMLの学習について
HTMLは、Webページの構造を定義するためのマークアップ言語です。Webコンテンツの「骨組み」を作る役割を担います。
HTMLを学ぶと、Webブラウザがあなたの情報をどのように表示するかを指示できます。例えば、見出しや段落、画像などの配置が可能です。
閉じタグと空要素の注意点を正しく理解しよう
HTMLを学ぶ上で、混乱しやすいのが「閉じタグ」と「空要素」です。しかし、一度覚えてしまえば、難しくありません。
早速、閉じタグと空要素のルールを確認しましょう。
閉じタグ
閉じタグとは、先に登場した</ html>のことです。開始タグ<html>と閉じタグ</ html>は、セットで使用し、その中に、その要素が持つコンテンツを記述します。なお<html>と</ html>以外の要素も、記述可能です。
開始タグと閉じタグの関係は、箱に例えられます。開始タグで箱のふたが開くので、中にコンテンツを入れ、全て入れたら閉じタグでふたを閉めるイメージです。
なお閉じタグを記述し忘れると、Webページが正しく表示されないほか、予期しないレイアウト崩れが発生する原因になります。HTMLのルールでは、閉じタグが必須とされているものがほとんどです。
HTMLでホームページを作る際は、基本的に「閉じタグが必要」と覚えましょう。
空要素
ただし、全ての要素に閉じタグが必要なわけではなく、例外もあります。これが、空要素です。空要素は、開始タグ<要素>だけで記述します。
閉じタグが不要な空要素の代表例には、次の通りです。
- <img>：画像を挿入
- <br>：改行
- <meta>：メタ情報（WebサイトのHTMLドキュメント内で、ブラウザや検索エンジンに情報を伝えるためのデータ）
- <hr>：区切るための水平線を表示
例えば、文章の途中で改行したい時は、次のように記載します。
記述例
文章の途中で<br>改行したい時に使います。
表示例
文章の途中で
改行したい時に使います。
空要素かそうではないかで迷う時は、ウェブ開発者のためのドキュメント（MDN Web Docs）で確認するとよいでしょう。
Webページの見た目やレイアウトを整えるのはCSS
ここまで紹介したHTMLと切っても切り離せないのが、これからお話しするCSSです。
CSSは、Webページの見た目やレイアウトを整える役割を果たします。
HTMLとCSSは、役割こそ異なりますが、互いに協力し合うことでより見やすいホームページを実現する大切な要素です。
CSSとHTMLの違い・役割について簡潔に解説
先に解説したHTMLとCSSの違いを建物に例えると、次のようになります。
- HTML：建物の骨組みや構造
- CSS：建物の内装や材摠デザイン
HTMLは、各要素が何か、そしてどのように配置されるべきかを記述するために使用します。
しかし私たちが普段目にするWebサイトは、文字の色が黒以外の色だったり、強調するために太字で書かれていたりするでしょう。この見た目の部分を担当するのが、CSSです。
外部CSS・内部CSSの使い方と使い分けを知ろう
HTMLで作ったWebサイトの骨組みをCSSでデザイン装飾するには、HTMLファイルとCSSを連携させなければなりません。
CSSの指示をHTMLの要素に反映させる方法は、いくつかあります。その中でも特に重要なのが、外部CSSと内部CSSです。
- 外部CSS：別のCSSファイルに書いたデザインの指示を、HTMLファイルから読み込むことで連携させる
- 内部CSS：HTMLファイルの<head>タグの中に、直接デザインの指示を書き込む
基本的に推奨されるのは、外部CSSです。特に複数のページで構成されるWebサイトを作る場合や、サイト全体で一貫したデザインを保ちたい場合は、外部CSSを採用しましょう。
なおほとんどのWeb制作の現場では、外部CSSが採用されています。
一方の内部CSSは、特定のHTMLページにだけスタイルを適用したい場合に便利な方法です。
内部CSSなら、CSSファイルが不要を作成、管理する手間がかからないので、便利に思えるでしょう。しかし同じスタイルを複数のページに適用したい場合、それぞれのHTMLファイルに同じCSSを記述しなければなりません。さらに変更があった場合は、全てのファイルを修正する手間がかかります。
CSSの記述量が多くなると、HTMLファイルのサイズが大きくなり、HTMLコードが読みづらくなるのも、デメリットです。
下記の場合は、内部CSSをおすすめします。
- 単一のページで完結するサイト
- 特定のページだけ、他のページとは全く異なるデザインにしたい場合
- CSSの動作を確認したい場合
しかし上記以外の場合は、外部CSSを選んでください。
Webページに動きをつけるのはJavaScript
ホームページを閲覧している時に、次のような体験をしたことはありませんか。
- 画像をタップしたら、拡大表示された
- お問い合わせフォームで入力内容が間違っていたら、エラーメッセージを表示された
- SNSのシェアボタンが設置されている
- Googleマップが表示されている
こういったWebサイト上の動きを作り出すのが、JavaScriptです。
HTMLとCSSが静的な情報を記述するのに対して、JavaScriptは動的なホームページ作りに貢献します。そしてHTMLとCSS、そしてJavaScriptが連携することで、より豊かで使いやすいWeb体験をユーザーに提供できる、ホームページが生まれます。
HTMLでホームページを作成する基本手順を解説
ここまででHTMLの基本要素の説明は完了です。ここからは、具体的にHTMLでホームページを作成し、公開するまでの流れを確認しましょう。
以下が、およその流れです。
- テキストエディタを準備してHTML作成の準備を
- HTMLの基本構造を記述してWebページの土台を整備
- HTMLファイルを保存してChromeやEdgeなどブラウザで表示
- 完成したHTMLをサーバーへアップロードしURLにアクセス
- ホームページを公開
詳しく、見ていきましょう。
テキストエディタを準備してHTML作成の準備をする
HTMLでホームページを作成する際にまず用意するのは、テキストエディタです。Windowsならメモ帳、Macならテキストエディットを用意しましょう。
テキストエディタを準備したら、新しいファイルを開き「index.html」という名前で保存します。これで、HTML作成の準備は完了です。
HTMLが作成しやすいテキストエディタを3つ紹介
先に、windowsやMacのデフォルトのテキストエディタを紹介しました。ただ、初めてHTMLでホームページを作るなら、HTMLを作成しやすい機能を搭載したテキストエディタを利用する方法があります。
ここでは、次の3つのテキストエディタを紹介しましょう。
- Visual Studio Code
- Sublime Text
- EmEditorはWindows
詳しく、見ていきます。
Visual Studio Codeはマイクロソフトが提供する無料のコードエディタ
Visual Studio Codeは、マイクロソフト社が提供するコードエディタです。Windows、Mac、Linuxといった主要なOSに対応します。さらに、無料で利用可能です。
HTMLはもちろんのこと、多くのプログラミング言語に対応可能。高い機能性が魅力です。初心者からプロまで、幅広く使われています。
Sublime Textは高速・軽量で拡張性の高いテキストエディタ
Sublime Textは、起動の速さ、動作の軽快さ、そして拡張機能の豊富さとカスタマイズ性の高さが魅力のテキストエディタです。Windows、Mac、Linuxの主要な3つのOS全てに対応します。
便利な編集機能を搭載しており、効率よくHTMLを記述できます。一部有料機能がありますが、基本的な機能は無料で利用可能です。
EmEditorはWindows専用の高性能テキストエディタ
EmEditorは、大容量ファイルの編集や、高速な検索・置換機能が特徴です。カスタマイズ性が高いので、プログラミング用途以外にも、CSVファイルの編集やログファイルの解析など、幅広い用途で活用されています。
個人使用であれば、30日間の試用期間が終了した後も、無料で使用可能です。機能が制限されるので、まずトライアルで試し、使い心地をチェックしてから導入を検討するとよいでしょう。なおEmEditorは、Windows専用である点にご注意ください。
HTMLの基本構造を記述してWebページの土台を整える
テキストエディタで用意し、「index.html」という名前で保存したファイルを開いたら、先にお伝えしたHTMLの基本構造を記述します。
冒頭に書くのは、HTMLでの記述のお約束である<!DOCTYPE html>です。
次に、Webページ全体の始まりを示す枠組みとなる<html>タグ。Webページには直接表示されないけれど、重要な「基本情報」や「設定」をまとめておく<head>タグの順です。
ここまでできたら、Webページに表示される「中身」を書くために、<body>タグを記述しましょう。
記述例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトルを書く</title>
</head>
<body>
・
・
・←Webページの中身を書く
</body>
</html>
これが、HTMLでホームページを作る場合の土台です。<title></title>と<body></body>の中身を自由にアレンジすれば、オリジナルのWebページの第一歩を踏み出せます。
HTMLファイルを保存してChromeやEdgeなどブラウザで表示する
上記のHTMLの土台にタイトルと<body>タグの中身を記述したら、書いたコードを実際にChromeやEdgeなどのブラウザで見てみましょう。これは、HTMLコードが正しく動いているかを確認する、重要な手順です。
この時、記述したHTMLファイルを保存してから、ブラウザで開きます。
ファイルメニューから、上書き保存または名前を付けて保存を選んでください。保存する際は、拡張子が必ず.htmlになっていることを確認します。例えば、my_first_page.htmlやindex.htmlといった形です。
保存場所は、デスクトップなど、わかりやすい場所であればどこでも構いません。
保存した.htmlファイルをダブルクリックします。すると、通常使っているWebブラウザ（Chrome・Edge・Firefox・Safariなど）が自動的に立ち上がり、あなたが書いたHTMLの内容がWebページとして表示されます。期待した通りに反映されているか、チェックしましょう。
もし間違いがあれば、テキストエディタに戻って修正し、再度保存してブラウザを更新（再読み込み）すると、変更を確認できます。
完成したHTMLをサーバーへアップロードしURLにアクセス
テキストエディタでHTMLファイルを作成し、ブラウザで正しく表示されることを確認したら、いよいよWebページをインターネット上に公開しましょう。
作成したHTMLファイルは、まだあなたのパソコンの中にしかありません。ファイルをサーバーにアップロードすることで、世界中の人がインターネットを通じて、あなたのWebページを見られるようになります。
なおサーバーは、Webページなどの情報を保管し、要求があった時に提供するコンピューターのことです。24時間365日インターネットにつながっています。
ファイルがサーバーにアップロードされると、あなたが取得したドメイン名にアクセスできるようになります。ChromeやEdgeなどのWebブラウザを開いて、アドレスバーに取得したURLを入力したら、Enterキーを押しましょう。
無事にアップロードが成功していれば、あなたが作成したホームページがインターネット上で表示されます。
ホームページを公開するための基本的な流れ
ホームページを公開するための基本的な流れは、4つのステップで進みます。
- ステップ1：Webページの設計図となつHTMLファイルの作成
- ステップ2：CSSファイルでデザインを施す（必須ではないが、見た目をブラッシュアップするなら重要）
- ステップ3：インターネット上の土地と住所となる、サーバーとドメインの契約
- ステップ4：作成したファイルをサーバーにアップロードし、公開
ステップ1のHTMLの記述は、ここまで解説した通りです。
ステップ2のCSSファイルでデザインを施す作業は、必須ではありません。ただ、デザイン性の高いホームページにするなら、style.cssなどの別のファイルにCSSコードを書き、HTMLファイルから読み込む設定をしましょう。
ステップ3では、HTMLファイルをインターネット上に公開するために必須のステップです。サーバーとドメインを契約します。
サーバーは、インターネット上に公開するための土地に例えられます。ドメインは、Webページの住所です。インターネット上に土地を借り、そこで自分のホームページを公開します。
サーバーとドメインは、レンタルサーバー会社と契約することで、取得可能です。ドメインは、誰も使用していなければ、希望するもの（例：yourwebsite.com）をレンタルできます。
ステップ4では、作成したファイルをサーバーにアップロードします。レンタルサーバーの管理画面にあるファイルマネージャー機能を使うと、ファイルをサーバーの指定された場所に送ることが可能です。また、FTPソフトを使う方法もあります。
初心者であれば、レンタルサーバーのファイルマネージャー機能が取り組みやすいでしょう。ブラウザを開いて、レンタルサーバーの管理画面にログインするだけで作業を開始できます。
ただ、アップロードするファイルの数が多い場合や、頻繁にホームページを更新する予定があるなら、FTPソフトを使うことも検討しましょう。
FTPソフトの場合、ソフトをパソコンにインストールし、初期設定する手間がかかるのは、弱点です。しかし、高速で安定した転送ができる強みがあります。大量のファイルをまとめてアップロード・ダウンロードする必要がある場合は、FTPソフトがおすすめです。
Windows・MAC双方のFTPソフトおすすめを紹介
WindowsとMacの両方で使えるFTPソフトのうち、初心者の方におすすめな2つを紹介します。どちらも無料で利用可能です。
FileZillaは、世界的に最も広く使われているFTPソフトの一つです。2ペイン表示、つまり左右に自分のPCのファイルとサーバーのファイルが表示される画面を愛用しているため、直感的にファイルをドラッグ＆ドロップする操作で簡単に転送できます。
日本語に対応しているため、困った時に情報を探しやすいのも強みです。
Cyberduck（サイバーダック）は、シンプルで直感的な操作が可能なFTPソフトです。複雑な設定や難しい操作が不要なので、初心者でもスムーズに利用できるでしょう。
FTPだけでなく、SFTP、WebDAV、さらにAmazon S3、Google Drive、Dropboxなどの各種クラウドストレージへの接続にも対応しています。日本語に対応しているのも、強みです。
より汎用性が高く、多くのユーザーに利用されている安心感を選ぶなら「FileZilla」、よりシンプルな見た目で、直感的な操作感を重視するなら「Cyberduck」がおすすめです。
HTML作成に自信がないならテンプレートを活用してみる
- 難しいコード入力なしでホームページを作成できる
- 比較的短時間でWebページのベースを作成
HTMLは、基本構文を押さえれば、オリジナルのホームページを作成できる便利さが魅力です。
しかし、厳密にルールを守らなければなりません。例えば、半角と全角を記述し間違えたり、半角スペースが入っていたり、記号の種類を間違ったりといった些細なミスがあるだけで、正しく表示できないことは、よくあります。
「緻密な作業は苦手」「何度記述し直しても、正しく表示されない」
こういった悩みがあっても、HTMLのテンプレートを活用すれば、簡単にHTMLでホームページを作成できます。
HTMLのテンプレートとは、あらかじめWebページの基本的な骨組みであるHTMLと、ある程度の見た目を整えるCSSが、セットで用意されたひな形です。テンプレートを使えば、自分で一から全てのコードを書かなくても、比較的短時間でWebページのベースを作成できます。
ここでは定評があり、かつHTMLの記述に自信がない人におすすめの、3つのHTMLテンプレートを紹介します。どんな人におすすめかにも言及していますので、ぜひ参考にしてください。
- Template Party
- HTML5 UP
- 無料ホームページテンプレート.com
詳しく、見ていきましょう。
Template Partyは日本語にも対応しているテンプレートサイト
Template Party（テンプレートパーティー）は、国内最大級の日本語テンプレートサイトです。ビジネス、個人、季節イベントなど、幅広いジャンルのテンプレートが見つかります。
初めてホームページを作る人や、お店、会社、ブログなど、特定のジャンルに合ったデザインを探している人におすすめです。
HTML5 UPは洗練されたデザインの無料テンプレート集
HTML5 UPは、モダンでスタイリッシュなデザインのテンプレートが多いのが強みです。JavaScriptを使った、スムーズな動きやアニメーションが組み込まれているテンプレートもあります。
またテンプレートは、レスポンシブデザイン（スマホ対応）で、どんなデバイスでもきれいに表示されるのもポイントです。デザイン性や最新のトレンドを重視したい人に、おすすめします。
無料ホームページテンプレート.comはシンプルかつミニマル
無料ホームページテンプレート.comは、余分な機能を削ぎ落した、シンプルかつミニマルなテンプレートが魅力です。HTML構造がわかりやすいので、記述方法を学びながらホームページ制作を進められます。
複雑な機能や凝ったデザインよりも、シンプルでコンテンツ内容を際立たせるホームページを作りたい人におすすめです。
公開されているHTMLを確認して学習に活かす方法
HTMLでホームページを作る際、参考になるのが、すでに公開されているサイトです。例えば気に入った構造やデザインのホームページがどのようなHTMLとCSSの記述で組み立てられているのかわかれば、自分のスキルが格段にアップするでしょう。
公開されているサイトのHTMLを確認する際は、Webブラウザのデベロッパーツールを使います。Webブラウザのデベロッパーツールとは、Webサイトの中身を覗き見たり、一時的に修正したりするための、ブラウザに標準で備わっている便利な機能です。
なおデベロッパーツールには、多くの機能があります。HTML学習の段階で特に役立つのは、以下の2つです。
- Elements（要素）タブ：Webページの「骨組み」を見られる
- Styles（スタイル）タブ：Webページの「見た目」を見られる・試せる
Elements（要素）タブには、Webページが、どんなHTMLタグ（<h1>、<p>、<img>など）で、どんな順番で構成されているか、階層的に表示されます。特定のHTMLタグにマウスカーソルを合わせると、ブラウザ上で、そのタグがページのどの部分に対応しているか、色付きでハイライト表示されるので、便利です。「この文章は<p>タグで書かれているのか」と具体的に紐付けながら、理解できます。
またStyles（スタイル）タブには、Elementsタブで選んだHTML要素に対して、どんなCSS（色、文字の大きさ、配置など）が適用されているかが表示されます。
デベロッパーツールは、全ての主要なWebブラウザに標準搭載されています。無料で使える強力な学習・開発ツールですから、ぜひ活用しましょう。
Google ChromeでページのHTMLを確認する手順
Google Chromeでデベロッパーツールを開く手順は、以下の通りです。
- Chromeブラウザで、見たいWebサイトを表示
- Webページの何もない場所で右クリック
- 表示されるメニューから「検証（Inspect）」を選択
この段階で、ブラウザのウィンドウの右側や下側に、デベロッパーツールが開きます。自動的にElements（要素）タブが表示されるので、HTMLのツリーを展開したり閉じたりしながら、気になる部分のコードを見てみましょう。
右側には、そのHTML要素に適用されているCSSのルールが表示されるStyles（スタイル）タブがあります。デザインがどう作られているか知りたい場合は、こちらをチェックしてください。
Microsoft Edge・Safariでの確認方法も紹介
Microsoft Edgeは、Google Chromeと同じChromiumという技術をベースに作られています。そのため基本的に、Google Chromeと全く同じ手順でデベロッパーツールを開き、HTMLを確認可能です。
なおMacのSafariでは、他のブラウザとデベロッパーツールの開き方が少し異なります。初回のみ、開発メニューを有効にする手順が必要です。
開発メニューを有効にする具体的な手順は、次のように進みます。
- Safariブラウザを開く
- メニューバーのSafariをクリックし、「設定（Preferences）」または「環境設定（Settings）」を選択
- 開いたウィンドウで「詳細（Advanced）」タブをクリック
- 一番下にある「メニューバーに”開発”メニューを表示（Show Develop menu in menu bar）」*のチェックボックスをオンにする
- 設定ウィンドウを閉じる
この作業は、初回のみ必要です。次は、デベロッパーツール（Macの場合はWebインスペクタ）を開く手順に移ります。
- Webページの確認したい要素の上で右クリック
- 表示されるメニューから「要素を検証（Inspect Element）」を選択
開いたWebインスペクタウィンドウに、「要素（Elements）」タブにHTML構造が表示されますから、構造をチェックしましょう。
HTMLを使わずにホームページを作る他の方法とは
ここまで、HTMLを使ってホームページを作る手順を紹介してきました。しかし実は、HTMLを使わずにホームページを作る方法が他にもあります。
HTMLを使わずに、そしてより簡単にホームページを作る代表的な2つの方法を見ていきましょう。
WordPressを使えばHTML不要でページ作成が可能
WordPress、CMS（コンテンツ管理システム）と呼ばれるソフトウェアの一種です。専門知識がなくても、Webサイトの作成や更新ができるように、設計されています。
世界中で広く利用されており、ブログから企業のコーポレートサイト、ECサイトまで、あらゆる種類のWebサイトで使われているのが、特徴です。
WordPressには、視覚的に操作できるエディタが備わっています。HTMLでは、どんな見た目のページになるかは、サーバーにアップロードしないとわかりません。しかしWordPressなら、完成したWebページの見た目をそのまま見ながら、直感的に内容を編集できるツールが搭載されています。そのため、HTMLの知識がなくても、ホームページの作成が可能です。
ABLENETレンタルサーバーならWordPressの自動インストールも完備
ABLENETレンタルサーバーは、WordPressの自動インストールを完備したサービスです。ボタン一つで簡単にインストールでき、面倒な設定や専門知識は不要。すぐにブログやホームページを始められます。
またABLENETレンタルサーバーは、最新の高性能サーバーと高速なネットワーク回線に力を入れています。せっかくユーザーがあなたのホームページを訪れても、サイトが重くスムーズにページ移動できなければ、離脱につながるでしょう。
しかしABLENETレンタルサーバーなら、サイトがサクサク表示されるので、訪問者を待たせません。Webサイトの表示速度と安定性を重視する方に、特におすすめです。
＼ 30日返金保証 ／
CMSやホームページ作成ソフトで作成する
CMS（コンテンツ管理システム）には、WordPress以外にもさまざまなものがあります。また、ホームページ作成ソフトを使うのも、よい方法です。
CMSやホームページ作成ソフトの代表的なサービスには、次のようなものがあります。
- Wix（ウィックス）：ドラッグ＆ドロップで直感的にデザインを組み立てられる
- STUDIO（スタジオ）：デザインの自由度が高い
- Jimdo（ジンドゥー）：シンプルな操作でホームページを作成できる
WordPressとHTML手書き作成の違いと特徴を比較
WordPressとHTML手書き作成の違いと特徴を、比較しながら説明します。
- カスタマイズの自由度・拡張性の違いを知ろう
- テーマにない要素を追加したい場合の注意点
- トラブル時に対応できるスキルの重要性を紹介
カスタマイズの自由度・拡張性の違いを知ろう
WordPressをはじめとするCMSやホームページ作成ソフトはいわば、必要な部品（ブロックやパーツ）がすでに用意されており、それらを組み合わせるだけで家が完成する、組立式家具のようなものです。
WordPressの場合は、専門的なプログラミング知識がなくても、迅速にプロのようなWebサイトを構築できます。また専門知識があれば、テーマやプラグインで用意されていないデザインや機能を実現することも可能です。
一方、HTMLでホームページを作る場合は、自分で設計図を書き、装飾もデザインしなければなりません。その分オリジナリティの高いホームページを作れるメリットはあるものの、時間も手間もかかります。また小さな記述ミスが原因で、意図したとおりのサイトにならないことは、珍しくありません。
HTMLの場合、ある程度の知識があれば、デザインや機能の自由度は無限大。完全にオリジナリティの高い細部まで作りこんだホームページを作成できます。しかし知識がない段階では、基本要素を盛り込んだホームページを公開する段階にたどり着くまでに、時間も労力もかかる可能性があります。
テーマにない要素を追加したい場合の注意点
WordPressをはじめとするCMSやホームページ作成ソフトの大きな魅力は、あらかじめ用意されたテーマとブロック・プラグインを組み合わせることで、専門知識なしでサイトを構築できる点にあります。しかしその手軽さには、限界がある点に注意しましょう。
テーマに最初から組み込まれていないデザインや機能を追加しようとすると、途端に難易度が上がります。また、複数のプラグインを導入した場合に、プラグイン同士が競合してうまく機能しないことがある点にも、注意が必要です。カスタムCSSを使う場合は、CSSのコードを直接書き込む必要があります。
こういった場合に役立つのが、HTMLやCSSの知識です。HTMLやCSSの知識の知識は、WordPressで効率よくホームページを作成しながら、オリジナリティを加えてブラッシュアップするために大きく貢献します。
トラブル時に対応できるスキルの重要性を紹介
Webサイトの運営には「急に表示がおかしくなった」「機能が動かなくなった」といったトラブルがつきものです。そんな時、サイトの裏側で動いているHTMLやCSSの基本的な仕組みを理解していると、大きな強みになります。
WordPressの管理画面を見ただけでは解決できない修正や原因究明が必要になった際にも、自分でコードを見ながらの対処が可能です。例えば、表示崩れの原因がCSSの記述ミスだと特定したり、HTMLのタグの閉じ忘れを見つけたりできます。
WordPressで手軽にサイトを立ち上げ、その上でHTMLやCSSの基本を知っておくことで、トラブルへの対応力が格段に上がり、あなたのWebサイト運営に大きな安心感を与えてくれるでしょう。
ABLENET
運営者情報
ABLENET®は株式会社ケイアンドケイコーポレーションが提供するホスティングサービスです。レンタルサーバー（共用サーバー）、VPS（仮想サーバー）、GPUサーバーを提供しています。
Categoryカテゴリー
ブログを開設する10STEP
HP制作の10STEP
ホームページをHTMLで作成する方法は？初心者にもわかりやすく基本手順などを解説
「イメージ通りのデザインや機能のホームぺージを、ゼロから作り上げたい」
「Web業界で働くために、HTMLの基礎的なスキルを身につけたい」
そう思ってHTMLでのホームページ作成を決心したものの、何から始めればいいか迷っていませんか。
そこで本記事では、Web制作初心者の方や自分でオリジナリティの高いホームページを作りたい個人事業主や店舗オーナー、またとりあえずHTMLを触ってみたい人に向けて、HTMLでホームページを作る方法をわかりやすく解説します。
HTMLとは何か、といった基本概念の理解から、基本構文や具体的な記述の方法まで紹介。本記事を読み終えるころには、実際に手を動かしてHTMLを組むスタートラインに立てるでしょう。
目次
HTMLの基礎知識と構造を初心者向けにわかりやすく解説
HTMLでホームページを作成するために、まずはHTMLが果たす役割や、HTMLの基本ルールについての理解を深めましょう。
- HTMLとは何か？Webページにおける役割を理解しよう
- 基本構文（<!DOCTYPE html>など）とその意味を解説
- Webページの見た目やレイアウトを整えるのはCSS
- Webページに動きをつけるのはJavaScript
HTMLとは何か？Webページにおける役割を理解しよう
HTMLは、1つのWebサイトを構成する要素であるWebページの構造を記述する、マークアップ言語です。なおマークアップ言語は、文の構造や要素に関して記述するために使用します。
例えるならHTMLは、Webページの設計図です。建物を建てる際は、部屋をどう配置するか、窓はどこに、どのくらいのサイズで設置するかといったことを考えながら、設計図を作成します。Webページのどこに見出しを配置するか、どこに本文の段落を入れるか、画像はどの部分に入れるか、といった配置図を作成するために使用するのが、HTMLです。
基本構文（<!DOCTYPE html>など）とその意味を解説
Webページの設計図であるHTMLには、基本ルールがあります。基本構文を覚えることが、HTMLでホームページを作成するための第一歩です。
ここでは、HTMLの基本構文をご紹介します。早速覚えて、ホームページの設計図作りに向けて大きく前進しましょう。
<html>・<head>・<body>タグの使い方と順番について
HTMLで最も基本的であり重要な骨組みとなるのが、<html>・<head>・<body>という3つのタグです。これらのタグにはそれぞれ、役割と記述の順番が決められています。
<html>タグ：全体の始まりと終わり
<html>タグは、HTMLで書かれたWebページ全体の、始まりと終わりを示します。HTMLタグを設置すると、Webブラウザに、「これはHTMLで書かれたWebページです」と伝えられます。
HTMLドキュメントの、<!DOCTYPE html>宣言の直後に記述する、最も外側に設置するタグです。
なお<!DOCTYPE html>宣言とは、Webブラウザに対して「この文書は、HTML5という最新のバージョンのHTMLで書かれています」と伝えるための記述です。例えば、本の表紙に「これは最新の日本語で書かれた本です」と記載されているイメージといえるでしょう。
日本語は頻繁に文法や単語が更新されるわけではないので、不思議に思うかもしれません。しかしHTMLのようなマークアップ言語は、随時更新されます。
そこで冒頭で<!DOCTYPE html>を記述して、最新のHTML（HTML5）というルールで書かれていることを、Webブラウザに伝えるのです。この<!DOCTYPE html>は、HTMLのいわばお約束です。
さらに、<!DOCTYPE html>の次に<html lang=”ja”>を記述することも、忘れてはならないお約束です。これは、「このWebページは日本語で書かれています」と、ブラウザや検索エンジン伝える役割を果たしています。”ja”の部分が、日本語を表す記述です。
日本語で作成するWebサイトでは必ず、<!DOCTYPE html><html lang=”ja”>はワンセット必ず書くものと、覚えましょう。
なお、”ja”の部分は、IETF言語タグ（ISO 639-1 規格） に基づいています。例えば、アメリカ英語を使ったホームページなら、”en”、中国語（簡体）なら”zh-CN”、に変更してください。
<!DOCTYPE html>と<html>タグの具体的な記述方法は、以下の通りです。
<!DOCTYPE html>
<html lang="ja">
・
・
・
</html>
上記例では、最後の部分に</html>が記述されています。</html>は、「このWebページはここまでです。」とブラウザに伝えるタグです。<html>と</ html>はワンセットで使用し、この間にWebページの内容を挟むように記述します。
家を建てる際に「ここからが敷地の始まり」で、「ここが敷地の終わり」という境界線を設置するのが<html>と</ html>タグ、と覚えましょう。
<head>：Webページの「基本情報」と「設定」をまとめて置く
<head>は、Webページ自体には直接表示されないけれど、そのページが正しく機能したり、検索エンジンに認識されたりするために必要な基本情報や設定を、特定の場所に集めておく場所です。
例えるなら、本の巻末にある、本の情報を記した奥付です。本の奥付には、著者名・発行者（所）名・発行年月日・定価などが印字されています。本の内容に、直接かかわる内容ではありません。しかし、本を出版する際に、必ず書かなければならない重要な情報が書かれています。
HTMLの<head>タグも、奥付と同様です。具体的には<head>タグの中には、次のような内容が記述されます。
- ページのタイトル（ブラウザのタブに表示されるもの）
- そのページの内容を検索エンジンに伝えるための説明文
- ページで使われている文字（日本語、英語など）
- 見た目を整えるためのCSSファイル（デザイン設定）の場所
- 動きをつけるためのJavaScriptファイル（プログラム）の場所
上記の情報は、Webページを閲覧するユーザーには、直接表示されることはありません。しかしブラウザが正しくページを表示したり、検索エンジンにWebページの存在、そして内容を伝えたりするために、欠かせない重要な情報です。
<head>タグの中の記述は、ユーザーには見えないけれど、Webページにとって重要な情報が書かれていると覚えてください。
<body>：Webページの「中身」を記述
先ほど解説した<head>タグと逆に、<body>の中に書かれた内容は、全て実際のユーザーの目に触れる情報です。<head>タグが本の奥付なら、<body>タグに記述する内容は本文と表現できます。
<body>タグに記述する内容の具体例を挙げると、次の通りです。
- 文章（見出し、段落、リストなど）
- 画像
- 動画
- リンク
- ボタン
- 表
Webブラウザは、この<body>タグの中身を読み込んで、それをユーザーが閲覧する画面に表示します。あなたが「このWebページに、こんな内容を表示したい」と思ったものは、全て<body>タグの中に記述する、と覚えてください。
<body>の記述例を見ておきましょう。
<body>
<p>こんにちは、私のWebサイトへようこそ！</p>
<p>これは初めてHTMLで作ったホームページです。</p>
<img src="flower.jpg" alt="美しい花の写真" />
<a href="about.html">自己紹介ページはこちら</a>
</body>
上記の場合、ユーザーの画面には以下が表示されます。
こんにちは、私のWebサイトへようこそ！
これは初めてHTMLで作ったホームページです。
美しい花の写真（実際は写真）
自己紹介ページはこちら
h1〜pタグなどの基本的な記述例を紹介
HTMLでホームページを作成する際は、上記の他に、次のタブも使用します。
見出しタグ：<h1>〜<h6>
<h1>〜<h6>は、Webページの見出しを設置したい際に使うタグです。大見出し・中見出し・小見出しといった階層を設定する際に使用します。
基本的なルールは、数字が大きいほど重要度が上がる、というものです。<h1>は、最も重要な大見出しであり、以降、数字が小さくなるほど、階層も重要度も下がります。
なお<h1>タグはページの主題を表すタグです。そのため1つのWebサイトの中で1つだけ使います。<h2>タグ以降は、使用回数に制限はありません。ただし、階層を意識して使います。
例えば、<h2>の中に入るのは<h3>タグ、<h3>の中には<h4>タグが入ります。数字が小さいからといって、<h2>タグの中にいきなり<h4>は入れません。また、<h3>の中に<h2>を配置するのは、誤りです
段落タグ：<p>
<p>は、段落を表すタグです。<p>を設置すると、その中のテキストが一まとまりで表示されます。一つの段落は一つの<p>タグで囲むのが、基本ルールです。なお改行したい場合は、<br>タグを使えます。
<p>タグの記述と表記の例も、見ておきましょう。
記述例
<body>
<h4>HTMLの学習について</h4>
<p>HTMLは、Webページの構造を定義するためのマークアップ言語です。Webコンテンツの「骨組み」を作る役割を担います。
</p>
<p> HTMLを学ぶと、Webブラウザがあなたの情報をどのように表示するかを指示できます。例えば、見出しや段落、画像などの配置が可能です。
</p>
</body>表示例
HTMLの学習について
HTMLは、Webページの構造を定義するためのマークアップ言語です。Webコンテンツの「骨組み」を作る役割を担います。
HTMLを学ぶと、Webブラウザがあなたの情報をどのように表示するかを指示できます。例えば、見出しや段落、画像などの配置が可能です。
閉じタグと空要素の注意点を正しく理解しよう
HTMLを学ぶ上で、混乱しやすいのが「閉じタグ」と「空要素」です。しかし、一度覚えてしまえば、難しくありません。
早速、閉じタグと空要素のルールを確認しましょう。
閉じタグ
閉じタグとは、先に登場した</ html>のことです。開始タグ<html>と閉じタグ</ html>は、セットで使用し、その中に、その要素が持つコンテンツを記述します。なお<html>と</ html>以外の要素も、記述可能です。
開始タグと閉じタグの関係は、箱に例えられます。開始タグで箱のふたが開くので、中にコンテンツを入れ、全て入れたら閉じタグでふたを閉めるイメージです。
なお閉じタグを記述し忘れると、Webページが正しく表示されないほか、予期しないレイアウト崩れが発生する原因になります。HTMLのルールでは、閉じタグが必須とされているものがほとんどです。
HTMLでホームページを作る際は、基本的に「閉じタグが必要」と覚えましょう。
空要素
ただし、全ての要素に閉じタグが必要なわけではなく、例外もあります。これが、空要素です。空要素は、開始タグ<要素>だけで記述します。
閉じタグが不要な空要素の代表例には、次の通りです。
- <img>：画像を挿入
- <br>：改行
- <meta>：メタ情報（WebサイトのHTMLドキュメント内で、ブラウザや検索エンジンに情報を伝えるためのデータ）
- <hr>：区切るための水平線を表示
例えば、文章の途中で改行したい時は、次のように記載します。
記述例
文章の途中で<br>改行したい時に使います。
表示例
文章の途中で
改行したい時に使います。
空要素かそうではないかで迷う時は、ウェブ開発者のためのドキュメント（MDN Web Docs）で確認するとよいでしょう。
Webページの見た目やレイアウトを整えるのはCSS
ここまで紹介したHTMLと切っても切り離せないのが、これからお話しするCSSです。
CSSは、Webページの見た目やレイアウトを整える役割を果たします。
HTMLとCSSは、役割こそ異なりますが、互いに協力し合うことでより見やすいホームページを実現する大切な要素です。
CSSとHTMLの違い・役割について簡潔に解説
先に解説したHTMLとCSSの違いを建物に例えると、次のようになります。
- HTML：建物の骨組みや構造
- CSS：建物の内装や材摠デザイン
HTMLは、各要素が何か、そしてどのように配置されるべきかを記述するために使用します。
しかし私たちが普段目にするWebサイトは、文字の色が黒以外の色だったり、強調するために太字で書かれていたりするでしょう。この見た目の部分を担当するのが、CSSです。
外部CSS・内部CSSの使い方と使い分けを知ろう
HTMLで作ったWebサイトの骨組みをCSSでデザイン装飾するには、HTMLファイルとCSSを連携させなければなりません。
CSSの指示をHTMLの要素に反映させる方法は、いくつかあります。その中でも特に重要なのが、外部CSSと内部CSSです。
- 外部CSS：別のCSSファイルに書いたデザインの指示を、HTMLファイルから読み込むことで連携させる
- 内部CSS：HTMLファイルの<head>タグの中に、直接デザインの指示を書き込む
基本的に推奨されるのは、外部CSSです。特に複数のページで構成されるWebサイトを作る場合や、サイト全体で一貫したデザインを保ちたい場合は、外部CSSを採用しましょう。
なおほとんどのWeb制作の現場では、外部CSSが採用されています。
一方の内部CSSは、特定のHTMLページにだけスタイルを適用したい場合に便利な方法です。
内部CSSなら、CSSファイルが不要を作成、管理する手間がかからないので、便利に思えるでしょう。しかし同じスタイルを複数のページに適用したい場合、それぞれのHTMLファイルに同じCSSを記述しなければなりません。さらに変更があった場合は、全てのファイルを修正する手間がかかります。
CSSの記述量が多くなると、HTMLファイルのサイズが大きくなり、HTMLコードが読みづらくなるのも、デメリットです。
下記の場合は、内部CSSをおすすめします。
- 単一のページで完結するサイト
- 特定のページだけ、他のページとは全く異なるデザインにしたい場合
- CSSの動作を確認したい場合
しかし上記以外の場合は、外部CSSを選んでください。
Webページに動きをつけるのはJavaScript
ホームページを閲覧している時に、次のような体験をしたことはありませんか。
- 画像をタップしたら、拡大表示された
- お問い合わせフォームで入力内容が間違っていたら、エラーメッセージを表示された
- SNSのシェアボタンが設置されている
- Googleマップが表示されている
こういったWebサイト上の動きを作り出すのが、JavaScriptです。
HTMLとCSSが静的な情報を記述するのに対して、JavaScriptは動的なホームページ作りに貢献します。そしてHTMLとCSS、そしてJavaScriptが連携することで、より豊かで使いやすいWeb体験をユーザーに提供できる、ホームページが生まれます。
HTMLでホームページを作成する基本手順を解説
ここまででHTMLの基本要素の説明は完了です。ここからは、具体的にHTMLでホームページを作成し、公開するまでの流れを確認しましょう。
以下が、およその流れです。
- テキストエディタを準備してHTML作成の準備を
- HTMLの基本構造を記述してWebページの土台を整備
- HTMLファイルを保存してChromeやEdgeなどブラウザで表示
- 完成したHTMLをサーバーへアップロードしURLにアクセス
- ホームページを公開
詳しく、見ていきましょう。
テキストエディタを準備してHTML作成の準備をする
HTMLでホームページを作成する際にまず用意するのは、テキストエディタです。Windowsならメモ帳、Macならテキストエディットを用意しましょう。
テキストエディタを準備したら、新しいファイルを開き「index.html」という名前で保存します。これで、HTML作成の準備は完了です。
HTMLが作成しやすいテキストエディタを3つ紹介
先に、windowsやMacのデフォルトのテキストエディタを紹介しました。ただ、初めてHTMLでホームページを作るなら、HTMLを作成しやすい機能を搭載したテキストエディタを利用する方法があります。
ここでは、次の3つのテキストエディタを紹介しましょう。
- Visual Studio Code
- Sublime Text
- EmEditorはWindows
詳しく、見ていきます。
Visual Studio Codeはマイクロソフトが提供する無料のコードエディタ
Visual Studio Codeは、マイクロソフト社が提供するコードエディタです。Windows、Mac、Linuxといった主要なOSに対応します。さらに、無料で利用可能です。
HTMLはもちろんのこと、多くのプログラミング言語に対応可能。高い機能性が魅力です。初心者からプロまで、幅広く使われています。
Sublime Textは高速・軽量で拡張性の高いテキストエディタ
Sublime Textは、起動の速さ、動作の軽快さ、そして拡張機能の豊富さとカスタマイズ性の高さが魅力のテキストエディタです。Windows、Mac、Linuxの主要な3つのOS全てに対応します。
便利な編集機能を搭載しており、効率よくHTMLを記述できます。一部有料機能がありますが、基本的な機能は無料で利用可能です。
EmEditorはWindows専用の高性能テキストエディタ
EmEditorは、大容量ファイルの編集や、高速な検索・置換機能が特徴です。カスタマイズ性が高いので、プログラミング用途以外にも、CSVファイルの編集やログファイルの解析など、幅広い用途で活用されています。
個人使用であれば、30日間の試用期間が終了した後も、無料で使用可能です。機能が制限されるので、まずトライアルで試し、使い心地をチェックしてから導入を検討するとよいでしょう。なおEmEditorは、Windows専用である点にご注意ください。
HTMLの基本構造を記述してWebページの土台を整える
テキストエディタで用意し、「index.html」という名前で保存したファイルを開いたら、先にお伝えしたHTMLの基本構造を記述します。
冒頭に書くのは、HTMLでの記述のお約束である<!DOCTYPE html>です。
次に、Webページ全体の始まりを示す枠組みとなる<html>タグ。Webページには直接表示されないけれど、重要な「基本情報」や「設定」をまとめておく<head>タグの順です。
ここまでできたら、Webページに表示される「中身」を書くために、<body>タグを記述しましょう。
記述例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトルを書く</title>
</head>
<body>
・
・
・←Webページの中身を書く
</body>
</html>
これが、HTMLでホームページを作る場合の土台です。<title></title>と<body></body>の中身を自由にアレンジすれば、オリジナルのWebページの第一歩を踏み出せます。
HTMLファイルを保存してChromeやEdgeなどブラウザで表示する
上記のHTMLの土台にタイトルと<body>タグの中身を記述したら、書いたコードを実際にChromeやEdgeなどのブラウザで見てみましょう。これは、HTMLコードが正しく動いているかを確認する、重要な手順です。
この時、記述したHTMLファイルを保存してから、ブラウザで開きます。
ファイルメニューから、上書き保存または名前を付けて保存を選んでください。保存する際は、拡張子が必ず.htmlになっていることを確認します。例えば、my_first_page.htmlやindex.htmlといった形です。
保存場所は、デスクトップなど、わかりやすい場所であればどこでも構いません。
保存した.htmlファイルをダブルクリックします。すると、通常使っているWebブラウザ（Chrome・Edge・Firefox・Safariなど）が自動的に立ち上がり、あなたが書いたHTMLの内容がWebページとして表示されます。期待した通りに反映されているか、チェックしましょう。
もし間違いがあれば、テキストエディタに戻って修正し、再度保存してブラウザを更新（再読み込み）すると、変更を確認できます。
完成したHTMLをサーバーへアップロードしURLにアクセス
テキストエディタでHTMLファイルを作成し、ブラウザで正しく表示されることを確認したら、いよいよWebページをインターネット上に公開しましょう。
作成したHTMLファイルは、まだあなたのパソコンの中にしかありません。ファイルをサーバーにアップロードすることで、世界中の人がインターネットを通じて、あなたのWebページを見られるようになります。
なおサーバーは、Webページなどの情報を保管し、要求があった時に提供するコンピューターのことです。24時間365日インターネットにつながっています。
ファイルがサーバーにアップロードされると、あなたが取得したドメイン名にアクセスできるようになります。ChromeやEdgeなどのWebブラウザを開いて、アドレスバーに取得したURLを入力したら、Enterキーを押しましょう。
無事にアップロードが成功していれば、あなたが作成したホームページがインターネット上で表示されます。
ホームページを公開するための基本的な流れ
ホームページを公開するための基本的な流れは、4つのステップで進みます。
- ステップ1：Webページの設計図となつHTMLファイルの作成
- ステップ2：CSSファイルでデザインを施す（必須ではないが、見た目をブラッシュアップするなら重要）
- ステップ3：インターネット上の土地と住所となる、サーバーとドメインの契約
- ステップ4：作成したファイルをサーバーにアップロードし、公開
ステップ1のHTMLの記述は、ここまで解説した通りです。
ステップ2のCSSファイルでデザインを施す作業は、必須ではありません。ただ、デザイン性の高いホームページにするなら、style.cssなどの別のファイルにCSSコードを書き、HTMLファイルから読み込む設定をしましょう。
ステップ3では、HTMLファイルをインターネット上に公開するために必須のステップです。サーバーとドメインを契約します。
サーバーは、インターネット上に公開するための土地に例えられます。ドメインは、Webページの住所です。インターネット上に土地を借り、そこで自分のホームページを公開します。
サーバーとドメインは、レンタルサーバー会社と契約することで、取得可能です。ドメインは、誰も使用していなければ、希望するもの（例：yourwebsite.com）をレンタルできます。
ステップ4では、作成したファイルをサーバーにアップロードします。レンタルサーバーの管理画面にあるファイルマネージャー機能を使うと、ファイルをサーバーの指定された場所に送ることが可能です。また、FTPソフトを使う方法もあります。
初心者であれば、レンタルサーバーのファイルマネージャー機能が取り組みやすいでしょう。ブラウザを開いて、レンタルサーバーの管理画面にログインするだけで作業を開始できます。
ただ、アップロードするファイルの数が多い場合や、頻繁にホームページを更新する予定があるなら、FTPソフトを使うことも検討しましょう。
FTPソフトの場合、ソフトをパソコンにインストールし、初期設定する手間がかかるのは、弱点です。しかし、高速で安定した転送ができる強みがあります。大量のファイルをまとめてアップロード・ダウンロードする必要がある場合は、FTPソフトがおすすめです。
Windows・MAC双方のFTPソフトおすすめを紹介
WindowsとMacの両方で使えるFTPソフトのうち、初心者の方におすすめな2つを紹介します。どちらも無料で利用可能です。
FileZillaは、世界的に最も広く使われているFTPソフトの一つです。2ペイン表示、つまり左右に自分のPCのファイルとサーバーのファイルが表示される画面を愛用しているため、直感的にファイルをドラッグ＆ドロップする操作で簡単に転送できます。
日本語に対応しているため、困った時に情報を探しやすいのも強みです。
Cyberduck（サイバーダック）は、シンプルで直感的な操作が可能なFTPソフトです。複雑な設定や難しい操作が不要なので、初心者でもスムーズに利用できるでしょう。
FTPだけでなく、SFTP、WebDAV、さらにAmazon S3、Google Drive、Dropboxなどの各種クラウドストレージへの接続にも対応しています。日本語に対応しているのも、強みです。
より汎用性が高く、多くのユーザーに利用されている安心感を選ぶなら「FileZilla」、よりシンプルな見た目で、直感的な操作感を重視するなら「Cyberduck」がおすすめです。
HTML作成に自信がないならテンプレートを活用してみる
- 難しいコード入力なしでホームページを作成できる
- 比較的短時間でWebページのベースを作成
HTMLは、基本構文を押さえれば、オリジナルのホームページを作成できる便利さが魅力です。
しかし、厳密にルールを守らなければなりません。例えば、半角と全角を記述し間違えたり、半角スペースが入っていたり、記号の種類を間違ったりといった些細なミスがあるだけで、正しく表示できないことは、よくあります。
「緻密な作業は苦手」「何度記述し直しても、正しく表示されない」
こういった悩みがあっても、HTMLのテンプレートを活用すれば、簡単にHTMLでホームページを作成できます。
HTMLのテンプレートとは、あらかじめWebページの基本的な骨組みであるHTMLと、ある程度の見た目を整えるCSSが、セットで用意されたひな形です。テンプレートを使えば、自分で一から全てのコードを書かなくても、比較的短時間でWebページのベースを作成できます。
ここでは定評があり、かつHTMLの記述に自信がない人におすすめの、3つのHTMLテンプレートを紹介します。どんな人におすすめかにも言及していますので、ぜひ参考にしてください。
- Template Party
- HTML5 UP
- 無料ホームページテンプレート.com
詳しく、見ていきましょう。
Template Partyは日本語にも対応しているテンプレートサイト
Template Party（テンプレートパーティー）は、国内最大級の日本語テンプレートサイトです。ビジネス、個人、季節イベントなど、幅広いジャンルのテンプレートが見つかります。
初めてホームページを作る人や、お店、会社、ブログなど、特定のジャンルに合ったデザインを探している人におすすめです。
HTML5 UPは洗練されたデザインの無料テンプレート集
HTML5 UPは、モダンでスタイリッシュなデザインのテンプレートが多いのが強みです。JavaScriptを使った、スムーズな動きやアニメーションが組み込まれているテンプレートもあります。
またテンプレートは、レスポンシブデザイン（スマホ対応）で、どんなデバイスでもきれいに表示されるのもポイントです。デザイン性や最新のトレンドを重視したい人に、おすすめします。
無料ホームページテンプレート.comはシンプルかつミニマル
無料ホームページテンプレート.comは、余分な機能を削ぎ落した、シンプルかつミニマルなテンプレートが魅力です。HTML構造がわかりやすいので、記述方法を学びながらホームページ制作を進められます。
複雑な機能や凝ったデザインよりも、シンプルでコンテンツ内容を際立たせるホームページを作りたい人におすすめです。
公開されているHTMLを確認して学習に活かす方法
HTMLでホームページを作る際、参考になるのが、すでに公開されているサイトです。例えば気に入った構造やデザインのホームページがどのようなHTMLとCSSの記述で組み立てられているのかわかれば、自分のスキルが格段にアップするでしょう。
公開されているサイトのHTMLを確認する際は、Webブラウザのデベロッパーツールを使います。Webブラウザのデベロッパーツールとは、Webサイトの中身を覗き見たり、一時的に修正したりするための、ブラウザに標準で備わっている便利な機能です。
なおデベロッパーツールには、多くの機能があります。HTML学習の段階で特に役立つのは、以下の2つです。
- Elements（要素）タブ：Webページの「骨組み」を見られる
- Styles（スタイル）タブ：Webページの「見た目」を見られる・試せる
Elements（要素）タブには、Webページが、どんなHTMLタグ（<h1>、<p>、<img>など）で、どんな順番で構成されているか、階層的に表示されます。特定のHTMLタグにマウスカーソルを合わせると、ブラウザ上で、そのタグがページのどの部分に対応しているか、色付きでハイライト表示されるので、便利です。「この文章は<p>タグで書かれているのか」と具体的に紐付けながら、理解できます。
またStyles（スタイル）タブには、Elementsタブで選んだHTML要素に対して、どんなCSS（色、文字の大きさ、配置など）が適用されているかが表示されます。
デベロッパーツールは、全ての主要なWebブラウザに標準搭載されています。無料で使える強力な学習・開発ツールですから、ぜひ活用しましょう。
Google ChromeでページのHTMLを確認する手順
Google Chromeでデベロッパーツールを開く手順は、以下の通りです。
- Chromeブラウザで、見たいWebサイトを表示
- Webページの何もない場所で右クリック
- 表示されるメニューから「検証（Inspect）」を選択
この段階で、ブラウザのウィンドウの右側や下側に、デベロッパーツールが開きます。自動的にElements（要素）タブが表示されるので、HTMLのツリーを展開したり閉じたりしながら、気になる部分のコードを見てみましょう。
右側には、そのHTML要素に適用されているCSSのルールが表示されるStyles（スタイル）タブがあります。デザインがどう作られているか知りたい場合は、こちらをチェックしてください。
Microsoft Edge・Safariでの確認方法も紹介
Microsoft Edgeは、Google Chromeと同じChromiumという技術をベースに作られています。そのため基本的に、Google Chromeと全く同じ手順でデベロッパーツールを開き、HTMLを確認可能です。
なおMacのSafariでは、他のブラウザとデベロッパーツールの開き方が少し異なります。初回のみ、開発メニューを有効にする手順が必要です。
開発メニューを有効にする具体的な手順は、次のように進みます。
- Safariブラウザを開く
- メニューバーのSafariをクリックし、「設定（Preferences）」または「環境設定（Settings）」を選択
- 開いたウィンドウで「詳細（Advanced）」タブをクリック
- 一番下にある「メニューバーに”開発”メニューを表示（Show Develop menu in menu bar）」*のチェックボックスをオンにする
- 設定ウィンドウを閉じる
この作業は、初回のみ必要です。次は、デベロッパーツール（Macの場合はWebインスペクタ）を開く手順に移ります。
- Webページの確認したい要素の上で右クリック
- 表示されるメニューから「要素を検証（Inspect Element）」を選択
開いたWebインスペクタウィンドウに、「要素（Elements）」タブにHTML構造が表示されますから、構造をチェックしましょう。
HTMLを使わずにホームページを作る他の方法とは
ここまで、HTMLを使ってホームページを作る手順を紹介してきました。しかし実は、HTMLを使わずにホームページを作る方法が他にもあります。
HTMLを使わずに、そしてより簡単にホームページを作る代表的な2つの方法を見ていきましょう。
WordPressを使えばHTML不要でページ作成が可能
WordPress、CMS（コンテンツ管理システム）と呼ばれるソフトウェアの一種です。専門知識がなくても、Webサイトの作成や更新ができるように、設計されています。
世界中で広く利用されており、ブログから企業のコーポレートサイト、ECサイトまで、あらゆる種類のWebサイトで使われているのが、特徴です。
WordPressには、視覚的に操作できるエディタが備わっています。HTMLでは、どんな見た目のページになるかは、サーバーにアップロードしないとわかりません。しかしWordPressなら、完成したWebページの見た目をそのまま見ながら、直感的に内容を編集できるツールが搭載されています。そのため、HTMLの知識がなくても、ホームページの作成が可能です。
ABLENETレンタルサーバーならWordPressの自動インストールも完備
ABLENETレンタルサーバーは、WordPressの自動インストールを完備したサービスです。ボタン一つで簡単にインストールでき、面倒な設定や専門知識は不要。すぐにブログやホームページを始められます。
またABLENETレンタルサーバーは、最新の高性能サーバーと高速なネットワーク回線に力を入れています。せっかくユーザーがあなたのホームページを訪れても、サイトが重くスムーズにページ移動できなければ、離脱につながるでしょう。
しかしABLENETレンタルサーバーなら、サイトがサクサク表示されるので、訪問者を待たせません。Webサイトの表示速度と安定性を重視する方に、特におすすめです。
＼ 30日返金保証 ／
CMSやホームページ作成ソフトで作成する
CMS（コンテンツ管理システム）には、WordPress以外にもさまざまなものがあります。また、ホームページ作成ソフトを使うのも、よい方法です。
CMSやホームページ作成ソフトの代表的なサービスには、次のようなものがあります。
- Wix（ウィックス）：ドラッグ＆ドロップで直感的にデザインを組み立てられる
- STUDIO（スタジオ）：デザインの自由度が高い
- Jimdo（ジンドゥー）：シンプルな操作でホームページを作成できる
WordPressとHTML手書き作成の違いと特徴を比較
WordPressとHTML手書き作成の違いと特徴を、比較しながら説明します。
- カスタマイズの自由度・拡張性の違いを知ろう
- テーマにない要素を追加したい場合の注意点
- トラブル時に対応できるスキルの重要性を紹介
カスタマイズの自由度・拡張性の違いを知ろう
WordPressをはじめとするCMSやホームページ作成ソフトはいわば、必要な部品（ブロックやパーツ）がすでに用意されており、それらを組み合わせるだけで家が完成する、組立式家具のようなものです。
WordPressの場合は、専門的なプログラミング知識がなくても、迅速にプロのようなWebサイトを構築できます。また専門知識があれば、テーマやプラグインで用意されていないデザインや機能を実現することも可能です。
一方、HTMLでホームページを作る場合は、自分で設計図を書き、装飾もデザインしなければなりません。その分オリジナリティの高いホームページを作れるメリットはあるものの、時間も手間もかかります。また小さな記述ミスが原因で、意図したとおりのサイトにならないことは、珍しくありません。
HTMLの場合、ある程度の知識があれば、デザインや機能の自由度は無限大。完全にオリジナリティの高い細部まで作りこんだホームページを作成できます。しかし知識がない段階では、基本要素を盛り込んだホームページを公開する段階にたどり着くまでに、時間も労力もかかる可能性があります。
テーマにない要素を追加したい場合の注意点
WordPressをはじめとするCMSやホームページ作成ソフトの大きな魅力は、あらかじめ用意されたテーマとブロック・プラグインを組み合わせることで、専門知識なしでサイトを構築できる点にあります。しかしその手軽さには、限界がある点に注意しましょう。
テーマに最初から組み込まれていないデザインや機能を追加しようとすると、途端に難易度が上がります。また、複数のプラグインを導入した場合に、プラグイン同士が競合してうまく機能しないことがある点にも、注意が必要です。カスタムCSSを使う場合は、CSSのコードを直接書き込む必要があります。
こういった場合に役立つのが、HTMLやCSSの知識です。HTMLやCSSの知識の知識は、WordPressで効率よくホームページを作成しながら、オリジナリティを加えてブラッシュアップするために大きく貢献します。
トラブル時に対応できるスキルの重要性を紹介
Webサイトの運営には「急に表示がおかしくなった」「機能が動かなくなった」といったトラブルがつきものです。そんな時、サイトの裏側で動いているHTMLやCSSの基本的な仕組みを理解していると、大きな強みになります。
WordPressの管理画面を見ただけでは解決できない修正や原因究明が必要になった際にも、自分でコードを見ながらの対処が可能です。例えば、表示崩れの原因がCSSの記述ミスだと特定したり、HTMLのタグの閉じ忘れを見つけたりできます。
WordPressで手軽にサイトを立ち上げ、その上でHTMLやCSSの基本を知っておくことで、トラブルへの対応力が格段に上がり、あなたのWebサイト運営に大きな安心感を与えてくれるでしょう。
Categoryカテゴリー
ブログを開設する10STEP
HP制作の10STEP