最先端のWebマーケティングを発信するメディア

最先端のWebマーケティングを発信するメディア

【画像つき】HTMLによるホームページの作り方を解説！

最終更新日：

CMS・サイト制作サイト開設WordPress

SHARE
FacebookTwitterLineHatenaShare

「HTMLでホームページを作れるって聞いたけど、なんだか難しそう」と思っていませんか？たしかに、HTMLでホームページを作成することは可能ですし、それが難しいのも事実です。

そこで本記事では、HTMLによるホームページの作り方を画像つきで丁寧に解説します。

また、先に結論をお伝えすると、初心者の方がHTMLでホームページを作成するのはおすすめできません。その理由や代替案を説明しているので参考にしてください。

ホームページをHTMLで作成するメリット

HTMLによるホームページの作り方をチェックする前に、そもそも「HTMLでホームページを作ることによるメリット」を把握しておきましょう。詳細は後述しますが、ホームページの作成方法はHTML以外にも多数存在し、現在はそちらのほうが主流になっているからです。もちろん、あえてHTMLを使う方もいらっしゃいます。

如何せん、ホームページ作成でHTMLを選ぶメリットを知っておいて損はないでしょう。具体的には以下の2つです。

  • ページの表示スピードが速い
  • セキュリティ性が高い

それぞれ詳細を解説します。

ページの表示スピードが速い

HTMLで作成したホームページは、CMS（コンテンツ管理システム）などを介さないため、ページの表示スピードが速いです。表示スピードの速さは読者のユーザビリティ向上に貢献するので、その点はメリットといえます。

セキュリティ性が高い

HTMLはマークアップ言語を直接記述するので、作成した本人以外からの干渉がありません。外部システムを利用した場合と比較して、セキュリティ性が高いといえるでしょう。

ホームページをHTMLで作成するデメリット

ホームページをHTMLで作成する場合、ある程度の専門知識が必要です。また、後述するCSSの知識も習得することになるので、初心者にはなかなか難しいでしょう。

ほかにも、HTMLで直接作成したホームページは、管理が面倒というデメリットもあります。更新のたびに細部をチェックする必要があるからです。

ブログ記事やニュースなど、ホームページを更新する必要がある場合は、無料のホームページ作成ツールやWordPressを使用したほうがいいでしょう。

【6ステップ】HTMLによるホームページの作り方

ここでは、HTMLによるホームページの作り方を具体的に解説します。

以下のフローに従っていただければ、専門知識のない方でも6ステップでホームページを作成できます。

  1. 必要なツールを用意する
  2. ベースのHTMLを記述する
  3. ページ内容ごとのHTMLを記述する
  4. HTMLファイルを作成する
  5. 完成したHTMLファイルをブラウザで確認する
  6. HTMLファイルをサーバーにアップロードする

少し難しそうな言葉が並んでいますが、実際の作業内容はシンプルです。

それぞれ順番にチェックしていきましょう。

必要なツールを用意する

HTMLでホームページを作成する際は以下のツールを使用します。

  • Google Chrome
  • テキストエディタ

Google Chromeはご利用している方も多いと思うので詳細は省きますが、要するにブラウザのことです。

一方テキストエディタは聞き馴染みがないかもしれません。「HTMLを記述する」ためのメモ帳をイメージしていただければわかりやすいと思います。

実際、テキストエディタはWindowsに標準搭載されているメモ帳アプリでも大丈夫です。

他にも、「Sublime Text」「Atom（2022年に開発終了）」「Visual Studio Code」など、HTMLを記述することに特化したテキストエディタもあります。

本記事では、HTMLでホームページを作る基本を押さえるという意味も含めて、メモ帳を利用した方法を解説します。

OSごとのメモ帳へのアクセス方法は以下のとおりです。

  • Windowsの場合：Windowsアイコン ＞  メモ帳
  • Macの場合：Finder ＞ アプリケーション ＞ テキストエディット.app

ベースのHTMLを記述する

まずは、ベースとなるいくつかのHTMLを記述します。

<!DOCTYPE html>
　<html>
　　<head>
 　　　<meta charset=”utf-8″>
　　　<meta name=”viewport” content=”width=device-width, initial-scale=1″>
　　　<title></title>
　　</head>
　<body>
　</body>
　</html>

ベースとなるHTMLは上記コードをコピペして貼り付けても大丈夫です。

また、アルファベットがたくさん並んで難しそうに見えるかと思います。

しかし、それぞれのタグが意味することは非常にシンプルです。

タグ 意味・役割
<!DOCTYPE html> HTMLを記述するうえで必須の宣言
<html>～～～</html> HTMLの始まりから終わりの指定
<head>～～～</head> ページ上には表示されない裏側のエリア
<meta charset=”utf-8″> 文字化けを防ぐコード指定
<meta name=”viewport” content=”width=device-width, initial-scale=1″> ページをさまざまな画面幅のデバイスで適切に表示させるための記述
<title>～～～</title> ページタイトルを指定
<body>～～～</body> 実際にページ上で表示される要素

「Sublime Text」などのテキストエディタでは「<ht」と入力すると、入力補助機能で上記コードを一括で挿入できます。

