HTMLでホームページを作成するにはどうすればいいんだろう？
ホームページを作るのにパソコン以外で必要なものってある？
国内におけるIT人材不足の深刻化を背景に、ITエンジニアやWebデザイナーといったITスキルがある人材の需要は増し、他の職種に比べ高い報酬を設けるケースが増えてきました。
そんななか、転職や副業での収入獲得などに活かすため、ホームページの制作スキルを養おうと考えている人は多いですよね。
ただ、一から自力でホームページを作りたいと考えているものの、具体的な方法がわからない人もいるでしょう。実のところHTMLを活用したホームページは30分もあれば作成できるのです。
この記事では基本的な流れや必要なものも踏まえ、HTMLを用いたホームページの作り方を、ステップ形式で解説します。作成時のポイントや作成後に習得したいおすすめ言語も紹介するので、ぜひ参考にしてください。
- HTMLでのホームページ作成は30分あれば可能
- 作成にはテキストエディタとWebブラウザが必要
- ホームページの詳細が明確なほど希望を実現しやすい
なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。
受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。
本記事の解説内容に関する補足事項
本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。
また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。
記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。
HTMLでホームページを作成する基本的な流れ
はじめに、HTMLでホームページを作成する基本的な流れをおさえておきましょう。基本的な手順は、次のとおりです。
- 1.HTMLを記述するためのツールを導入
- 2.HTMLファイルの作成
- 3.基本的なHTMLの枠組みを作成
- 4.本文のコンテンツを追加
- 5.リンクと画像の挿入
- 6.ページのプレビューと修正
- 7.作成したファイルをサーバにアップロード
HTMLでホームページを作成するには、HTMLを記述・実行するためのツールが必要です。まずは開発に必要となるツールを導入し、HTMLファイルや基本的な枠組みを作成します。その後、テキストや表示場所などを規定するHTML、Webサイト上のデザインを作成するためにCSSコードを記載します。
そのほか、必要に応じてリンクや画像などコンテンツを追加し、全体のコードが作成できたらWebページをプレビューして必要に応じて修正を行います。完成したファイルをサーバにアップロードすれば完了です。手順を見ると難しそうですが、実際は個々の作業は難しくありません。
HTMLでのホームページ作成に必要なもの
ここからは、HTMLでのホームページ作成に必要なツール、2つを紹介します。
Webブラウザ
Webブラウザは、作成したHTMLファイルを表示し、コーディングの結果を確認するために使用します。
HTMLコードがブラウザでどのように表示されるかを確認する作業です。
代表的なブラウザには「Google Chrome」「Mozilla Firefox」「Safari」などがあります。ほとんどのブラウザは最新のHTMLをサポートしており、開発者にとって強力なツールです。
テキストエディタ
テキストエディタは、HTML・CSSなどのコードを書くために使われるツールです。
テキストエディタには多くの機能が備わっており、コードの編集を簡単かつ効率的に行えます。初心者にも扱いやすいNotepad++や、より高度な機能を備えたSublime Text、プロフェッショナル向けのVisual Studio Codeなどがあります。
テキストエディタでは、コードを見やすくするためのフォント・色変更やエラー表示など便利な機能を利用可能です。
各種機能を使いこなすことで、HTMLによるホームページ作成がよりスムーズかつ効果的に行えます。
なお、次の記事でおすすめのプログラミングエディタを解説しているので、あわせて参考にしてください。
→ おすすめプログラミングエディタ9選！初心者向けに選び方も解説
HTMLでホームページを作る5STEP
ここからは、HTMLを用いたホームページの作り方を、5つのステップにまとめて紹介します。
- STEP1：基本となるコードを書こう（所要時間：5分）
- STEP2：見出しと本文を書こう（所要時間：5分）
- STEP3：どんな状態か確認してみよう（所要時間：10分）
- STEP4：画像やリンクを入れてみよう（所要時間：5分）
- STEP5：作成したホームページを公開してみよう（所要時間：5分）
なお、今回の手順で作成すると次のようなホームページが制作できます。あらかじめ完成形のイメージを確認しておきましょう。
また、今回はブラウザに「Google Chrome」、テキストエディタには「Visual Studio Code」を使用します。
また、STEP1へ進む前に、下記の準備は整えておきましょう。
- Visual Studio Codeのインストール
- 新しいプロジェクトの設定
Visual Studio Codeは、公式サイトからダウンロードしてインストールしてください。Windows・MacOS・Linuxで利用可能です。
インストールが完了したら、新しいプロジェクトの設定を行いましょう。Visual Studio Codeを開き、「ファイル」メニューから「新しいフォルダー」を選択。新しいプロジェクト用のフォルダーを作成します。
作成したフォルダーを開いて、「ファイル」メニューから「新しいファイル」を選び、ファイル名に「index.html」と入力して保存すれば準備完了です。
ファイル名を付ける際は下記2点を意識しましょう。
- 必ず半角英数字にする
- 必ず「ファイル名.html」のように、一番後ろに「.html」を入れる
こうしないとバグが起きたり、パソコンが「これはHTMLなんだな」と認識しなかったりしてしまうので要注意です。保存場所はどこでもOK。自分がわかりやすいところに保存しましょう。
STEP1：基本となるコードを書こう（所要時間：5分）
まずは、テキストエディタで基本となるHTMLコードを記載しましょう。
インストールされているVisual Studio Codeを開き、新規ファイルを選択します。新しく開いたファイルに、以下の基本的なHTML構造を入力します。
<!DOCTYPE html><!-- このファイルはHTMLですという宣言 --> <html><!-- ここからHTMLが始まりますというタグ --> <head><!-- ここから裏の設定ですよという宣言 --> <meta charset="utf-8"><!-- 文字化け防止の記述 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- ややこしいので無視してOK --> <title>30分で作るホームページ</title><!-- ページのタイトルを入れます --> </head><!-- ここまでがうらの設定ですよという宣言 --> <body><!-- ここからページに表示される内容ですよという宣言 --> </body><!-- ここまでがページに表示される内容ですよという宣言 --> </html><!-- ここまでがHTMLですという終わりの宣言 -->
HTMLの基本構文は、どのようなホームページを作るときも使用します。基本の型やルールを覚えれば、ホームページ作成経験がない人でも作業をしやすいです。
STEP2：見出しと本文を書こう（所要時間：5分）
HTMLの基本構文が記述できたら、見出しと本文を記載しましょう。
下記の「見出し」「本文」と書かれた箇所にホームページで表示したいテキスト内容を記載します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>30分で作るホームページ</title> </head> <body> <h1>見出し</h1> <p>本文</p> </body> </html>
具体的には、下記のようにホームページのタイトルや記載するテキスト内容を記載します。HTMLコードでは、改行やテキストサイズの変更など指示が可能です。
<h1>30分で作るホームページ</h1><!-- 見出し --> <p>初心者でも30分でホームページは作れます。難しいことは何もありません。まずはサクッと作って、流れをしっかり掴んでいきましょう</p><!-- 本文 -->
下記のようになればOKです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>30分で作るホームページ</title> </head> <body> <h1>30分で作るホームページ</h1> <p>初心者でも30分でホームページは作れます。難しいことは何もありません。まずはサクッと作って、流れをしっかり掴んでいきましょう</p> </body> </html>
自分が作成したいホームページの内容に従って、コードを作成しましょう。
STEP3：どんな状態か確認してみよう（所要時間：10分）
HTMLのコードが作成できたら、次は作成したコードがブラウザ上でどう見えるか確認しましょう。
HTMLファイルを保存後、ファイルを右クリックして「エクスプローラーで表示」を選択。表示されたファイルをダブルクリックするか、Google Chromeで直接開けばブラウザ表示を確認できます。
確認してみると、上画像のように先ほど入力した見出しと本文が表示されていました。
またVisual Studio Codeの拡張機能「Live Server」をインストールして、HTMLファイルをリアルタイムでプレビューする方法もあります。ブラウザ表示をチェックして、見た目の変更が必要な場合は修正してください。
STEP4：画像やリンクを入れてみよう（所要時間：5分）
必要に応じて、画像やリンクを挿入しましょう。
<img> タグ内に画像ファイルのパスを正確に指定すれば、任意の画像を挿入できます。
<img src="test.jpg" alt=""><!-- 画像を表示 -->
また<a> タグを使用すれば、他のWebサイトへのリンクを作成できます。リンクを活用すれば、商品ページや訴求ページへ読者を誘導できるため、ビジネス向けのホームページも作成可能です。
<a href="https://www.sejuku.net/blog/">解説していたブログはこちら</a><!-- リンクを表示 -->
最終的には、下の表示・コードになればOKです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>30分で作るホームページ</title> </head> <body> <h1>30分で作るホームページ</h1> <p>初心者でも30分でホームページは作れます。難しいことは何もありません。まずはサクッと作って、流れをしっかり掴んでいきましょう</p> <img src="test.jpg" alt=""> <a href="https://www.sejuku.net/blog/">解説していたブログはこちら</a> </body> </html>
ここまでできたら、もう一度保存をしておきましょう。
STEP5：作成したホームページを公開してみよう（所要時間：5分）
HTMLコードのチェックが完了したら、ホームページを公開しましょう。
テキストエディタで作成したホームページは、公開されるまで特定の人しか閲覧できません。たくさんの人に見てもらうには、ネット上に公開する必要があります。そのために必要なのが、作成したホームページの置き場であるサーバです。
今回のような個人的に利用する小規模なサイトであれば、無料のホスティングサービス（サーバをレンタルできるサービス）を利用するのがおすすめです。
サーバが決まったら、次にファイルをアップロードします。
作成したファイルはサーバにアップロードすることで、ブラウザ上に表示できます。FFFTPやWinSCPなどの「FTPクライアントソフトウェア（接続する側のコンピューター/ソフトウェア）」を使用すれば、簡単にHTMLファイルをサーバにアップロード可能です。
アップロードが完了したら、ブラウザにアクセスしてホームページが正しく公開されているか確認してください。ページの表示内容や遷移機能などを確認して問題なければ、作業は完了です。
上記でホームページの作成手順は以上です。ここまで解説してきたとおり、HTMLを用いたホームページは30分と短い時間で作成可能です。ただ、なかには自力で進められるか、不安な人もいますよね。
そんな人は、スクールで学んでみるのはいかがでしょうか？
侍エンジニアはあなたが作りたいホームページはどうやったら作れるのか、そのためにどんな勉強をすればいいのかを伺い、オリジナルカリキュラムをご用意します。
現役エンジニアと学習コーチが2名体制で学習をサポートするため、途中で挫折する心配はありません。「受講生の学習完了率98%」という実績からも、侍エンジニアなら挫折しづらい環境で学習を進められるといえます。
自力でホームページが作成できるか不安な人は、ぜひ気軽にご相談ください。
HTMLでホームページを作る際のポイント3つ
HTMLでホームページを作成する際には、ポイントを押さえることで効果的かつ魅力的なものを作成できます。
ここでは、HTMLでホームページの作成を行うときのポイントを、3つまとめて解説します。
どんなサイトにしたいかを決めておく
ホームページを作る前に、作成する目的や希望するスタイルを明確にすることが重要です。
ホームページといっても、ビジネス向け・個人向け・ポートフォリオなど種類によって実装すべき機能やデザインは異なります。
はじめにどのようなホームページを作成するか明確にすれば、必要な機能やデザインを漏れなく実装できるはずです。
コードを暗記しようとしない
HTMLでホームページを作成するときは、コードを暗記する必要はありません。
すべてのコードを暗記するのは、非効率的で時間の浪費につながります。代わりに必要なタグや属性の使い方を理解し、状況に応じて適切なコードを調べられる力が必要です。
またインターネット上には役立つ情報が豊富にあるため、必要に応じて活用しながらコード作成に慣れることをおすすめします。
逐一動作をテストする
希望のホームページを作成するためにも、定期的に動作をテストしましょう。
ホームページの各機能を作成した後、都度ブラウザでページが正しく表示されるか確認する必要があります。スマートフォンやタブレットなど、異なる画面サイズで見たときにも綺麗に見えるか、クリックやスクロールなど動きがスムーズであるかをチェックしてください。
すべてが完成してからテストした場合、大規模な修正が発生するリスクもあります。反対に定期的に動作をチェックすることで、修正の手間を減らせます。
ホームページ作成を効率化しつつ、ユーザーが見やすいコンテンツを作成するためにも定期的なテスト作業を行いましょう。
HTMLでのホームページ作成後に習得したいおすすめ言語
HTMLで作成したホームページをさらに魅力的にするには、他のプログラミング言語習得がおすすめです。複数の言語を習得すれば、デザインや機能の向上も可能です。
ここでは、HTMLで作成したホームページのアレンジを踏まえ、作成後に習得したいおすすめのプログラミング言語を紹介します。
CSS
CSSは、Webサイトの見た目を整えるための言語です。
CSSを使うと色やフォント、レイアウトなどのスタイルを自由に設定できます。例えば、上記の手順で作成したホームページの「titleタグの下」に下記のコードを貼り付けると、次のような装飾されたページに劇変します。
<style>
h1 {
font-weight: normal;
padding-bottom: 10px;
text-align: center;
position: relative;
margin: 0 0 30px 0;
letter-spacing: 5px;
}
p {
width: 50%;
line-height: 2;
display: inline-block;
background-color: #03A9F4;
padding: 20px;
position: relative;
z-index: 999;
margin: 50px 0 0;
color: #fff;
letter-spacing: 2px;
}
a {
color: #fff;
text-decoration: none;
background-color: #F44336;
display: block;
padding: 15px 25px;
border-radius: 5px;
box-shadow: 0 4px 0 0 #9e2b23;
font-weight: bold;
width: 300px;
text-align: center;
margin: 110px auto 0;
letter-spacing: 2px;
}
h1::after {
content: "";
display: block;
border-bottom: solid 5px #2196F3;
position: absolute;
width: 100px;
right: 0;
left: 0;
margin: auto;
bottom: -5px;
}
html {
background-color: #a8e4ff;
}
body {
background-color: #fff;
padding: 30px 30px 30px;
max-width: 700px;
margin: 20px auto;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.18);
border-radius: 3px;
position: relative;
}
img {
height: 300px;
display: inline-block;
vertical-align: top;
position: absolute;
right: 30px;
}
</style>
HTMLで作成したページの内容が良くても、デザインが悪ければ訪れた人の印象は良くありません。CSSを学ぶことで、Webサイトを美しく整え、訪れた人に好印象を与えられるのです。
なお、CSSの特徴やできることをより詳しく知りたい人は次の記事を参考にしてください。
→ CSSとは？できることや書き方を初心者向けにわかりやすく解説
JavaScript
JavaScriptは、Webサイトに動きを加えるための言語です。
たとえば、ボタンをクリックするとアクションが起こる設定やページに新しい情報を表示させる機能が作成できます。
JavaScriptを学ぶことで、ユーザーが使いやすくひきつけられるホームページを作成できるのです。
なお、次の記事でJavaScriptでできることや特徴を解説していますので、あわせて参考にしてください。
→ JavaScriptとは？初心者向けに特徴や学習方法をわかりやすく解説
PHP
PHPは、サーバ上で動作するプログラミング言語です。PHPを使うと、ユーザーからの入力を受け取り、それをもとにデータベースと連携して動的なコンテンツを生成できます。
たとえば、ユーザーが入力した情報をもとにカスタマイズされたメッセージを表示したり、ユーザーアカウントを管理したりできます。PHPを学ぶことで、より複雑で実用的なホームページを構築できるのです。
なお、次の記事でPHPでできることや特徴を解説していますので、あわせて参考にしてください。
→ PHPとは何かわかりやすく解説！できることや将来性、学習方法も紹介
挫折なくホームページの作成スキルを習得するなら
ここまで解説してきたように、ホームページ作成にはプログラミングスキルが必要不可欠です。ただ、なかには
途中で挫折したらどうしよう…
と不安な方もいますよね
実のところ、ホームページ作成といったプログラミング学習で挫折する独学者は多くいます。事実、弊社の調査では
- 不明点を聞ける環境になかった
- エラーが解決できなかった
- モチベーションが続かなかった
などの理由から、87.5%の独学者が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。
調査概要：プログラミング学習の挫折に関するアンケート
調査対象：10代〜80代の男女298名
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
掲載元：PR TIMES
いざ独学でプログラミングやWebデザインを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「スキルを身につけるのって思っていたよりも難しいんだな…」とオブジェクト指向言語の習得自体を諦めかねません。
仮にわからないことを飛ばしながら勉強を進めたとしても、Webデザイナーへの転職や副業での収入獲得を実現できるほどのスキルが身につかなければ、結局後悔することになります。
そこで、おすすめしたいのが「SAMURAI ENGINEER（侍エンジニア）」です。
| 分割料金 | 一括料金 | 受講期間 |
|---|---|---|
| 4,098円~ | 16万5,000円~ | 1ヶ月~ |
- 転職・副業・独立などの目的に特化したコースあり
- 累計指導実績4万5,000名以上
- 給付金活用で受講料が最大70%OFF
侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。
先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、スキル習得するのは非常に難易度が高いといえます。
しかし、侍エンジニアでは
- 現役エンジニア/Webデザイナー講師によるマンツーマンレッスン
- 現役エンジニア/Webデザイナーに質問できるオンラインでのQ&Aサービス
- 不安や悩み・勉強の進み具合を相談できる学習コーチ
といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境で学習を進められるといえます。
また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもWebデザイナーへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。
最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。
なお、侍エンジニアでは最大70%OFFで受講可能な「給付金コース」を提供中。金銭面での支援を受けつつ、理想のキャリア実現に向けたスキルの習得から、転職活動・就業後のフォローアップ(※1)までを一貫してサポートしてもらえます。
※1：転職後の1年間、転職先での継続的な就業や転職に伴う賃金上昇などのフォローアップ
学習と金銭面をどちらもサポートしてくれる侍エンジニアなら、未経験からでも安心してITエンジニアやWebデザイナーへの転職・副業での収入獲得などの目的が実現できますよ。
公式サイトで詳細を見るまとめ：まずは手を動かすことが大事
今回は、HTMLでのホームページ作成方法を紹介しました。
ホームページを作る際には、実際に手を動かしてみることが重要です。簡単なHTMLファイルから始めてテキストや画像を追加し、次にCSSでスタイルを加えてみましょう。慣れてきたらJavaScriptを使って、ページに動きを取り入れるのも良いでしょう。
問題やエラーに直面しても、解決する過程で多くを学べます。経験が自信につながり、さらに複雑なページ作成に挑戦できるので、本記事を参考にホームページ作成に取り組んでください。
この記事の監修者
フルスタックエンジニア
音楽大学卒業後、15年間中高一貫進学校の音楽教師として勤務。40才のときからIT、WEB系の企業に勤務。livedoor（スーパーバイザー）、楽天株式会社（ディレクター）、アスキーソリューションズ（PM）などを経験。50歳の時より、専門学校でWEB・デザイン系の学科長として勤務の傍ら、副業としてフリーランス活動を開始。 2016年、株式会社SAMURAIのインストラクターを始め、その後フリーランスコースを創設。現在までに100名以上の指導を行い、未経験から活躍できるエンジニアを輩出している。また、フリーランスのノウハウを伝えるセミナーにも多数、登壇している。
