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

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

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

最終更新日:
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

UPDATE 更新情報

  • ALL
  • ARTICLE
  • MOVIE
  • FEATURE
  • DOCUMENT