【はじめてのHTML 】 ホームぺージの作り方・公開までの手順を解説

【2023年7月4日更新】情報を最新化するとともに、より記事の理解度が深まるように関連記事を設定しました。

この記事のレベル

初心者 (4.0)
重要度 (3.0)
難しさ (3.0)

こんにちは、編集長のカワウソです!

「ホームページを作りたいけど、HTMLってなんだか難しそう……」と感じていませんか?

そこで今回は、HTMLの基礎知識はもちろん、ホームぺージ作成から公開までの手順を解説します。

カワウソ

この記事は次のような人におすすめ!

  • HTMLと聞いてもイメージが湧かない人
  • ホームぺージ作成手段に迷っている人
  • 実際にHTMLによるホームぺージ作成を体感してみたい人

この記事を読めば、ホームぺージ作成のハードルがぐんと下がります。

なお、記事の後半では、HTMLを使わずにホームページを作る方法も紹介しているので、あわせてチェックしてみてください。

それではどうぞ!

HTMLで簡易的なホームページを20分で作ろう!

まず、予備知識なしで、HTMLによるホームぺージ作成を体感してみましょう。

というのも、初心者の方がHTMLの知識を身につけるところから始めようとすると、その段階で挫折してしまうかもしれません。

そのため、まずHTMLで簡易的なホームページを作って、流れをイメージしましょう。

先に、ホームページ作成の流れを理解すれば、HTMLの知識を効率的に身につけられます。

手順1:必要な物を準備(所要時間:5分)

HTMLを書くために必要な物は、以下の2つです。

HTMLを書くために必要な物
  • パソコン(ハード)
  • メモ帳などのテキストエディタ(ソフト)

高いスペックのパソコンは必要ありません。
インターネットが普通に使用できる程度のスペックがあれば十分です。

そのほか、HTMLを記述するテキストエディタ(ソフト)を準備します。

テキストエディタにも、さまざまな種類があります。
今回はパソコンに標準搭載されている「メモ帳」を使用するので、費用はかかりません。

なお、メモ帳は以下の手順で開きます。

Windows10の場合

Windowsアイコン > Windowsアクセサリ > メモ帳

Macの場合

Finder > アプリケーション > テキストエディット.app

Windowsのメモ帳の開き方

手順2:HTMLを書く(所要時間:5分)

メモ帳を開いて、HTMLを書いていきましょう。

ここでは流れをつかむことを優先するため、下記のHTMLを一から書くのではなく、コピーしてメモ帳に貼り付けてください。

※HTMLの説明や書き方は、あとで詳しく解説します。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>サンプルHTML</title>
</head>
<body>
 <h2>見出し</h2>
 <p>文章を書く場所</p>
</body>
</html>

メモ帳にHTMLを貼り付け

手順3:HTMLファイルを作成(所要時間:5分)

次に、メモ帳の「ファイル>名前を付けて保存」の画面で、ファイル名を「*.txt」から「sample.html」に変更して、保存をクリックしてください。

※文字コードは、「UTF-8」のままで構いません。

名前を付けて保存

これにより、HTMLファイルが作成されます。

このように、メモ帳でHTMLファイルを作るためには、ファイルの拡張子を「.txt」から「.html」に変更する必要があるのです。

拡張子を変更する

なお、拡張子の変更は、ファイルを保存したあとでも可能です。

メモ帳の拡張子を変更する方法
  • 保存時に拡張子を選択する(ファイル>名前を付けて保存)
  • 保存後、ファイルを右クリックして「名前の変更」から拡張子を変更する
    ※この場合、アラートメッセージが出ますが、そのまま変更しても問題ありません。

手順4:完成(ブラウザで確認)(所要時間:5分)

じつは、簡易的なホームページはすでに完成しています。
作成したHTMLファイルがどのように表示されるか、「ブラウザ」で確認してみましょう。

ブラウザはホームぺージを表示させるためのソフトで、いくつか種類があります。

主なブラウザの種類
  • Google Chrome(グーグル・クローム)
  • Microsoft Edge(マイクロソフト・エッジ)
  • Safari(サファリ)

