-1.jpeg?width=48&height=48&name=DSC_2387%20(1)-1.jpeg){kind=small}
イチから自分でオリジナルのホームページを作成したいという方には、自由にカスタマイズができるHTMLが向いています。
無料のホームページテーマ・テンプレート
HubSpotのホームページテーマ・テンプレートを使用すれば、ブランドイメージに合ったホームページを簡単に作成できます。コンテンツ作成プロセスをシンプルにして、マーケティング担当者と開発者の効率化を実現しましょう。
HubSpotのホームページ作成機能は無料からご利用いただけるため、お気軽に試してみてください。
しかし、「HTMLでホームページを作る手順が分からない」「難しいコードは書けない」「できれば簡単に作成方法を学びたい」と思っている方も多いのではないでしょうか。
本記事では、HTMLでのホームページの基本的な作り方を、初心者の方でも簡単に作成できるようテンプレートを使用して紹介します。
シンプルなホームページであれば、初心者の方でも比較的簡単に作成できます。本記事の流れに沿って、まずは基本的な作り方を学んでいきましょう。
CMSを活用したWEBサイト作成ガイド & CMS選定シート
Webサイトの作成に必要な機能を比較して最適なCMSを導入しましょう
- Webサイト構築方法別導入検討シート
- WordPress、WIX、Jimdo各システム機能比較表
- CMSサイト構築チェックシート
今すぐダウンロードする
全てのフィールドが必須です。
HTMLとは
HTMLとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）のことで、Webページを作成するための言語です。
HTMLタグと呼ばれるタグを記述することで、特定の命令を出してテキストに意味をもたせられます。例えば、見出しを指定したり、文字の強調をしたりできます。
HTMLについて詳しく記載した記事がありますので、ぜひ参考にしてみてください。
HTMLを使った自作ホームページの作り方
HTMLを使ってホームページを作る手順は5ステップです。
シンプルなページであれば初心者の方でも簡単に作れるため、まずは手順に沿って実際に作業しながら、HTMLでのホームページ作成に慣れていきましょう。
1. 必要なツールの準備
まずは、ホームページをHTMLで作る際に必要な2つのツールを準備します。
- ブラウザ（Google Chrome・Safari・Microsoft Edgeなど）
- テキストエディタ
テキストエディタとは、パソコンでテキストデータを編集するためのアプリケーションです。
パソコンに内蔵されているメモ帳でも問題なくコードを書くことはできますが、本格的にコーディングやプログラミングをしたい場合には、専用のテキストエディタを使用しましょう。
Visual Studio CodeやAtomは、複数のプログラミング用語に対応しており、編集機能が豊富なので、効率的にコーディングができます。
2. ファイルの作成
ここからは、実際にHTMLを記述していきます。
テキストエディタで新しいファイルを作成し、まずは次のように<html>～</html>までを記述します。
コピペを行う場合にはこちらをご利用ください。
<!DOCTYPE html>
<html lang=ja dir=”ltr” >
<head>
<meta charset=”ytf-8” >
<meta name=”viewport” content=”width=device-width, initial-scale=1” >
<title>タイトル</title>
</head>
<body>
</body>
</html>
<html lang=ja dir="ltr" >には、次の2つの属性が含まれています。
- lang属性：ページ全体の言語を指定します。今回は日本語のjaを設定しました。
- dir属性：文章の方向を指定します。横書きなのでltr（left to right）を設定しました。
ファイルの新規作成方法は、お使いのテキストエディタをご確認ください。
HTMLのhead要素
<head>～</head>で囲まれているのがhead要素です。
head要素とは、ページの基本情報を記述する箇所です。ここに記述した内容は、Webブラウザには読み込まれますが、ページには表示されません。
今回記述しているのは次の3つです。
- charset属性：Webブラウザで文字化けが起こらないように、文字コードを指定します。一般的に使用されているのは、UTF-8です。
- viewport設定：デバイスごとに表示領域を設定（レスポンシブデザイン）する属性値のことです。2022年の時点でGoogle は、こちらの記述を推奨しているため、画像のように設定しておきます。
- title属性：ページ内のコンテンツを簡潔に説明する箇所です。検索ページにタイトルとして表示されます。
また、CSSへのリンクなど、必要なその他の情報も記載します。
HTMLのbody要素
<body>～<body>で囲まれているのがbody要素です。
body要素とは、ページのコンテンツを記述する箇所です。bodyタグで囲まれた箇所は、Webページを開いた際に表示されるコンテンツになります。
body要素のコンテンツ作成については、次の章で解説します。
3. HTMLタグを使用してコンテンツ作成
HTMLの大枠を作成したら、Webページのコンテンツを<body>～</body>の間に記述します。
body要素で覚えておきたいのは次の4つのタグです。
- <h>タグ
- <p>タグ
- <a>タグ
- <img>タグ
<h>タグ
見出しを表すタグで、<h1>～<h6>まであります。1から順に大きな見出しとなり、重要度が高くなります。
<p>タグ
<p>タグは段落を表すタグで、文章を<p>～</p>で囲むと1つの段落になります。
body内のコンテンツ作成では、最も使用頻度が高いタグなので覚えておきましょう。
<a>タグ
<a>タグとは、リンクを挿入するタグです。""の中にURLを記述することで、<a>タグに囲まれたテキストにリンクを挿入することができます。
<img>タグ
<img>は画像を表示させるタグです。""の中に画像ファイルのURLを記述することで、画像が表示されます。
4. HTMLファイルで保存しブラウザで確認
コンテンツの記述が完了したら、HTMLファイルとして保存し、ブラウザで実際のページを確認してみましょう。
今回は、例として次の画像のように簡易ページを作成しました。
ファイルを保存する際には、必ず拡張子をHTMLにしておきましょう。Atomのテキストエディタを使用している場合は、名前の後に.htmlと記載すればHTML拡張子として保存されます。
HTMLとしてファイルを保存したのち、実際にWebブラウザで開き、問題なく表示されていることを確認します。
5. サーバーへアップロード
HTMLファイルを作成しただけでは、ホームページとしてまだWeb上に公開されていません。
ホームページとしてWeb上に公開するには、FTPソフトを使用して作成したHTMLファイルをサーバー上にアップロードする必要があります。
FTPソフトとは、サーバーにファイルをアップロードしたり、サーバーにあるファイルをダウンロードしたりするための転送用ソフトのことで、有名なものではFFFTPやFileZillaがあります。
こういったFTPソフトを使い、作成したHTMLファイルを利用中のサーバーへアップロードしたら、ホームページのWeb公開は完了です。
ファイルのアップロードの仕方については各サーバーによって異なるため、お使いのサーバーサイトで確認してください。
HTMLでホームページを作成するメリット
ホームページの内容を自由にカスタマイズできる点が大きなメリットです。
ホームページを作成できるツールを使えば、手早く簡単に完成します。しかし、決められたテンプレートを使用すると自由度が低くなってしまうため、自社のオリジナル性を出すのは難しくなってしまいます。
HTMLで作成すれば、時間と労力はかかりますが、自社のイメージに合うデザインにしたり、必要な機能を入れたりできます。
こだわり抜いたホームページを作成したい場合は、HTMLでの作成をおすすめします。
ホームページをHTMLで作成する際の5つのポイント
エラーを避けて、効率的にHTMLのホームページを作るために、次の5つのポイントを確認しておきましょう。
正確にHTMLタグを記述する
HTMLにはルールがあり、そのルールに沿って正確にHTMLタグを記述することが大切です。
間違えている場合にはエラーとなり、正しくホームページが表示されません。
テキストエディタによっては、自動修正機能や、終了タグを自動で入力してくれる機能が付いているものもあります。そういったテキストエディタを使うことで、ミスを防ぐことができます。
誰が見てもわかるようにする
共同で作業をする場合には、誰が見てもわかるようにコーディングしましょう。
個人サイトとして1人で作業をする場合には必要ありませんが、チームで開発をする場合には、他の人がコードを解析できるように、書き方を統一するなどしておくと良いでしょう。
レスポンシブデザインにする
パソコン検索だけでなく、スマートフォンで検索をする人が多いため、デバイスによって自動的にホームページの表示を最適化する「レスポンシブデザイン」にする必要があります。
HTMLタグでレスポンシブデザインにするには、HTMLのhead要素の見出しで紹介した「ビューポートの設定」を行っておきましょう。
CSS・Javascriptを一緒に学ぶ
HTMLはテキストをマークアップする言語なので、デザインを整えるにはCSS（Cascading Style Sheets）が必要です。
CSSはフォントカラー・背景・配置などを編集できる言語です。読みやすく、おしゃれなデザインのホームページを作るためには、HTMLと一緒にCSSやJavascriptも学んでおきましょう。
HTMLテンプレートを活用する
効率的にHTMLでホームページを作りたい時は、テンプレートの活用がおすすめです。
テンプレートを活用すると、コードをコピー＆ペーストし、テキストや画像を入れ替えるだけで、初心者でも簡単にHTMLでホームページを作成できます。
HTMLのテンプレートを配布しているサイトを3つ紹介しますので、ぜひご活用ください。
CLOUD TEMPLATE
CLOUD TEMPLATEは、1434種類のHTMLテンプレートから、テイスト・用途・カラーでデザインの絞り込みが可能です。
テンプレート数も多く、比較的安価でテンプレートを商用利用できるため、初心者の方は、まずこちらのサイトからテンプレートを探してみると良いでしょう。
TEMPLATE PARTY
TEMPLATE PARTYでは、1,000点以上のテンプレートが無料で配布されており、デザインもシンプルなものから凝ったものまで豊富に揃っています。
「求人サイト向け」や「飲食店向け」など、業種別にデザインを探すことができるため、ビジネスに沿ったデザインにしたい場合におすすめです。
デザインは無料で商用利用可能ですが、テンプレート下部にクレジット表記が入っています。クレジット表記を外したい場合には、ライセンスの購入が必要です。
無料ホームページテンプレート.com
無料ホームページテンプレート.comでは、全てレスポンシブデザインの無料HTMLテンプレートを配布しています。
比較的シンプルなデザインが多いため、コーディング初心者の方が学習サンプルとして使用したい場合などにおすすめです。
こちらもTEMPLATE PARTYと同様に、クレジット表記を外す場合には料金が発生します。
▼ホームページを作るソフトに関する記事はこちら
▼ホームページ制作のCMSに関する記事はこちら
▼おすすめのホームページ制作ツール・アプリはこちら
HTMLを使ったホームページの作り方を学べる無料サイト
HTML／CSSでホームページを作るのであれば、コーディングの基礎を学んでおくと便利です。
この章では、HTML／CSSを使ったホームページ作りを無料で学べるサイトを2つ紹介します。
独学でコーディングを学びたい方は、ぜひ活用してください。
progate
progateの教材は、イラストを中心としたスライドなので、直感的にコーディングやプログラミングを学ぶことができます。
実際に自分でプロダクトを作りながら実践的に学べるため、スキルが身に付きやすいでしょう。
公開されている全てのレッスンを見るには月額1,078円（税込）となりますが、簡単な内容のレッスンであれば無料で利用できるため、まずは気軽に始めたいという方におすすめです。
ドットインストール
ドットインストールは、7,119本のコーディング・プログラミングレッスンの動画を提供しています。
動画は全て3分ごとになっているため、すきま時間を利用して気軽に少しずつ学ぶことができます。
登録は無料で、月額1,080円のプレミアム会員になると全てのレッスンを見ることができるほか、現役エンジニアへの質問も可能になります。
動画で学びたいという方にはドットインストールがおすすめです。
まずはHTMLを使ってシンプルなホームページ作成から
シンプルなサイトであれば、初心者でもHTMLを使って簡単にホームページを作成できます。
機能的でオシャレなデザインにしたい場合には、CSSやJavascriptといった言語も学ぶ必要がありますが、シンプルなサイトであればテンプレートを使って簡単に作成できます。
HTMLやCSSといったコーディングが難しく感じるのであれば、コーディングなしでホームページを作成できる無料ツールも多くあるため、そういったホームページ作成ツールの活用もおすすめです。
![[JAPANESE] website-themes-templates](https://www.hubspot.com/hs-fs/hubfs/%5BJAPANESE%5D%20website-themes-templates.png?width=646&height=226&name=%5BJAPANESE%5D%20website-themes-templates.png)
