ホームページ作成をHTMLでおこなう流れを徹底解説！注意点2つも説明

HTMLとは、ブラウザ上に文字を表示させるためのマークアップ言語です。

マークアップとは、テキストや装飾をコンピューターが正しく認識できるようにするために、タグという目印を使うことを意味します。

ちなみに、正式名称は「HyperText Markup Language」です。

 

この章では、HTMLでホームページを作成するメリットを解説します。

HTMLでホームページを作成するメリットは、自由にホームページのレイアウトをカスタマイズできる点です。他サイトと被らないような凝ったデザインにもできます。

ホームページを作成する方法にはさまざまな種類がありますが、他の方法よりもデザインにこだわれるのです。

例えばホームページを作成する他の方法の一つに、ホームページ作成ツールを利用するといったものがあります。

ホームページ作成ツールの方がHTMLを使用する場合よりもホームぺージを簡単に作成できるため、初心者に人気があります。しかし、自由度が低いため、他サイトと似たようなデザインになるといったデメリットがあるのです。

 

少しのミスでホームページのデザインが崩れてしまう点がHTMLでホームページを作成するデメリットです。

少しでも記述を誤ると、ページのデザインが崩れてしまいます。記述を誤った場所がすぐわかれば修正できますが、どこが間違っているか分からない場合は時間をかけて細かくチェックしなければならないのです。

このように、HTMLは直感で扱えるものではありません。HTMLでホームページを作成する場合は、HTMLの知識が必要となるのです。

これまでHTMLを用いたホームページ作成のメリットとデメリットを説明しました。
次に、この章ではHTMLでホームページを作成する流れを解説します。

解説する流れは以下の通りです。

1. 作成ツールを用意する
2. HTMLファイルを作成する
3. HTMLタグを記述する
4. CSSで見た目を整える
5. サーバーの用意をする
6. ドメインを取得する
7. サーバーとドメインを紐づける
8. ファイルをアップロードする

これより順番に解説していきます。

ステップ1：作成ツールを用意する

最初にHTMLでホームページを作成する際に必要なHTMLツールを用意します。

HTMLツールは、以下の2つです。

1. HTMLエディタ
2. メモ帳

HTMLエディタは、HTMLコードの記述に特化したテキストエディタです。タグを自動で補完してくれるため、効率的に記述できます。

また、パソコンに標準で搭載されているメモ帳でも記述可能です。ただし、HTMLコードをベタ打ちすることとなるため、HTMLエディタに比べて記述ミスが起こりやすいというデメリットがあります。

ステップ2：HTMLファイルを作成する

作成ツールを用意したら、次はHTMLファイルを作成します。

複数のHTMLファイルを作成して、最終的に1つのフォルダにまとめたものをサーバー上にアップロードする流れです。

作成ツールを開き、コードを入力します。そして、入力が完了したらファイル名を「.html」として保存してください。

HTMLのファイルの作り方は以上ですが、無事にファイルが作成できているか確認しましょう。

保存したファイルを右クリックして「Google Chromeから開く」を選択してください。

そして、GoogleChrome上で先ほど入力した文字が表示されていると、問題なくファイルは作成されています。

ステップ3：HTMLタグを記述する

次はHTMLタグを記述しましょう。

以下は使用頻度の高いタグの例です。
 

タグ	意味
html	ＨTML文書であることを宣言している起点を定義する要素。
head	タイトルを設定するための要素。
title	ホームページの表題を設定する要素。
body	HTML文書のコンテンツを表わす要素。

ステップ4：CSSで見た目を整える

次は、CSSでテキストのサイズや色・太さや装飾など見た目を設定しましょう。CSSとは、HTMLで作成したホームページにデザインを施す言語です。

以下で使用頻度の高いCSSプロパティを紹介します。
 

プロパティ名	役割
color	テキストの色
font-siza	テキストのサイズ
font-family	テキストのフォント
font-weight	テキストの太さ

 

ステップ5：サーバーの用意をする

サーバーを用意します。サーバーとは、ホームページの情報を保管するために必要なものです。

一般的に有料のレンタルサーバーを使用します。無料のレンタルサーバーもありますが、容量が小さかったり、広告がホームページ上に表示されたりするため有料のレンタルサーバーがおすすめです。

代表的なレンタルサーバーは、以下の通りです。

• エックスサーバー
• カラフルボックス
• ロリポップ！
   

ステップ6：ドメインを取得する

サーバーを用意したら、次はドメインを取得してください。ドメインとは、ホームページの住所にあたるものです。

代表的なドメイン会社は、以下の通りです。

• お名前.com
• ムームードメイン
• バリュードメイン

 

ステップ7：サーバーとドメインを紐づける

サーバーとドメインを用意できたら、それらを紐づける作業をおこないます。それぞれが紐づいていない状態では、まだホームページとして公開できません。

ドメイン側とサーバー側でそれぞれ作業が必要となります。

ステップ8：ファイルをアップロードする

FTPソフトを使用して、サーバーにファイルをアップロードしましょう。FTPソフトとは、サーバーにファイルをアップロードするための転送用ソフトです。

FTPソフトでファイルをサーバー上にアップロードすると、ホームページが公開されて完了です。

 

この章では、HTMLでホームぺージを作成する際の注意点を解説します。

注意点は以下の通りです。

1. ＨTMLのバージョンを確認する
2. スマホに対応させる

これより順番に説明していきます。

HTMLのバージョンを確認する

HTMLを記述する際、冒頭でバージョンを宣言する必要があります。これは、Doctype宣言と呼ばれるものです。

使用するバージョンによって書き方が異なるため、HTMLのバージョンを確認しておきましょう。

なお、HTMLには主に以下の3つのバージョンがあります。

HTML4.01	一般的に使用されているバージョン
XHTML1.0	HTML4.01から派生したバージョン
HTML5	最新のバージョン

スマホに対応させる

ホームページを作成する場合、必ずスマホに対応させておきましょう。スマホに対応させておかないと、スマホでホームページを見たときに読みづらく表示されるからです。

スマホに対応していないホームページをスマホで見ると、文字が小さかったり、ページのデザインが崩れたりします。文章が読みづらいことを理由に、訪問者がページを離脱する恐れもあるのです。

そのため、ホームページを作成する際はスマホにも対応させておきましょう。