HTMLファイルをダブルクリックすると、初期設定で設定されているブラウザが起動し、ホームページが表示されます。

もし、ブラウザが立ち上がらない場合は、以下の方法でブラウザを立ち上げてください。

Windows10の場合

右クリック > プログラムから開く > 任意のブラウザを選択


Macの場合徴

右クリック > このアプリケーションで開く > 任意のブラウザを選択

以下のように表示されれば、問題ありません。

カワウソ

今回は流れを掴むために必要最低限の要素で作ったため、見た目は考慮していません。デザインについては、あとのCSSの役割は「見た目の装飾」で解説します。

補足:ホームページの公開方法

ホームぺージを他人が閲覧できる状態にするためには、HTMLファイルをインターネット上に公開する必要があります。

HTMLファイルの公開には、サーバーが必要です。

ホームページが家なら、サーバーは土地

ホームぺージを家に見立てた場合、サーバーは土地。
ホームぺージのデータを格納する場所が必要になります。

自社でサーバーを構築すると膨大なコストがかかるため、レンタルサーバー会社から借りるのが一般的です。

HTMLファイルをアップロードする前に、サーバーをレンタルしておきましょう。

メモ

弊社のレンタルサーバー『エックスサーバー』は、国内シェアNo.1(※)で導入企業数20万社の実績があるので、おすすめですよ。

また、「10日間無料お試し」もあり、期間が過ぎても自動契約される心配がないため、初心者の方でも安心してご試用いただけます。

※2024年5月時点、W3Techs 調べ。

なお、サーバーについては、以下の記事で詳しく解説しています。

FTPソフトの設定

次に、サーバーが用意できたら、FTPソフトを用意します。

FTPソフトとは?

HTMLファイルをサーバーにアップロードするためのソフト。FTPは「File Transfer Protocol」の略称で、パソコンからサーバーにファイルを転送するための通信規格です。

FTPソフトには、さまざまな種類があります。
おすすめは、WindowsでもMacのパソコンでも使える『FilleZilla(ファイルジラ)』です。

FilleZillaの設定方法は、下記のページで詳しく解説しています。

エックスサーバーマニュアル「FileZilla設定手順」

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

FTPソフトの設定が完了したら、いよいよHTMLファイルをサーバーにアップロードします。

ファイルのアップロード先となる「リモートサイト側のフォルダ」を選択してください。

リモートサイトでアップロード先のフォルダを選択
アップロード時の注意点
  • ファイルのアップロード先のフォルダは、レンタルサーバーによって異なります。
  • エックスサーバーでは、ドメイン下の「public_html」フォルダになります。

その後、ローカルサイト側のアップロードするファイル(sample.html)を右クリックして、「アップロード」を選択します。

ローカルサイトでHTMLファイルをサーバーにアップロード

すると、「sample.html」のファイルが、リモートサイト側にアップロードされます。

リモートサイトにアップロードされたHTMLファイルの例

これで誰もが「sample.html」にアクセスできる状態になりました。

ブラウザのアドレスバーに「http://ドメイン名/sample.html」と入力するとアクセスできます。
※アクセスできない場合は、「http://」を「https://」もしくは「http://www」「https://www」に変更してみてください。

HTMLの役割は「意味づけ」

ホームページ作成のおおまかな流れをつかんだら、次はHTMLの理解度を深めましょう。

ここではHTMLの役割を解説します。

HTMLとは?

「Hyper Text Markup Language」の略であり、ホームぺージを作成するためのマークアップ言語です。ホームぺージに表示したテキストや画像に「意味付け」するために用いられます。

たとえば、ホームぺージの「見出し」や「文章」を作成したい場合、HTMLは以下のように書きます。

<h2>見出しです</h2>
<p>文章を書きます</p>

HTMLは意味付けしている

上記の場合は、「h2タグ」を使って「見出し」であるという意味付けをしています。

HTMLには、ほかにも「画像」や「表」など、さまざまな種類のタグが存在しますよ。

初心者の方であれば、HTMLタグは暗記しなくても構いません。
HTMLタグを辞書のように紹介しているサイトもありますので、紹介しておきます。

参考:TAG index

HTMLの基本構造と書き方

