HTMLを活用したホームページの作成方法｜公開までの手順やコード例やテンプレートを解説

HTMLとは？

HTMLとは「Hyper Text Markup Language」の略語で、Webブラウザ上に文字やデザインを表示させるための言語です。

HTMLにはあらかじめ決められたタグ(情報の属性を支持するコード)と呼ばれる機能があり、文字列の前後をタグで囲むことで「タイトル」、「見出し」などを定義しています。例えば、以下のような要領です。

＜h１＞ここに見出しとなるタイトルを入力＜/h１＞

上記の一文を囲んでいる＜h1＞＜/h1＞がタグであり、タグによって文字列に属性を定義付けすることを「マークアップ」といいます。HTMLを利用したホームページの作成方法とは、こうしたタグを使いこなしてコンテンツを作り上げることです。

主なHTMLタグ

以下は、よく使われる代表的なHTMLタグです。

タグの名称	意味
titleタグ	そのWebページのタイトル
hタグ	文中の見出しで「h1」「h2」などの数字で大見出し・小見出しを区別する
brタグ	文中の改行
imgタグ	文中に画像を埋め込む
tableタグ	文中に表を設置する
pタグ	文中の段落

上記はあくまで一例であり、HTMLには100を超えるタグが用意されています。タグの種類やルールはあらかじめ決められており、Webブラウザはタグの情報を基に、ソースコードを解釈して表示しています。

▷ホームページを構成する要素とは？考え方や構成する各パーツの名称を解説

▷ホームページの維持にかかる費用と内訳｜維持費を抑えるための秘訣も紹介

HTMLを使ってホームページ制作するメリット

HTMLを使ってホームページを制作するメリットは、優れたカスタマイズ性で自由にページをデザインできる点です。

例えば、文字の大きさや装飾、ページのレイアウト、配置する画像の場所や大きさなどを、一言一句全て自由に設定できます。

ただし、WordPressに代表されるWebページ制作のパッケージを併用する場合には、あらかじめそのパッケージに搭載されているレイアウトから、全体のデザインを大まかに選択することが一般的です。一方で、全てをHTMLで作成する場合には、こうした制限は一切ありません。

▷ホームページの集客方法｜集客できない原因や具体的な方法・得られる効果を解説

HTMLによるホームページ制作の公開までの手順

HTMLを使ってホームページを作成し、Web上に公開するまでの手順を簡単に解説します。

必要なツールを準備する

HTMLを使ってホームページを作成する場合、必要なツールは以下の2点だけです。

• テキストエディタ
• Webブラウザ

テキストエディタはPC上で文字を入力するツールであり、Windowsに標準搭載されている「メモ帳」などが代表的です。ただし、メモ帳でもホームページの作成は可能ですが、HTMLを書くことに特化したツールを使用したほうが便利かつスムーズです。

WebブラウザはGoogle Chromeなど、普段から使用しているもので問題ありません。既に公開されているページのHTMLの確認や、自身が作成したページのレイアウトを確認するために使用します。

基本のHTMLコードを記述する

ツールを準備したら、テキストエディタに基本となるHTMLコードを記述していきます。

主なHTMLコードは、以下の通りです。

HTMLコード	意味
＜!DOCTYPE html＞	HTMLを記述する際の前置き
＜html＞＜/html＞	HTMLの起点
＜head＞＜/head＞	Webページの設定を記述するエリア(Webブラウザでは表示されない)
＜meta charset="utf-8"＞	文字エンコードの指定(文字化けを防止するための記述)
＜meta content="width=device-width, initial-scale=1" name="viewport"＞	さまざまなデバイスで正常にページを表示させるための記述
＜title＞＜/title＞	Webページのタイトルを記述するエリア
＜body＞＜/body＞	Webブラウザで実際に表示される部分を記述するエリア

上記のタグは、ホームページの骨組みともいえる部分であるため、HTMLを書くための専用ツールの多くは、これらのHTMLコードが自動的に挿入される機能が備わっています。

CSSでデザインを加える

CSSとは「Cascading Style Sheets」の略語で、Webページに文字のサイズや色、レイアウトなどのデザインを定義して、HTMLをより魅力的にするためのプログラミング言語です。代表的なCSSコードは、以下の通りです。

CSSコード	意味
font-size: ◯px;	文字のサイズを指定する
background-color: #(カラーコード);	背景色を指定する
padding: ◯px ◯px;	余白を指定する
border: ◯px	指定した太さの枠線を付ける