タグの意味・役割を理解しておく必要はありますが、丸暗記する必要はないでしょう。

ページ内容ごとのHTMLを記述する

次に、ページ内容ごとのHTMLを記述します。

先にのべたとおり、記述する場所は「<body>～～～</body>」の間です。

具体例として、以下のページ内容を表示させるコードを解説します。

見出し1は「<h1></h1>」、見出し2は「<h2></h2>」です。

なので、まずは以下のように記述します。

<h1>飲食店の集客方法3選</h1>
<h2>ホームページ</h2>
<h2>SNS</h2>
<h2>ビラ配り</h2>

番号なしリストのタグは「<ol></ol>」です。箇条書するリストごとに「<li></li>」を使用するので、記述は以下のようになります。

<ol>
<li>Twitter</li>
<li>Instagram</li>
<li>TikTok</li>
</ol>

最終的に以下のような記述になります。

<h1>飲食店の集客方法3選</h1>
<h2>ホームページ</h2>
<h2>SNS</h2>
<ol>
<li>Twitter</li>
<li>Instagram</li>
<li>TikTok</li>
</ol>
<h2>ビラ配り</h2>

ちなみに、近ごろ話題の「ChatGPT」を利用すると、簡単な指示だけでHTMLのコードを記述してくれます。

文字化けを防ぐ「<meta charset=”utf-8″> 」が記述されていないのでご注意ください

ChatGPTの詳細についてはこちらの記事を参考にしてください。

HTMLファイルを作成する

ページ内容の記述が完了したあとは、HTMLファイルを作成します。

通常、メモ帳アプリで作成した文章はテキストファイル（.txt）で保存されます。しかし、HTMLファイルは拡張子（※）を「.html」に変更する必要があるのでご注意ください。

今回記述したコード

「.txt」で作成してしまった場合、あとから「名前の変更」で拡張子を書き換えれば大丈夫です。その際、アラートメッセージが出ますが無視して構いません。

※ ファイルの種類を識別するための文字列

完成したHTMLファイルをブラウザで確認する

完成したHTMLファイルが問題ないかブラウザで確認しましょう。保存先のフォルダを開き、該当ファイルをダブルクリックすれば開きます。

今回はGoogle Chromeを採用しましたが、Microsoft EdgeやSafariなど、ブラウザならどれでも構いません。

また、現段階ではHTMLしか記述していないので、ページの見た目が非常に粗いです。デザインを整えるためにはCSSを記述する必要があります（詳細は後述）。

HTMLファイルをサーバーにアップロードする

作成したHTMLファイルをホームページとして公開するためには、サーバーにアップロードする必要があります。

具体的なフローは以下のとおりです。

  1. レンタルサーバーの契約（内部リンク）
  2. 独自ドメインの取得・設定（内部リンク）
  3. FTPソフトのインストール
  4. FTPソフトの初期設定
  5. FTPソフトでHTMLファイルをアップロード

FTPソフトの使い方は少し難しいので、1つづつチェックしていきましょう。

レンタルサーバーの契約

レンタルサーバーとは、文字通りレンタルして利用するサーバーのことです。規模が大きい企業では自社サーバーを用意していることもありますが、通常はレンタルサーバーを利用してホームページを公開するのが一般的です。

また、レンタルサーバーには幅広い種類が存在します。どのサービスが自社にマッチしているかの見極めはなかなか難しいです。レンタルサーバーの選び方で失敗したくない方はこちらの記事を参考にしてください。

独自ドメインの取得・設定

レンタルサーバーを契約したあとは独自ドメインを取得します。独自ドメインとはインターネット上における住所のことです。

レンタルサーバーの契約と独自ドメインの取得は、順番が前後しても問題ありません。各レンタルサーバーの手順に従い、独自ドメインの初期設定を行います。

FTPソフトのインストール

FTPソフトはファイル転送用のソフトウェアです。File Transfer Protocolの頭文字をとって「FTP」と略されています。押さえておきたい機能は以下のとおり。

  • 送信機能：パソコン内のファイルをサーバーにアップロード
  • 受信機能：サーバー内のファイルをパソコンにダウンロード

簡単に説明すると、ローカルPC内のデータをインターネット上に公開し、誰でもアクセスできるようにするためのツールです。

FTPソフトはいくつかメジャーなものがありますが、なかでも「FFFTP」と「FileZilla（ファイルジラ）」がよく使用されています。

インストール方法に関してはこちらの記事を参考にしてください。

FTPソフトの初期設定

ここから、少し専門的な話になります。

まずはFTPソフトの初期設定を完了させます。今回は「ロリポップ×FFFTP」の方法で解説しますが、レンタルサーバーごとにやり方が違うのでご注意ください。

・Xserverの場合はこちら
・ロリポップ！の場合はこちら
・さくらのレンタルサーバーの場合はこちら
・カゴヤの場合はこちら
「〇〇（レンタルサーバー名）＋FTP」で検索すると大体ヒットします

まずはFFFTPを起動し、「新規ホスト」をクリックします。

次に各種情報を入力します。