ここではHTMLの基本構造と書き方を解説します。

サンプルコードを見ながら解説するので、実際にメモ帳に書きながら覚えてください。

<!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>
<h2>見出し</h2>
    <p>文章を書く場所</p>
</body>
</html>

<!DOCTYPE html>

サンプルコードの1行目にあるDOCTYPEは、今から使うHTMLのバージョンを宣言するためのタグです。

現在、多くのホームぺージでは、HTML5が使用されています。

まずは<!DOCTYPE html>と書き、「これからHTML5を使います」という宣言をします。

<html lang="ja">~</html>

2行目にある<html lang="ja">は、「ここからHTMLが始まる」という意味の開始タグです。

「lang=”ja”」は、「このHTMLの中では日本語を使います」という意味があります。

最後の行にある</html>は閉じタグで、「ここまでがHTMLの記述である」という意味です。

<head>~</head>

headタグ内は、HTMLの設定を行う場所です。

文字化けを防ぐための設定をしたり、タイトルを設定したりします。

あとで説明するCSSなどの外部ファイルを読み込むときにも利用するため、重要な場所です。

<body>~</body>

ホームぺージに表示させる部分を書く場所が、bodyタグの中です。

さきほどの<head>が「脳」だとしたら、<body>は「体」。
目で脳を見ることはできませんが、体は目で見れますよね。

ホームぺージを見て「画像がある」「文章がある」と判断できるのは、<body>にその記述があるためです。

(補足)HTMLの閉じタグ

HTMLのタグには、閉じタグが必要なものと、そうでないものがあります。

たとえば、見出しや文章を書く場合は、閉じタグが必要です。

<h2>見出し</h2>
<p>文章を書く場所</p>

上記のHTMLの場合、閉じタグは</h2>や</p>を指します。
半角スラッシュ(/)が入っているのが特徴です。

一方で、画像を表示させるタグに、閉じタグは必要ありません。

<img src="sample.jpg">

HTMLの閉じタグ

CSSの役割は「見た目の装飾」

HTMLのみで作成したホームページは、色味もなく、文字や画像が並んでいるだけのシンプルなものです。

ホームぺージをデザインするには、CSS(読み方:シー・エス・エス)を用います。

CSSとは?

「Cascading Style Sheets」の略称で、スタイルシート言語と呼ばれます。HTMLで書かれたテキストや画像のスタイル(見た目)を装飾するために用います。

ここでは便宜上、CSSの書き方を割愛する代わりに、効果について解説しますね。

HTMLのみと、HTML+CSSの比較

このようにCSSで装飾すれば、見た目を綺麗に整えられます。
CSSで装飾できるパターンは非常に多く、ある程度のデザインはCSSで表現することが可能です。

とはいえ、表現できるパターンが多いからこそ、CSSの習得に時間がかかるのも事実。

そこで、テンプレートサイトを使い、デザイン性のあるホームページを簡単に作成する方法を紹介します。

HTMLのホームぺージを最短で作る方法

ホームページを作るにも、HTMLやCSSをゼロから書けば、膨大な時間がかかります。

とくに初心者の方の場合、知識を習得しながら進めるため、短期間でホームページを完成させるのは困難です。

そのときに役立つのが、HTMLのテンプレート。
デザイン性のあるホームページを簡単に作ることが可能です。

今回は、おすすめのサイトを一つ紹介します。

TEMPLATE PARTY

TEMPLATE PARTY

▲出典:TEMPLATE PARTY

『TEMPLATE PARTY』は、無料のHTMLテンプレート配布サイト。
1,000種類以上のHTMLテンプレートを提供しています。

カテゴリー、色、イメージ、レイアウトなど、さまざまな種類の検索ができるため、自社のイメージに近いテンプレートを探し出すことが可能です。

TEMPLATE PARTYのテンプレート検索画面

▲出典:TEMPLATE PARTY

もし、検索画面のレイアウトやスライドショーなどについて、「よく分からない……」という方は、以下の記事で詳しく解説しているので、参考にしてみてください。

そのほか、無料だと著作権表示が必須になりますが、ライセンス契約すれば消すことが可能です。