HTMLファイルを作成する

HTMLコードを記述し終えたら、拡張子「.html」を付けてファイルを作成(保存)します。

拡張子を「.html」に変えることではじめて、ソースコードがHTMLとしてブラウザに解釈されるようになります。なお、ファイルを保存する場所に特別なルールはありませんが、作成したファイルを見失わないように、デスクトップなどのわかりやすい場所に保存するのが一般的です。

HTMLファイルをブラウザで表示し確認する

HTMLファイルを作成したら、普段使用しているブラウザでファイルinを開き、どのように表示されるかを確認してみましょう。

HTMLコードはすべて文字列のため、実際にどのように表示されるかをイメージするにはある程度の慣れが必要です。しかし、上記の手順でいつでも作成中のページを確認できるため、慣れるまでは繰り返しブラウザで確認しながらページを構築していくとよいでしょう。

ホームページを公開する

続いて、作成したホームページを公開するために、サーバーとドメインを用意します。

ホームページを家とした場合、サーバーは家を建てるための土地、ドメインは住所を表すものと考えるとわかりやすいでしょう。

サーバーは比較的安価なコストで利用できるレンタルサーバーを借りつつ、ドメインはレンタルサーバー会社、またはドメイン専門会社から購入するのが一般的です。サーバーとドメインの用意ができたら「FTPソフト」を用いて、HTMLファイルをサーバーにアップロードすればWeb上での公開はおおよそ完了です。

▷ホームページに必要となるドメインとは？取得する方法や費用・おすすめのサービス

ホームページ制作に役立つHTMLテンプレート

ホームページ制作に便利なツールとして「HTMLテンプレート」が広く活用されています。

HTMLテンプレートとは、HTMLファイルを作成する際のひな型です。HTMLファイルにHTML拡張言語が埋め込まれており、HTML・CSS・画像など、Webサイトの制作に必要なファイルが、すぐに編集できるようにパッケージングされています。

ここでは、特に役立つ代表的なHTMLテンプレートの紹介サイトを4つ紹介します。

Template Party

Template Partyでは「ビジネス向け」、「ショップ向け」、「個人サイト向け」、「初心者向け」など、1,000点を超える幅広いジャンルのテンプレートが揃っています。

テンプレートのほかにも、数千点の写真やイラスト、ロゴなどの素材もすべて無料で提供されているため、ある程度の知識があれば、テンプレートや素材を自由に組み合わせて、オリジナリティの高いホームページを制作できるでしょう。

無料ホームページテンプレート.com

無料ホームページテンプレート.comは、高品質で商用利用可能な無料テンプレートを配布しているサイトです。

企業サイト・店舗サイト・サービスサイトなどでの利用も想定しており、おしゃれかつクールなテンプレートが幅広く揃っています。各テンプレートには、ワンクリックで表示できるデモサイトとスマートフォン上での表示シミュレーションが用意されており、導入後のイメージがしやすい作りになっています。

HTML5 UP

HTML5 UPは、自由に使えるホームページテンプレートが多数提供されている海外サイトです。

主にファッション業界やクリエイティブ業界に相性のよい、シンプルかつおしゃれなテンプレートが揃っています。そのサイトデザインも洗練されており、画面をスクロールするだけで次々とテンプレートが表示され、気になるデザインを見つけたらデモ画面を開くという、直感的に扱いやすい作りになっています。

CLOUD TEMPLATE

CLOUD TEMPLATEは、ホームページ制作会社でも使える、高品質なWordPressテーマを提供しているサイトです。

1,000を超えるHTMLテンプレートのほか、WordPressでそのまま使える有料テーマも多数公開されています。若干の費用がかかりますが、それだけ、高品質で他とは重複しにくい美しいホームページを作れるでしょう。

WordPressでホームページを作る場合にもおすすめです。

HTMLテンプレートを活用し手軽にホームページ制作をしよう

HTMLとは、Webブラウザ上に文字やデザインを表示させるための言語です。

比較的簡単かつ自由にデザインやレイアウトを設計できるため、世界中で幅広く利用されています。近年は便利なHTMLテンプレートが多数登場しているため、HTMLの知識がない初心者でも簡単に高品質なホームページを作れるようになっています。デザインの選択肢も非常に豊富なため、好みにあったデザインが必ず見つかるでしょう。HTMLの基礎知識を身に着けて、ホームページ制作の第一歩へと踏み出してください。