HTMLとは？初心者でもできるホームページの作り方【手順付き】
HTMLでホームページを作りたいと考えたとき、何から始めればよいのか分からないと感じる方は少なくありません。HTMLはWebページの構造を作る基本的な言語ですが、実際に手を動かしてみないと全体の流れはつかみにくいものです。
また、現在はWordPressやWixなどのサービスも普及しており、HTMLを学ぶべきか、ツールを使うべきかで迷うケースも見られます。SEOも意識するなら、HTML Living Standardに準拠した記述を理解しておくことが重要です。この記事では、HTMLとは何かを整理したうえで、ホームページを作成して公開するまでの手順を初心者向けに解説します。HTMLを使う方法とツールを使う方法の違いもあわせて紹介するので、自社に合った作り方を判断する参考にしてください。
HTMLで何ができる？初心者向けにわかりやすく解説
HTMLは、Webページの「構造」を作るための言語です。見出しや本文、画像といった要素をどのように配置するかを定義する役割を持っています。
一方で、見た目のデザインはCSS、動きや処理はJavaScriptが担当します。この3つを組み合わせることで、現在のWebページは構成されています。
そのため、HTMLを理解することはホームページ制作の出発点ともいえます。まずは「構造を作る役割」であることを押さえておくと、その後の理解もスムーズになります。
HTMLでホームページを作る全体の流れ
HTMLでホームページを作成する際は、いきなりコードを書き始めるのではなく、全体の流れを把握しておくことが重要です。
基本的には「ファイルを作成する → コードを書く → ブラウザで確認する → サーバーに公開する」という流れで進みます。
この流れを理解しておくことで、現在どの工程にいるのかが分かりやすくなり、作業の手戻りも防ぎやすくなります。ここからは、それぞれのステップを順番に解説していきます。
HTMLでホームページを作る手順【初心者向け】
ホームページを作成する流れを事前に確認し、社内で効率よく作業を進めましょう。
- HTMLを作成するためのツールを準備
- HTMLでファイルを作成
- HTMLでコードを記述
- CSSで文字に色や太さを変え見た目を装飾
- ブラウザでイメージと違いがないか確認
- サーバーとドメインを契約
- FTPソフトでアップロード
STEP1. HTMLを作成するためのツールを準備
ホームページ作成に必要なのは「Google Chrome」などのブラウザと「テキストエディタ」です。
テキストエディタとはパソコンで文字を書くためのツールで、メモのようなアプリケーションのことです。
例えば動作が速いことで定評がある「Sublime Text」は無料トライアルが用意されており初心者でも始めやすく人気です。
また対応しているOSが幅広く、LinuxやMac・Windowsでも使用できます。
日本語の解説が付いたテキストエディタ「TeraPad」なら、ホームページ作成に必要な機能がすべて揃っています。
無料で使用でき画面がメモのようになっているので、初心者の方でも使用しやすいことも特徴です。
またマイクロソフトが無料で提供する「Visual Studio Code」なら、AzureやGitHubと統合された機能を使用することができるのでツール間の切り替えが必要ありません。こちらもLinux・Mac・Windowsに対応しております。
「サクラエディタ」は、純日本製のWindows向けテキストエディターです。日本人が開発しました。日本語のフォーラムの場があり、日本語で質問ができます。
STEP2. HTMLでファイルを作成
必要なツールが揃ったらHTMLのファイルを作成します。テキストエディタの拡張子を「.html」に変更してください。
通常メモ帳で作成された文字は「.txt」として保存されるのですがHTMLファイルを作るためには拡張子を「.html」に変更する必要があります。
STEP3．HTMLでコードを記述
HTMLファイルができたら、まずページの基本情報を表示させる「head要素」とWebページでコンテンツを示す「body要素」を記述します。
headは実際に表示されませんが、Webページのタイトルやmeta要素の情報も記述してください。
SEOでは、titleとmeta descriptionが重要です。
body要素は実際にホームページで表示させたい内容である見出しや本文を書きます。
まずはコードからではなく、ドキュメント宣言を下記の通りに書きます。
| ＜!DOCTYPE html＞
<html lang=”ja”> |
日本語でのHTMLであると指定します。続いてheadのコードを書きます。
| ＜head＞
＜meta charset=”UTF-8“＞ ＜title＞タイトル＜/title＞ ＜/head＞ |
そしてbodyのコードを書きます。
| ＜body＞
＜h1＞タイトル＜/h1＞ ＜p＞本文＜/p＞ ＜/body＞ |
そして最後にHTMLの閉じタグを記述して締めくくります。
| ＜/html＞ |
テキストエディタのなかには、自動的にホームページで必要なタグを挿入してくれる便利なものもあります。
STEP4．CSSで見た目を装飾
HTMLの記述が完了したら、見た目を装飾してユーザーの見やすいホームページになるように整える作業を行います。
CSSは文字の色を赤や青にしたり、文字に太さをつけて強弱をつけたりすることができます。ファイルの拡張子は、style.cssです。
HTMLのみのコードではまた文字は黒のみで大きさが同じなため単調な印象を与えてしまうので、CSSを使用し情報を伝えやすいページを作成してください。
また、CSSで見た目を整えることはオリジナル性を出し自社のスタイルを確立することもできます。
おすすめ記事：CSSとは？役割と基本的な書き方や注意点を解説
STEP5. ブラウザでイメージと違いがないか確認
HTMLとCSSの記述が完了したら、自分のイメージ通りに表示されるかブラウザを確認してください。
使用するブラウザはGoogle ChromeやMicrosoft Edgeなどいつも使用しているもので構いません。
表示のされ方に、違和感やイメージと異なる点がないか確認していきます。ブラウザによってはCSSの表示のされ方に違いが出ることもあるので複数のブラウザを利用し確認してください。
STEP6．サーバーとドメインを契約
HTMLの記述が完了したら、サーバーの契約をしてドメインを取得しましょう。サーバーは、画像ファイルやテキストファイルなどのデータを保管しておく場所です。ドメインは、サイトの住所となるものです。
おすすめ記事：ドメインとは？ドメインの種類や独自ドメインのメリットを解説
サーバーはさまざまなものがありますが、自社で用意する場合はかなりの費用がかかります。また運用するにはセキュリティ対策などランニングコストの費用がさらに必要となります。
よって、中規模サイトであれば、レンタルサーバーがおすすめです。レンタルサーバーなら月数百円～数千円で利用できます。
おすすめレンタルサーバー
ホームページ作成で安く使い勝手が良いレンタルサーバーをご紹介します。
サーバーが用意できたら、次にドメインを獲得しましょう。
おすすめのドメインレジストラ
ドメインは日本語でなく英語で設定した方が、URLをSNSでシェアしたりする際に文字の変換が起こりません。日本語のドメインは、文字列が変換されスパムのように見えてしまいます。
そのためこだわりがなく英語で設定することが可能であれば、ドメインは英語で設定してください。
STEP7．FTPソフトでスムーズにアップロード
サーバーにドメインを紐付け準備が完了したら、HTMLファイルをアップロードしてホームページを公開していきます。
その際にサーバーへのアップロードはFTPソフトを使用するとスムーズにアップロードすることができます。
FTPソフトはファイルの転送用のソフトウエアで、サーバーのファイルをアップロードしたりダウンロードしたりすることが可能です。FTPソフトを利用することで簡単にアップロードでき、後でHTMLのファイルを上書きしてアプロードしたい際にも手間が掛かりません。
おすすめのFTPソフト
HTMLで作る場合とCMSの違い
ホームページを作成する方法には、HTMLを使って一から作る方法と、CMSを利用する方法があります。
HTMLで作成する場合は、自由度が高く細かいデザインや構造を調整しやすい点が特徴です。一方で、専門的な知識が必要となるため、制作や運用に手間がかかるケースもあります。
CMSを利用する場合は、テンプレートを活用して比較的簡単にホームページを作成できます。更新作業も管理画面から行えるため、運用のしやすさを重視する場合に適しています。
それぞれにメリット・デメリットがあるため、目的や運用体制に応じて選択することが重要です。
FTPを使わないホームページ公開方法
従来はFTPソフトを使ってサーバーにファイルをアップロードする方法が一般的でしたが、現在はより簡単に公開できる方法も増えています。
たとえば、GitHub Pagesのようなサービスを利用すれば、HTMLファイルをアップロードするだけでWebページを公開することが可能です。また、レンタルサーバーによっては管理画面から直接アップロードできる機能が用意されている場合もあります。
初心者の方は、こうした簡易的な公開方法も選択肢として検討すると、スムーズにホームページを公開しやすくなります。
ホームページを構成するプログラミング言語
ここでは、ホームページを作成するためには、どのような言語が必要なのか紹介していきます。
- 文字を表示させるHTML
- 文字を装飾するCSS
- 動きを加えるJavaScript
- データベースと連携するPHP
文字を表示させるHTML
HTMLとは「Hyper Text Markup Language」の略で、記述した文字をブラウザに表示するマークアップ言語です。
ホームページを作成するとき文字を書くだけではブラウザに表示することはできません。HTMLを記述することで、書いた文字や画像が初めてブラウザに表示することができます。
見出しの設定や文字のアレンジもHTMLとCSSを使用することでイメージ通りにブラウザに表示することが可能になります。
ホームページを作成する際には簡単にWebサイトを作成できるCMSもありますが、こちらは決められたテンプレートを使用するため細かい編集がHTMLよりもできません。
では、HTMLではどのようなタグがあるのか代表的なものをご紹介します。
文書の情報や構造を宣言する基本的なタグ
- <!DOCTYPE>：ドキュメントタイプを宣言
- <html></html>：HTML文書であることを宣言
- <head></head>：文書のヘッダ情報を指定
- <body></body>：文書の本体（内容）を指定
- <title></title>：文書のタイトルを指定
- <meta></meta>：文書に関する情報（メタ情報）を指定
- <h1></h1>～<h6></h6>：文書の見出しを指定
- <p></p>：パラグラフ（段落）を指定
- <footer></footer>：サイトコンテンツの下部を指定
サイトの基本的な構造は、上記のタグで構成します。
BODY内で有用なタグ
- 画像の埋め込みをするimgタグ
- リスト表示をさせるul/ol/liタグ
- 表を表示させるtableタグ
- 改行させるbrタグ
SEO対策で重要なタグ
- ページのタイトル表示させるtitleタグ
- 検索ユーザーにページの概要を伝えるmeta descriptionタグ
- 画像が表示されブラウザに画像の代替えテキストを表示させるaltタグ
この3つのタグはSEOで影響力のあるタグです。必ず設定しましょう。
記述ファイルの拡張子
HTMLを記述するファイルは、保存先でテキストファイルである「.txt」でなく専用の拡張子である「.html」で保存してください。「.html」で保存しないと、せっかく実装してもホームページで動作しません。
そのため、ホームページを作成する際にはあらかじめ拡張子が「HTML」であるか確認してください。
文字を装飾するCSS
ホームページの見た目を変更する役割を持っているCSSは、HTMLと組み合わせることでデザイン性のあるホームページを作成することができます。
CSSは「Cascading Style Sheets」略で、文字サイズやカラーまた配置も変更することができます。スタイルシートと言います。
HTMLのみを使用した場合には、白黒で見た目に変化のないホームページになってしまいますが、CSSを使用すると重要な箇所に色を入れたり文字を太くしたりと見た目を装飾できるのです。デザイン部分を担当します。
CSSを使用することで自社のイメージに合った、おしゃれまたはスタイルのあるホームページがつくれます。
おすすめ記事：CSSとは？役割と基本的な書き方や注意点を解説
動きを加えるJavaScript
JavaScriptは、Web上でアニメーションのような動きをWebページに加えることができます。
ホームページ作成で必ず必要ではないですが、動きがあることでよりユーザーに興味を引くこともできます。Webサイトやシステム開発に使用されるプログラミング言語で、より専門的な知識が必要となります。
データベースと連携するPHP
PHP言語は、データベースのサーバーサイド側の言語と言われています。WordPressなどのCMSもPHPで動いています。コラムの記事投稿の文章をデータベースに保存しておいて、PHPで出力して文章を表示します。PHPはプログラム言語でHTML内で記述して使う事ができます。HTMLとPHPでシステムを実装したホームページ作成がほとんど可能です。求人サイトの求人導線やECサイトのカートなどシステム系の実装をしたい場合、PHP言語で作る事が可能です。
HTMLなしでホームページを作る方法（WordPress・Wix）
HTMLのコードを使用せずに簡単にホームページを作成することもできます。ホームページ作成ソフトを使用すればデザインのテンプレートが既に用意されています。
なかでもCMSがおすすめです。
おすすめ記事：CMSとは？CMSの種類とSEO的に使うと良いメリットを解説
WordPress（ワードプレス）は、初心者の方でもセットアップが簡単です。WordPressは、世界で公開されているホームページの3分の1が使用しているほど、幅広く普及しています。
ホームページのデザインプレートも豊富に用意されており、さまざまにあるテーマのなかから自社に合ったデザインを無料で選ぶこともできます。
おすすめ記事：ホームページ作成方法とは？無料で作れるソフトの紹介と選び方を解説
初心者が失敗しやすいポイントと対策
ホームページ作成を失敗しないためのポイントを抑え、ユーザーにとって読みやすく有益な情報を与えられるホームページを作成しましょう。
- エラーにならないようにルールに沿って記述
- スマホに対応しているか
- 複雑なＨＴＭＬタグは避ける
- HTMLの構文チェックができるツールで効率的に
エラーにならないようにルールに沿って記述
HTMLを記述したのにエラーになりブラウザに表示されないという場合もあります。その際は、ルールに沿ってHTMLが記述できているのかを確認してください。
例えばコードには開始タグと終了タグが必要でその間にコードを書くというルールがあります。どちらかが抜けてしまっていても、エラーになり正常にブラウザに表示することができません。
ルールに沿って記述することでエラーが防げます。また、テキストエディタによっては、入力ミスやルールに沿って記述されていないとエラーチェックが表示され教えてくれるものもあります。
スマホに対応しているか
PCのブラウザとスマホに対応しているホームページは、ユーザーの利便性も上がるので閲覧されやすくなります。ホームぺージ作成の際には、PCだけではなくモバイルにも対応した設計にしましょう。
モバイルに対応したホームページは、Googleも推奨しているので検索エンジンからも高い評価を期待できます。ユーザー目線に立った見やすく使いやすいレスポンシブデザインであるホームページにすることが重要です。
おすすめ記事：レスポンシブデザインとは？SEOで重要な理由や対応方法など
複雑なＨＴＭＬタグは避ける
社内でホームページを作成する場合、できるだけわかりやすいHTMLタグを使用することで効率的に作業が進められます。
簡単にグループ化できる「divタグ（ディブタグ）」は一般的に使われる頻度も高く便利ですが、意味の持たないコードなので乱用するとわかりにくくなってしまいます。
そのためできるだけHTML Living Standardに準拠したHTMLコーディングをして、社内で誰が見てもわかるコードを記述することを心掛けてください。
おすすめ記事：SEOで効果を発揮するHTMLタグの置き方を解説
HTMLの構文チェックができるツールで効率的に
便利なツールである「Dirty Markup」や「HTMLエラーチェッカー」を利用すれば、自分では気が付かなかったHTMLの記述のエラーをチェックすることができます。
構文の記述ミスを自分で目視するよりも、格段に速く見つけることができるので効率的に作業が進められます。
まとめ
HTMLはホームページの基礎となる技術であり、構造を理解しておくことでWeb制作全体の流れを把握しやすくなります。一方で、現在はWordPressやWixなどのツールも普及しており、目的や運用体制に応じて作り方を選ぶことが重要です。
実際に手を動かしてシンプルなページから作成してみることで理解が深まり、自社に適した方法も見えてきます。SEOで評価されるHTMLコーディングでは、HTML Living Standardに準拠した記述を意識することが重要です。基本を押さえながら、無理のない形でホームページ制作を進めていきましょう。
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。
