• トップ
  • Web知識
  • ホームページ作成をHTMLでおこなう流れを徹底解説!注意点2つも説明

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

「ホームページ作成をHTMLでおこなう流れが知りたい」と気になってはいませんか。

ホームページを無料で作成できたり、デザインにこだわったりできるHTML。
しかし、他のホームページ作成方法よりも手順が多いため、どのように作成すればよいかわからない方もいるでしょう。

そこで、本記事ではホームページ作成をHTMLでおこなう流れを解説します。

また、注意点も説明するため、HTMLでホームページの作成を検討している方は参考にしてください。

 

そもそもHTMLとは

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

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

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

 

HTMLでホームページを作成するメリット

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

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

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

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

ホームページ作成ツールの方が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 HTML文書であることを宣言している起点を定義する要素。
head タイトルを設定するための要素。
title ホームページの表題を設定する要素。
body HTML文書のコンテンツを表わす要素。


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

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

以下で使用頻度の高いCSSプロパティを紹介します。
 
プロパティ名 役割
color テキストの色
font-siza テキストのサイズ
font-family テキストのフォント
font-weight テキストの太さ
 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

HTMLでホームページを作成する際の注意点

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

注意点は以下の通りです。
  1. HTMLのバージョンを確認する
  2. スマホに対応させる
これより順番に説明していきます。

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

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

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

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

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


スマホに対応させる

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

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

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

 

まとめ:流れを理解してHTMLでホームページを作成しよう

本記事では、htmlでホームページを作成する方法を解説しました。

HTMLでホームページを作成すると、自由自在にデザインにこだわれます。しかし、少しでも記述を間違えると、ページ全体のデザインが崩れてしまう可能性があることに注意しましょう。

本記事を参考にして、HTMLでホームページを作成してください。

ちなみに、当社ハイファクトリではホームページの作成サービス「ウェブサクッ!」を提供しております。格安で高品質のホームページが完成するため、手間をかけずにホームページを作成したい場合は利用を検討してみてはいかがでしょうか。