質の高いテンプレートが豊富に用意されているので、HTMLでホームページを作る方は検討してみてください。

HTMLとCSSが学べるおすすめのサイト

テンプレートを利用してホームぺージを作る場合でも、HTMLやCSSのスキルがあれば、細かい部分も編集できるため役に立ちます。

ここでは、HTMLやCSSを効率的に学習する方法を紹介しますね。

progate(プロゲート)

progate

▲出典:progate

『progate(プロゲート)』はHTMLやCSSをはじめ、さまざまな種類の言語が学べるオンラインプログラミング学習サービスです。

以下のような特徴があります。

progateの特徴
  • 「HTML&CSS初級編(全7章)」が無料で受講できる
  • スライド(資料)が分かりやすい
  • 実際にコードを入力するから覚えやすい
  • 正解するとレベルアップするため、モチベーションが高まる
  • 企業プログラミング研修用のサービスもある

アカウント登録さえすれば、「HTML&CSS初級編」に含まれる7つの章が無料で受講できます。

HTML&CSS初級編の内容
  1. HTMLに触れてみよう!
  2. CSSに触れてみよう!
  3. レイアウトを作ろう!
  4. ヘッダーを作ろう!
  5. フッターを作ろう!
  6. コンテンツを作ろう!
  7. お問い合わせフォームを作ろう!

また、スライド(資料)が分かりやすいうえ、実際にHTMLやCSSを入力しながら進められるため、覚えやすいです。

入力後に「できた!」ボタンを押すと、内容が正解しているかどうか確認できます。
正解していれば、プロフィールに表示されるレベルが徐々に上がっていくため、モチベーションを維持しやすいです。

有料プラン(月額990円~)に切り替えると、中級編や上級編も受講できます。
また、HTML&CSS以外のすべてのレッスンを受講することが可能です。

そのほか、企業プログラミング研修用の「progate for Business」もあります。

一人あたり月額1,990円という低コストで導入でき、リアルタイムでメンバーの学習状況を確認することが可能です。

ホームぺージを自社で管理していくなかで、「従業員のスキルも上げていきたい」と考える経営者の方は、導入を検討してみてください。

HTMLを使わずにホームページを作る方法を紹介

ここまでは、HTMLやCSSを用いてホームページを作成する手順を解説しました。

なかには「やっぱり難しそう……」と感じた方もいるのではないでしょうか?

でも大丈夫。HTMLやCSSが書けなくても、簡単にホームページを作る方法があります。

おすすめはWordPress(ワードプレス)

WordPress(ワードプレス)はCMSの一種です。

CMSとは?

CMSは「Contents Management System(コンテンツ・マネジメント・システム)」の略称です。分かりやすく言うと、HTMLやCSSのスキルがなくても、ホームぺージの作成や更新ができるシステム(ソフトウェア)です。

WordPressはWeb制作スキルがなくても簡単にホームページの作成や管理ができる

WordPressには、さまざまなメリットがあります。

WordPressのメリット10個
  1. 世界シェア1位
  2. 無料のソフトウェア
  3. 制作ソフトが必要ない
  4. スキルがなくても更新できる
  5. Web制作会社に外注しやすい
  6. テンプレートやプラグインが豊富
  7. スマホ対応している
  8. SEOに強い
  9. 定期的にアップデートされている
  10. ノウハウなど情報が多い

以下の記事で詳しく解説しているので、ぜひチェックしてみてください。

また、HTML(静的サイト)とWordPress(動的サイト)のメリットやデメリットは、以下の記事で解説しています。

さらに、当メディアではWordPressと無料テーマ『Lightning(ライトニング)』を使って、ホームページを作る方法を解説していますよ。

「まず試しに1ページ作ってみたい」という方は、以下の記事がおすすめです。

また、ホームページ全体を作る連載企画もご用意しています。
全12回を通して実用レベルのホームページが作れるため、おすすめです。

プラグインについては、以下の記事で解説しています。

WordPressを使えばHTMLは不要?

WordPressを使えば、HTMLやCSSのスキルは必須ではありません。

しかし、HTMLやCSSは知っていれば役に立ちます。

