製品やサービスを購入するときや目当ての店を探すときなど、ほとんどの方が、必要な情報をインターネットから得ているのではないでしょうか。それらの情報を掲載し、発信しているのが「ホームページ」です。ホームページには、ブラウザに文字を表示させるための言語「HTML」が使われています。
今回は、HTMLを使ってホームページをゼロから作成する方法と手順について紹介します。
目次
HTMLの基本を理解しよう！
ホームページとは、正確にはWebサイトの中で最初に表示されるページのことを指します。Webサイトの「トップページ」ともいわれ、Webサイトの入り口となるページです。ホームページとWebサイトという呼称は、どちらもWebコンテンツとしては同様ですが、ここではホームページと表記します。
ホームページには、ブラウザに文字を表示させるための言語「HTML」が使われています。このHTMLとは、以下の3つのポイントで説明することができます。
HTMLはブラウザに文書を表示させるための言語
HTMLは「HyperText Markup Language」の略で、さまざまなデータ（文書）をコンピューターが読み取れるようにタグ付けする言語のことです。
HTMLをコンピューターが読み取ることで、Microsoft EdgeやSafari、Google Chromeなどのブラウザに、文書を表示させることができます。
HTMLは「タグ」で構成されている
タグは「荷札」や「付箋」を意味する言葉ですが、ホームページの場合は、情報の意味づけや分類する文字列のことを指します。ブラウザでどのように情報を表示するかを決める「命令のルール」とイメージすればよいでしょう。
HTMLは、さまざまな機能を使ってホームページの文書を構成します。例えば、文字を太くしたい場合、その箇所（要素）の始まりに<b>のタグを付け、太くしたい要素の終わりに</b>というタグを付けます。それをブラウザで表示させると、タグの命令どおり<b>と</b>に挟まれた文字は太く表示されます。
ファイルの拡張子は.html
タグを使って書いた文字列をHTML用のファイルとして保存する際、ファイル名の末尾に「.html」という拡張子を付けてファイル保存すれば、HTMLファイルを作成することができます。
HTMLを使ってホームページ作成する7つの手順
では、次にHTMLを使ったホームページ作成の手順について、事前の準備から公開までに必要な作業を紹介していきます。
開発環境の設定
HTMLを使ったホームページ作成で必要なのは、以下の2つのツールです。事前にこれらのツールを入手し、インストールしておくことが必要です。
＜ホームページ作る前にインストールするもの＞
- Microsoft EdgeやSafari、Google Chromeなどのブラウザ
- メモ帳などのテキストエディター
テキストエディターとは、パソコンでの文字の入力・編集・保存を可能とするソフトウェアツールのことです。ホームページ作成に特化しているさまざまなテキストエディターがあるので、自身の作業内容や活用目的などに合わせ、適したテキストエディターを選んでください。
ホームページの構造作成
次にホームページの構造を作成します。ホームページ作成に使うHTMLの要素は、大きく以下の2つに分けられます。
- headはページの基本情報
head（ヘッド）要素とは、そのページの基本情報を記述している要素のことで、検索結果に表示させるホームページの固有情報です。そのため、テキストエディターには記述されますが、ブラウザには表示されません。
- bodyはページに表示させたい内容
body（ボディ）要素は、ホームページ上に表示させるコンテンツを示す要素です。<body>…</body>とbodyタグで囲んだものはブラウザで表示されるため、ホームページ上に表示させたい内容はすべてbody要素となります。
例えば、head要素およびbody要素は以下のテンプレートのようなタグを使って表記します。
<!DOCTYPE html><!– このファイルはHTMLですという宣言 –> <html><!– ここからHTMLが始まりますというタグ –> <head><!– ここからhead要素で裏の設定ですという宣言 –> <meta charset=”utf-8″><!– 文字化け防止の記述 –><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><!– HTML文書で使用する既定のデータ形式を指定 –> <title>ここにページのタイトルを書く</title><!– ページのタイトルを入れます –> <meta name="description" content="ここにページの説明文を書く"><!– 検索結果ページのタイトル下に表示される説明文を入れます –> </head><!– ここまでがhead要素ですという宣言 –>
<body><!– ここからbody要素でページに表示される内容ですよという宣言 –> </body><!– ここまでがbody要素でページに表示される内容ですよという宣言 –> </html><!– ここまでがHTMLですという終わりの宣言 –>
コンテンツの追加
タグを使って、bodyに見出し、段落、リンク、画像などのコンテンツを追加していきましょう。代表的なものとして、以下の4つのタグがあります。
- 見出しを表す<h1>タグ
<h1>〜<h6>までの数字によるタグが6種類あり、数字が小さいほど大きな見出しを表します。
例：<h1>一番大きな見出し<h1>
- 段落を示す<p>タグ
<p>タグは段落を指定するためのタグで、<p>～</p>で囲まれたテキストは1つの段落であることを示します。
例：<p>文章をここに書く</p>
- リンクを挿入する<a>タグ
「href=」の後ろにあるダブルクォーテーション（” ”）の中に、リンク先URLを載せると、aタグに囲まれたテキストにリンクを挿入できます。
例：<a href=”https://www.△△△.jp/”>リンクを挿入したいテキスト</a>
- 画像を表示させる<img>タグ
「src=」の後ろにダブルクォーテーション（” ”）に挟んで画像ファイルのURLもしくは同じフォルダ内のディレクトリーを載せると、その画像を表示させることができます。
例：<img src=”◯◯◯/◯◯◯/◯◯◯.png”>
これらを<body>タグで囲めば、ホームページのbody要素となります。
<body> <h1>一番大きな見出し<h1> <p>文章をここに書く</p> <a href=”https://www.△△△.jp/”>リンクを挿入したいテキスト</a> <img src=”◯◯◯.png”> </body>
スタイルシートの追加
HTML要素が揃ったら、CSSでホームページの見た目を整える必要があります。
CSS（Cascading Style Sheets : カスケーディングスタイルシート）はスタイルシート言語で、ホームページを記述するHTMLからデザイン要素を切り離し、文書の体裁や見栄え（レイアウト）を表現するために用いられます。
CSSは、要素が画面上でどのように表現されるのかを定義するもので、HTMLとCSSを組み合わせるのが、ホームページ作成の基本となります。
ナビゲーションの作成
HTML文書の中には、その部分がナビゲーションであることを示すnav要素があります。同じホームページ内の他ページリンクやページ内リンクが集まったメニューを、navタグで囲って作成します。
ただし、ナビゲーションに適しているものをほかのリンクメニューと区別するために使用するものですので注意してください。
ナビゲーションには以下のようなメニューが適しています。
＜ナビレーションの例＞
- ヘッダーなどのリンクメニュー（グローバルナビゲーション）
- パンくずリスト
- 記事の目次
- ページ送りのリンク
グローバルナビゲーションは、ホームページの全ページに共通して表示するメニューです。グローバルナビゲーションを作成するには、まずはHTMLファイル（index.html）を用意し、テキストエディターを立ち上げ、<head>内のHTMLコードを下記のように記述します。
サンプルコードは以下のとおりです。
<head> <meta charset="utf-8"> <title>グローバルナビゲーションの作成</title> <meta name="description" content="グローバルナビゲーション作成の演習です"> <link rel="stylesheet" href="css/sample.css"> </head>
<nav> <ul> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> </ul> </nav>
この段階ではまだテキストベースのデザインなので、より魅力的なデザインやUI・UX共に機能性を持たせるためには、CSSのコードで作成したCSSファイル（sample.css）が必要となります。
ホームページのテスト
ホームページは、公開前に適切に機能するかを確認するため、十分にテストを行っておくことが重要です。不具合があった場合は、必要に応じて修正します。
公開前に最低限行うべきホームページのテスト項目は以下のとおりです。
- コンテンツの確認
作成したページに誤字脱字がないか、内容が間違っていないか、画像は崩れることなく正しいものが表示されているかといった、基本的な確認です。
- リンク切れの確認
別ページへのリンクがつながっているかの確認です。
- ブラウザ、デバイス別の表示確認
ブラウザやデバイスによって、レイアウトが崩れる、コンテンツが表示されないなどのエラーが生じないかの確認です。できるだけ多くのブラウザやデバイスで、またバージョンも変えて確認することをおすすめします。
- フォームの確認
お問い合わせフォームがある場合、フォームに入力した内容が正しく送受信されるかを確認します。想定外の入力をした場合や未入力のまま先に進んだ場合など、エラーを発生させるチェックも行います。
- 主要なmetaタグ（titleタグ、descriptionタグ）の設定確認
metaタグと呼ばれるtitleタグやdescriptionタグが正しく設定されているかの確認も非常に重要です。これらのタグが未入力の場合、検索エンジンの評価が正しく受けられません。
ホームページの公開
ホームページを公開する最後の手順です。ここまで作ってきたデータを世界に公開するための環境を構築しましょう。
- ドメインを取得する
ドメインとは、インターネット上でのホームページの住所を表示するためのものです。ドメインを取得するには、ドメイン販売サービスを利用します。
- サーバーを用意する
ホームページのデータを置くサーバーを用意します。サーバーにはクラウドサーバーやVPSなどさまざまな種類がありますが、初心者の方にはレンタルサーバーがコストやメンテナンス面でハードルが低く、おすすめです。
- ドメインとサーバーをつなぐ
ドメインとサーバーをつなぐためには、サーバーにドメインを登録し、ネームサーバーの設定をします。ネームサーバーの設定はドメインを取得したドメイン販売サービスの管理画面から行います。
- ホームページのデータをサーバーにアップロードする
最後にFTPソフトを使って取得したドメインのホストアドレスにアクセスして、ホームページのデータ一式をサーバーにアップロードすれば、作成したホームページの公開は完了です。これで正式なドメイン名のURLでホームページのトップが表示されます。
ドメインの決め方やサーバーについては以下の記事で紹介しています。あわせてご確認ください。
簡単にホームページを作りたいならHTMLエディター
このように、HTMLを使ってホームページを作成するには、たくさんの手順が必要です。しかし、ホームページを作成する方法には、コードの入力や編集がスムーズに行えるように設計されている「HTMLエディター」を利用する方法もあります。
ここからは、Hirameki 7の「マーケティング機能」に付属しているエディター機能を紹介します。
Hirameki 7のエディターは、プログラミング不要で、HTMLやCSSを示すコードがなくても操作できるため、誰でも簡単に高品質な企業のホームページを作ることができます。また、サーバー不要ですぐに公開できるだけでなく、業種ごとのデザインテンプレートが豊富なことも魅力のひとつです。
Hirameki 7には、エディター機能で作成する「ホームページ」のほかにも、「フォーム」「名刺管理」「メール配信」という、デジタルマーケティングの4つの機能がフルセットで備わっており、専門知識がない方でもすぐに使えるのが特徴です。
Hirameki 7を活用したホームページの作成については、こちらを参照ください。
HTMLはホームページの基本！仕組みを知っておこう
ホームページをHTMLでゼロから作成するためには、上記のような知識を習得し、手順を踏まなければなりません。そのためには当然、時間やスキルが必要になります。多少なりともHTMLの基礎知識は必要です。
これが難しいと感じる場合は、HTMLエディターを使うことを検討するとよいでしょう。エディターには有料や無料、オープンソースのソフトウェアなど、さまざまな価格設定やライセンス形態が存在するため、それらを考慮して選ぶ必要があります。しかし使いこなせば、初心者でも簡単にホームページを作成できます。ホームページ制作を考えている方は、ぜひご検討ください！
著者プロフィール