それぞれの項目内容は以下のとおりです。

  • ホストの設定名：自由に決定
  • ホスト名（アドレス）：接続するサーバーのホスト名
  • ユーザー名：FTP・WebDAVアカウント
  • パスワード/パスフレーズ：FTP・WebDAVパスワード

作成されたホストを選択し、「接続」をクリックしてください。その際、「暗号化の状態の保存」のポップアップが表示されることがありますが、「はい」で問題ありません。

画面下部に「ファイル一覧の取得は正常終了しました」と表示されれば初期設定の完了です。

FTPソフトでHTMLファイルをアップロード

FFFTPでは、左側がローカルPC内のファイル、右側がサーバー内のファイルという配置になっています。

画面右側にはドメインごとのフォルダが最初に表示されます

HTMLファイルをアップロードするフォルダを選択してください。

一般的には、左画面から対象のHTMLファイルを選択してからアップロード作業を行います。

しかし、デスクトップ画面からドラッグ&ドロップでアップロードすることも可能です。

先ほど作成したHTMLファイルをドラッグ&ドロップでアップロード

下画像のように、HTMLファイルが表示されたらOKです。

基本的には、この作業を繰り返してホームページを完成させます。

また、今回は「テスト用.html」しかアップロードしていないので、このファイルがトップページになります。

しかし、トップページは「index.html」で作成したほうがいいので、名前を変更しましょう。該当ファイルを右クリックし、「名前変更」を選択してください。

この状態で該当URLをGoogle Chrome（ブラウザなら何でもOK）で検索すると、アップロードしたページ内容が表示されます。

HTMLだけでは簡素なホームページしか作れない

HTMLだけで作成したホームページの場合、簡素な仕上がりにしかならないという注意点があります。そもそも、HTMLの役割はwebサイトの構造を指定することだからです。webサイトの装飾を指定したい場合、CSSと呼ばれる別のマークアップ言語を記述する必要があります。

マークアップ言語とは、文章を構造化させるための言語のことですが、あまり細かく覚えなくても大丈夫です。「HTML/CSSを意味する」という認識で問題ありません。

また、両者の違いは以下のとおりです。

  • HTML：webサイトの構造を指定するマークアップ言語
  • CSS：webサイトの装飾を指定するマークアップ言語

わかりにくいという方は、webサイトを箱に見立ててイメージしてください。

HTMLは箱を組み立てるための設計図です。一方、CSSはその箱をおしゃれにするためのデザインツールの役割を担っています。

実際のホームページ例は下画像のとおりです。

ちなみに、ホームページを作成する際は、JavaScriptやPHPなどのプログラミング言語が使われることも多いです。

CSSも覚えることが多い言語ですが、JavaScriptやPHPと比べるとシンプルでとっつきやすくなっています。裏を返せば、JavaScriptやPHPはかなり難易度が高いということです。

以上のことから、初心者の方が本格的なホームページを作成するのはかなり難しいといえます。基本的には、WordPressのようなCMS（コンテンツ管理システム）を使ったほうがいいでしょう。

HTML以外のホームページの作り方

ここでは、HTML以外のホームページの作り方を解説します。

  • WordPress
  • 無料作成ツール

ただ、厳密にはどちらもHTMLを使っています。あくまでも「自分でHTMLを記述する必要がない作り方」という意味なので、誤解しないようにしてください。

WordPress

WordPressとは、webサイトやブログを簡単に開設できるCMSです。詳細はこちらの記事で解説しています。

一言で表現するなら、「無料で利用できる優秀なホームページ作成ツール」です。レンタルサーバー代とドメイン代は必要ですが、それは自力でHTMLファイルを作成した場合も同じなので、費用面の差はありません。

また、WordPressは日本をはじめ、世界シェア1位のCMSです。個人ブログから企業のコーポレートサイトまで幅広い用途に使われています。初心者から上級者まで対応可能です。

ホームページを作成する場合、「WordPressかそれ以外か」といえるほど存在感があります。

無料作成ツール

近ごろはホームページの無料作成ツールも注目を集めています。詳細はこちらの記事を参考にしてください。

ドラッグ＆ドロップでコンテンツを追加できるなど、直感的な操作に対応しているツールが多いです。あまり本格的でなくてもいいから、見栄えのいいホームページを開設したい方におすすめします。

HTMLによるホームページの作り方まとめ

本記事では、HTMLによるホームページの作り方について解説しました。押さえておきたいポイントは以下のとおりです。

  • テキストエディタに記述する
  • FTPソフトでアップロードする
  • 基本的にはCSSでのカスタマイズが必須

HTMLをテキストエディタに記述してホームページを作成する方法にもメリットはあります。しかし、管理面や難易度、手間の問題を考慮すると、WordPressなどのCMSを利用したほうがいいでしょう。

SHARE
FacebookTwitterLineHatenaShare

RELATED 関連記事

関連記事をもっと見る

RECOMMENDED おすすめの記事

RANKING ランキング

  • WEEKLY
  • MONTHLY

UPDATE 更新情報

  • ALL
  • ARTICLE
  • MOVIE
  • FEATURE
  • DOCUMENT