HTMLやCSSが役に立つシーンの例
  • 参考サイトの構造を分析できる
  • テーマにない機能や要素を追加できる
  • 困ったときの対応力が増す

ここでは上記の例を解説します。

参考サイトの構造を分析できる

デベロッパーツールでホームページのHTMLやCSSを解読

WebブラウザのGoogle Chromeには、「デベロッパーツール」という開発者用の機能があります。

デベロッパーツールを使って、参考サイトの気になる箇所をクリックすれば、その部分のHTMLやCSSがどのように書かれているか調べることが可能です。

「このおしゃれなフォントは何だろう?」「このボタンのカラーコード(色番号)は何番だろう?」などといった疑問が生じても、技術的な目線で解読できるようになりますよ。

なお、ここでお伝えしておきたいのが、「WordPressのホームページでも、実際には裏側でHTMLやCSSが自動で作られている」ということ。

そのため、基本的にはどんなホームぺージでも、HTMLやCSSの知識があれば構造を分析できるのです。

テーマにない機能や要素を追加できる

WordPressは、「テーマ」と呼ばれるホームぺージ用のデザインテンプレートを使用することが可能です。

優れたテーマであれば、ほとんどの機能や要素を含んでいるでしょう。
ただそれでも、使っていくうちに「テーマにはない機能や要素を取り入れたい」と考えるときもあるかもしれません。

そのとき、「カスタムHTML」という機能でコードを入力すれば、独自の機能や要素を追加できます。

当メディアでも、ボタンなどは下記のようにカスタムHTMLを使用していますよ!

カスタムHTMLで作ったボタンの例

なお、以下の記事では、おすすめのテーマを紹介しています。
テーマにどんな機能があるか知りたい方は、チェックしてみてください。

困ったときの対応力が増す

WordPressのページ(記事)編集モードには、「ビジュアルエディタ」と「コードエディタ」の2種類があります。

WordPressのビジュアルエディタとコードエディタの違い

ビジュアルエディタ

HTMLやCSSなどを使わずに文章を作成したり、画像を挿入したりできるモードです。実際に公開するページのイメージに近い状態で編集できます。

コードエディタ

HTMLを直接操作できるモードです。

ビジュアルエディタに実装された機能を使用すれば、大概のことは実現可能です。

仮に難しい場合でも、WordPressには「プラグイン(拡張機能)」を追加できるため、機能自体を増やして対応できるでしょう。

しかし、稀にどうしても実現できなかったり、使用するテーマやプラグインによっては、WordPressのアップデートで一時的にバグが発生したりもします。

そのような理由で困ったときに、直接HTMLを編集できれば問題が解決できる場合があるのです。

そのため、WordPressでホームページを作る方でも、時間に余裕があれば、HTMLやCSSを身につけていくことをおすすめします。

まとめ

今回は、HTMLの基礎知識はもちろん、ホームぺージを作成から公開するまでの手順を解説しました。

また、デザインテンプレートサイトや学習サイトも紹介したため、HTMLに対するハードルも少しは下がったのではないでしょうか。

「やっぱりHTMLは難しそう……」と感じた方は、無料で使えるWordPressを使ってみてください。

まとめ
  • まず、HTMLでホームページを作成から公開するまでの「手順」を知ろう
  • HTMLは「意味づけ」、CSSは「HTMLの要素を装飾する」役割がある
  • ホームぺージの完成を急ぐなら、テンプレートサイトを利用する
  • HTMLやCSSを学習するなら、オンライン学習サービス「progate」がおすすめ
  • HTMLが難しい方には、CMS世界シェアNo.1の「WordPress」がおすすめ
  • WordPressを使えば、HTMLやCSSは必須ではないが、知っていれば役に立つ

HTMLやCSSのスキルがなくても、ホームぺージは作れます。

しかし、知らないよりかは知っていた方が役立つため、興味のある方は学んでみてください。

それでは、素敵なホームページの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1のレンタルサーバーであり、20万社の導入実績があります。

2024年6月5日12時まで、サーバーが実質半額で利用できる『半額キャッシュバックキャンペーン』を開催中です!

今なら実質月額495円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2024年5月時点、W3Techs調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!