こんにちは、編集長のカワウソです！
「ホームページを作りたいけど、HTMLってなんだか難しそう……」と感じていませんか？
そこで今回は、HTMLの基礎知識はもちろん、ホームぺージ作成から公開までの手順を解説します。
カワウソ
この記事は次のような人におすすめ！
- HTMLと聞いてもイメージが湧かない人
- ホームぺージ作成手段に迷っている人
- 実際にHTMLによるホームぺージ作成を体感してみたい人
この記事を読めば、ホームぺージ作成のハードルがぐんと下がります。
HTMLを使って自作する予定がない方でも、基礎知識として身につけておくことで、いろいろと役立ちますよ。
それではどうぞ！
目次
HTMLで簡易的なホームページを20分で作ろう！
初心者の方が、HTMLの知識を身に付けてホームぺージを作るのはかなり時間がかかるので、挫折率が高いです。
そこで、まずは予備知識なしでホームぺージ作成を体感してみましょう。
先に全体の流れを理解すれば、HTMLの知識を効率的に身に付けられます。
手順1：必要な物を準備（所要時間：5分）
HTMLを書くために必要な物は以下の2つです。
- パソコン（ハード）
- メモ帳などのテキストエディタ（ソフト）
高いスペックのパソコンは必要ありません。インターネットが普通に使用できる程度のスペックがあれば十分です。
その他、HTMLを書くテキストエディタを準備します。
テキストエディタにもさまざまな種類がありますが、今回はパソコンに標準搭載されている「メモ帳」を使用します。
メモ帳は以下の手順で開きます。
Windows10の場合
Windowsアイコン ＞ Windowsアクセサリ ＞ メモ帳
Macの場合
Finder ＞ アプリケーション ＞ テキストエディット.app
手順2：HTMLを書く（所要時間：5分）
メモ帳を開いて、HTMLを書いていきましょう。
ここでは流れをつかむのを優先するため、下記のHTMLを真似して書くのではなく、コピーしてメモ帳に貼り付けてください。
※HTMLの説明や書き方は、あとで詳しく解説します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルHTML</title>
</head>
<body>
<h2>見出し</h2>
<p>文章を書く場所</p>
</body>
</html>
手順3：HTMLファイルを作成（所要時間：5分）
次に、HTMLファイルを作成します。
通常、メモ帳で作成した文章はテキストファイル（.txt）として保存されます。
しかし、HTMLファイルを作るには、拡張子を「.html」に変更する必要があります。
以下、2つの方法があります。
- 保存する際に拡張子を選択する（ファイル＞名前を付けて保存）
- 保存後、「名前の変更」で拡張子を手書きで変更する
※この場合、アラートメッセージが出ますが、そのまま変更しても問題ありません。
使っているメモ帳で、拡張子の変更方法は異なるため、上記のどちらかの方法を使いHTMLファイルを作成してください。
手順4：完成（ブラウザで確認）（所要時間：5分）
じつは、簡易的なホームページはすでに完成しています。
作成したHTMLファイルがどのように表示されるか「ブラウザ」で確認してみましょう。
ブラウザはホームぺージを表示させるためのソフトで、いくつか種類があります。
- Google Chrome（グーグル・クローム）
- Microsoft Edge（マイクロソフト・エッジ）
- Internet Explorer（インターネット・エクスプローラー）
- Safari（サファリ）
HTMLファイルをダブルクリックで開くと、初期設定で設定されているブラウザが起動し、表示されます。
Windowsのパソコンであれば「Microsoft Edge」か「Internet Explorer」が起動し、Macのパソコンであれば「Safari」が起動する可能性が高いです。
仮にブラウザが立ち上がらない場合は、以下の方法でブラウザを立ち上げてください。
Windows10の場合
右クリック ＞ プログラムから開く ＞ 任意のブラウザを選択
Macの場合徴
右クリック ＞ このアプリケーションで開く ＞ 任意のブラウザを選択
以下のように表示されれば問題ありません。
カワウソ
補足：ホームページの公開方法
ホームぺージを他の人が閲覧できる状態にするためには、HTMLファイルをインターネット上に公開する必要があります。
HTMLファイルの公開には、サーバーが必要です。
ホームぺージを家に見立てた場合、サーバーは土地。ホームぺージのデータを格納する場所が必要になります。
自社でサーバーを構築すると膨大なコストがかかるため、レンタルサーバー会社から借りるのが一般的です。
HTMLファイルをアップロードする前に、サーバーをレンタルしておきましょう。
ホームページにはサーバーが必須！仕組み・種類・選び方を解説！
カワウソ
エックスサーバーなら「10日間無料お試し」ができます。期間が過ぎても自動契約される心配がないため、初心者の方でも安心してご利用いただけます。
FTPソフトの設定
次に、サーバーが用意できたら、FTPソフトを用意します。
HTMLファイルをサーバーにアップロードするためのソフト。FTPは「File Transfer Protocol」の略称で、パソコンからサーバーにファイルを転送するための通信規格です。
FTPソフトにはさまざまな種類がありますが、WindowsでもMacのパソコンでも使えるFilleZilla（ファイルジラ）がおすすめです。
FilleZillaの設定方法は、下記のページで詳しく解説しています。
FileZilla設定手順 | レンタルサーバーならエックスサーバー
FTPソフトでファイルをアップロード
FTPソフトの設定が完了したら、いよいよアップロードです。
ファイルをアップロードするリモートサイト側のフォルダを選択します。
- ファイルのアップロード先のフォルダはレンタルサーバーによって異なります。
- エックスサーバーであれば、ドメイン下の「public_html」フォルダになります。
その後、ローカルサイト側のアップロードするファイルを右クリックして「アップロード」を選択します。
すると、「sample.html」のファイルが、リモートサイト側にアップロードされます。
これで誰もがアクセスできる状態になりました。
ブラウザのアドレスバーに「http://ドメイン名/sample.html」と入力するとアクセスできます。
※アクセスできない場合は、「http://」を「https://」もしくは「http://www」「https://www」に変更してみてください。
HTMLの役割は「意味づけ」
おおまかなホームページ作成の流れを掴んだら、次はHTMLの理解度を深めましょう。
ここではHTMLの役割を紹介します。
「Hyper Text Markup Language」の略であり、ホームぺージを作成するためのマークアップ言語です。ホームぺージに表示したテキストや画像に「意味付け」するために用いられます。
たとえば、ホームぺージの「見出し」や「文章」を作成したい場合、HTMLは以下のように書きます。
<h2>見出しです</h2>
<p>文章を書きます</p>
上記の場合は、「h2タグ」を使って「見出し」であるという意味付けをしています。
HTMLには他にも「画像」や「表」を作成するためのタグが存在します。
初心者の方であれば、HTMLタグは暗記しなくても構いません。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>タイトル</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">
CSSの役割は「見た目の装飾」
HTMLのみで作成したホームページは、色味もなく、文字や画像が並んでいるだけのシンプルなものです。
ホームぺージをデザインするには、CSS（シー・エス・エス）という言語を用います。
「Cascading Style Sheets」の略称で、スタイルシート言語と呼ばれます。HTMLで書かれたテキストや画像のスタイル（見た目）を装飾するために用います。
ここでは便宜上、CSSの書き方を割愛する代わりに、効果について解説します。
※画像をクリックで拡大します
このようにCSSを使い装飾すれば、見た目を綺麗に整えられます。
CSSで装飾できるパターンは非常に多く、ある程度のデザインはCSSで表現できます。
しかし、表現できるパターンが多いからこそ、CSSの習得には時間がかかります。
そこで、テンプレートサイトを使い、デザイン性のあるホームページを簡単に作成する方法を紹介します。
HTMLのホームぺージを最短で作る方法
ホームページを作るにも、HTMLやCSSをゼロから書けば、膨大な時間がかかります。
とくに初心者の場合、知識を習得しながら進めるため、短期間でホームページを完成させるのは困難です。
その際役立つのが、HTMLのテンプレート。無料でデザイン性のあるホームページが簡単に作れます。
今回は、おすすめのサイトを一つ紹介します。
TEMPLATE PARTY
TEMPLATE PARTYは、1,000種類以上のHTMLテンプレートを提供しています。
一般企業、販売業、サービス業など、業種別にサンプルのデザインを見ながら選べます。
無料だと著作権表示が必須になりますが、質の高いテンプレートが豊富に用意されているので、必要に応じてライセンス契約してください。
HTMLとCSSが学べるおすすめのサイト
テンプレートを利用してホームぺージを作る場合でも、HTMLやCSSのスキルがあれば、細かい部分も編集できるため役に立ちます。
ここでは、HTMLやCSSを効率的に学習する方法を紹介します。
progate（プロゲート）
引用：progate
progate（プロゲート）はHTMLやCSSはもちろん、さまざまな開発言語が学べるオンラインプログラミング学習サービスです。
以下のような特徴があります。
- 無料にも関わらず「HTML＆CSS初級編」がすべて受講できる
- スライド（資料）が分かりやすい
- 実際にコードを入力するから覚えやすい
- 正解するとレベルアップするため、モチベーションが高まる
- 企業プログラミング研修用のサービスもある
アカウント登録こそ必要ですが、「HTML＆CSS初級編」に含まれる7つの章が無料で受講できます。
- HTMLに触れてみよう！
- CSSに触れてみよう！
- レイアウトを作ろう！
- ヘッダーを作ろう！
- フッターを作ろう！
- コンテンツを作ろう！
- お問い合わせフォームを作ろう！
スライド（資料）が分かりやすいうえ、実際にHTMLやCSSを入力しながら進められるため、覚えやすいです。
入力後に「できた！」ボタンを押すと、内容が正解しているかどうか確認できます。正解していれば、初期設定のLv.1から徐々に上がっていくため、モチベーションを維持するのに役立ちます。
無料プランだと受講できるレッスンは限定されますが、有料プラン（月額1,078円）に切り替えると全79レッスンが受講できるため、基礎から実践まですべて学習できるようになります。
その他、累計1,500社が導入した企業プログラミング研修用の「progate for Business」もあります。
一人あたり月額1,628円という低コストで導入でき、リアルタイムでメンバーの学習状況を確認できる「進捗管理機能」があります。
ホームぺージを自社で管理していく中で、「従業員のスキルも上げていきたい」と考える経営者の方は導入をぜひ検討してください。
HTMLを使わずにホームページを作る方法を紹介
ここまでは、HTMLやCSSを用いてホームページを作成する手順を紹介しました。
中には「やっぱり難しそう」と感じた方もいるのではないでしょうか？
でも大丈夫。HTMLやCSSが書けなくても、簡単にホームページを作る方法があります。
おすすめはWordPress（ワードプレス）
WordPress（ワードプレス）はCMSの一種です。
CMSは「Contents Management System（コンテンツ・マネジメント・システム）」の略称です。わかりやすくいうと、HTMLやCSSのスキルがなくてもホームぺージの作成や更新ができるシステム（ソフトウェア）です。
WordPressにはさまざまなメリットがあります。
- 世界シェア１位
- 無料のソフトウェア
- 制作ソフトが必要ない
- スキルがなくても更新できる
- Web制作会社に外注しやすい
- テンプレートやプラグインが豊富
- スマホ対応している
- SEOに強い
- 定期的にアップデートされている
- ノウハウなど情報が多い
世界シェア１位
2022年3月4日現在、WordPressはCMSシェア世界一位です。他のCMSと比べて圧倒的なシェアを獲得しています。
出典：Usage statistics of content management systems｜ W3 Techs
カワウソ
その他のメリットについては、以下の記事で詳しく解説しています。
なぜ？WordPressが会社のホームページ制作に適している理由
HTML（静的サイト）とWordPress（動的サイト）のメリットやデメリットは以下の記事で解説しています。
静的サイトと動的サイトの違い！メリットとデメリットを解説
WordPressを使えばHTMLは不要？
WordPressを使えば、HTML・CSSの知識やスキルは必須ではありません。しかし、知らないより知っていたほうが役に立ちます。
ここでは一例を紹介します。
参考サイトの構造を分析できる
インターネットブラウザのGoogle Chromeには「デベロッパーツール」という開発者用の機能があります。
デベロッパーツールを使って、参考サイトの気になる箇所をクリックすれば、その部分のHTMLやCSSがどのように書かれているか分かります。
「このおしゃれなフォントは何だろう？」「このボタンのカラーコード（色番号）は何番だろう？」などといった疑問が生じても、技術的な目線で解読できるようになります。
ここでお伝えしておきたいのが、「WordPressであればWeb制作スキルがなくてもホームぺージを作れるが、実際には裏側でHTMLやCSSが自動で作られている」ということ。
そのため、基本的にはどんなホームぺージでも、HTMLやCSSの知識があれば構造を分析できます。
テーマにない機能や要素を追加できる
前述の通り、WordPressにはテーマと呼ばれるホームぺージ用のテンプレートが存在します。
優れたテーマであればほとんどの機能や要素を含んでいます。ただそれでも、使っていくうちに「テーマにはない機能や要素を取り入れたい」と考えるときもあります。
その際、「カスタムHTML」という機能でコードを入力すれば、独自の機能や要素を追加できます。
当ブログでもボタンなどは下記のようにカスタムHTMLを使用しています！
困った際の対応力が増す
WordPressのページ（記事）編集モードには「ビジュアルエディタ」と「コードエディタ」の2種類があります。
ビジュアルエディタ
HTMLやCSSなどを使わずに文章を作成したり、画像を挿入したりできるモードです。実際に公開するページのイメージに近い状態で編集できます。
コードエディタ
HTMLを直接操作できるモードです。
ビジュアルエディタに実装された機能を使用すれば大概のことは実現できます。
仮に難しい場合でも、WordPressには「プラグイン（拡張機能）」を追加できるため、機能自体を増やして対応できます。
とはいえ、稀にどうしても実現できなかったり、使用するテーマやプラグインによっては、WordPressのアップデートで一時的にバグが発生したりもします。
そのような理由で困った際、直接HTMLを編集できれば問題が解決できる場合があります。
まとめ
今回は、HTMLの基礎知識やホームぺージを作成から公開するまでの手順を解説しました。
また、デザインテンプレートサイトや学習サイトも紹介したため、HTMLに対するハードルも少しは下がったのではないでしょうか。
「やっぱりHTMLは難しそう……」と感じた方は、無料で使えるWordPressを使ってみてください。
- まずは「HTML」でホームページを作成・公開する手順を知ろう！
- HTMLは「意味づけ」、CSSは「HTMLの要素を装飾する」役割がある
- ホームぺージの完成を急ぐなら、テンプレートサイトを利用する
- HTMLやCSSを学習するなら、オンライン学習サービス「progate」がおすすめ
- 「HTML」が難しい方には、CMS世界シェアNo.1の「WordPress」がおすすめ
- 「WordPress」を使えば「HTML」「CSS」は必須ではないが、知っていれば役に立つ
HTMLやCSSのスキルがなくてもホームぺージは作れます。
しかし、知らないよりかは知っていた方が役立つため、興味のある方は学んでみてください。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、17万社の導入実績があります。
3月24日12時まで半額キャッシュバックキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2022年10月時点、hostadvice.com調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
