ログイン
HTMLを活用したホームページの作成方法｜公開までの手順やコード例やテンプレートを解説
オリジナリティあるホームページを制作したい場合には「HTML」の使用がおすすめです。本記事では、HTMLを活用したホームページの作成方法について紹介します。また、ホームページ制作から公開までの手順を、HTMLコード例や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の基礎知識を身に着けて、ホームページ制作の第一歩へと踏み出してください。
ホームページ制作の記事をもっと読む
-
ご相談・ご質問は下記ボタンのフォームからお問い合わせください。
お問い合わせはこちら