<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ホームページのタイトル</title>
</head>
<body>
  <h1>見出しタイトル</h1>
  <p>これは段落（パラグラフ）です。</p>
  <a href="https://example.com">リンクの例</a>
</body>
</html>

HTMLの基本的な仕組みと基本タグとは？

HTML の仕組みはシンプルで、「タグ」と呼ばれる記号を使って Web ページを構築します。以下は、覚えておきたい基本的な HTML タグです。

<!DOCTYPE html> ~ </html>
HTML5 文書であることを宣言します。このタグでページ全体を囲みます。
<html lang="ja">
HTML コードの始まりを示すタグです。lang属性で言語（日本語）を指定してています。
<head>
文書のヘッダ情報を記述します。ここに文字コード宣言（<meta charset="UTF-8">）やタイトル（<title>）、CSS やスクリプトの読み込み（<link>や<script>タグ）を入れます。
<body> ~ </body>
文書の本文（実際に表示される内容）を記述します。サイトに表示したい文章や画像、リンクなどの要素はすべてこの中に書きます。
<h1>〜<h6>
見出しを表します。<h1>が最も大きな見出し、<h6>が最も小さな見出しになります。
<p>
段落を表します。文章のまとまりごとに段落タグで囲みます。
<a href="">
ハイパーリンク（リンク）を表します。href属性で遷移先のURLを指定できます。

例： <a href="https://example.com">リンクのテキスト</a>

<img src="">
画像を表示するタグです。src 属性で画像ファイルのパスを指定し、alt 属性で代替テキストを記述します。

例：  <img src="sample.jpg" alt="サンプル画像">

【応用】Web ページにデザインを追加するには？

HTML だけでは文字通り構造を記述するだけなので、見た目の装飾（文字の色やレイアウトなど）はできません。

CSS（Cascading Style Sheets）というスタイル指定用の言語を用いてデザイン（ページの見た目）を整えます。

たとえば「見出しを赤色にしたい」「段落の余白を広くしたい」といった指定はCSS で行います。同様に、JavaScript というスクリプト言語を使えば、ボタンをクリックした時に動的な動きを付けるなど、ページに機能や動きを与えることができます。

HTML はこうした CSS や JavaScript と連携させることで、構造＋デザイン＋動きが揃ったリッチな Web ページを実現できるのです。

HTML の知識なしでホームページを作成するには？

HTML をゼロから書くのは時間がかかります。効率よくホームページを作るなら、Wix のようなオールインワンのホームページ作成ツールを使うのがおすすめです。

Wix のようなノーコードホームページ作成プラットフォームを使えば、以下の簡単なステップでウェブサイトを構築できます。

デザインテンプレートを選ぶ
各ページに必要な内容を入力する
ボタン1つで公開

Wixは、必要な HTML や CSS を自動的に処理し、デザイン性の高いサイトが完成します。特に以下のような方におすすめです。

HTML を学ぶ時間が取れない方
短期間でホームページを公開したい方
テキストや画像を編集するだけで理想のデザインを実現したい方

あらかじめ用意された豊富な HTML テンプレートからお好きなデザインを選び、画像や文章を自分のものに置き換えていくだけでサイトが完成します。もちろん、HTML ファイルをセーブするための無料レンタルサーバーやドメイン登録などのホームページ運用を一元化することができ、サイトの運営を効率化できます。

直感的なノーコードプラットフォームで、プログラミングやコーディングの知識が一切なくても、プロが作ったような Web サイトを簡単に作れるため、初心者にとって最適なサービスです。

Wix でホームページを作成するメリット

豊富な HTML テンプレートがすべて無料で利用可能
サイト管理やドメイン設定も1か所で完結
カスタマーサポートも充実しているので初心者でも安心

もっと詳しく ▶︎ Wixでのホームページ作成方法を見る

さらに、開発者向けの機能 Velo by Wix を利用すれば、HTML や JavaScript を利用したカスタマイズも可能です。Wix は無料プランがあり、ほとんどの機能が無料で使い始められるのも嬉しいポイントです。

まずは気軽に試してみて、使い勝手を確認してから本格利用することもできます。まずは Wix を使って自分だけのホームページを手軽に作成することから始めましょう。

HTMLでホームページを作成する手順

実際にHTMLを使う場合、以下の手順で進めてみましょう。

1. テキストエディタの準備

パソコンに標準搭載されている「メモ帳」や無料の「Visual Studio Code」などのエディターを開きます。

2. HTMLファイルの作成

先ほど紹介したHTMLの基本構造をコピーして、ファイル名を「sample.html」に変更して保存します。

3. 基本構造の記述

以下のように、ウェブページの構成をHTMLタグで記述しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのホームページ</title>
</head>
<body>
    <h1>私の初めてのウェブページ</h1>
    <p>ここに好きな文章を書いてみましょう。</p>
</body>
</html>

4. ブラウザで表示確認

作成した「sample.html」をブラウザで開き、コードが正しく動作しているか確認します。

5. サーバーへのアップロード

レンタルサーバーを利用し、HTML ファイルをアップロードすることでウェブページを公開できます。

他サイトのHTMLを参考にする方法

他の Web サイトの HTML 構造を見るのは、デザインや機能を学ぶ良いヒントになります。他の公開サイトの HTML や CSS を直接見ることはできませんが、ブラウザの機能を使ってページのソースコードを閲覧することが可能です。勉強のために既存サイトのHTML構造を参考にしてみましょう。

Google Chromeの場合（Windows/Mac共通）
1. ソースを表示したい Web ページ上で右クリック
2. メニューから「ページのソースを表示(V)」を選択
これで別タブまたは別ウィンドウにそのページの HTML コードが表示されます。さらに詳細な構造や CSS の状態を確認したい場合は、右クリックメニューから「検証」を選択、または F12キー（MacではCommand + Option + I）で開発者ツールを開く方法もあります。

開発者ツールを使うと、ページの HTML 構造が画面右側（または下側）に表示され、要素を選択するとどの部分に対応するかハイライト表示されるなど、よりインタラクティブにコードを調べられます。
Microsoft Edgeの場合（Windows）
基本的にChromeと操作は似ています。
1. 表示したいページ上で右クリックし「ページのソースの表示」を選択
2. Edge の設定メニュー（画面右上の「…」ボタン）から「その他のツール」>「開発者ツール」をクリック
Safariの場合（Mac）
Safari でソースコードを見るには、まず設定が必要です。

1. メニューバーの「Safari」>「環境設定」を開き、「詳細」タブ内の「メニューバーに“開発”メニューを表示」にチェックを入れる。
2. メニューバーに「開発」という項目が現れます
3.ソースを見たいページで「開発」>「ページのソースを表示」を選択

さらに「開発」>「Web インスペクタを表示」（Option + Command + I）で開発者ツールを起動すれば、Chrome 同様にページ構造を解析できます。

他 Web サイトのコードをそのままコピーするのはマナー違反ですが、「このデザインはどう実装しているんだろう？」と学習目的で参考にするのは有益です。

気になるサイトを見つけたら、ぜひブラウザの開発者ツールで裏側をチェックしてみましょう。プロが作った HTML/CSS を見ることで、自分のコーディングにも役立つ発見があるかもしれません。

まとめ

ホームページ作成の基本となる HTML の基本から、初心者でも使えるサービスまで一通り解説しました。最初は難しく感じるかもしれませんが、一度仕組みが分かれば自分のアイデアを形にすることができ、とても楽しい作業です。ぜひチャレンジして、自分だけのホームページを公開してみてください。

最後に、もし「コードを書くのはちょっとハードルが高い…」という場合は、無理せず Wix のようなサービスを活用しましょう。Wix なら登録後すぐにホームページの作成が開始でき、最短数十分でサイト公開まで到達できます。今すぐWixに登録して、手軽にホームページ作成を始めてみましょう。あなたの素敵なホームページ作りを応援しています。

よくある質問

Q1. ホームページ作成にはプログラミング知識が必要？

必ずしも必要ではありません。HTML/CSS の基本を知っていれば自分で作成できますが、ゼロから勉強するのが大変な場合は Wix のようなノーコードツールを使えば知識がなくても大丈夫です。

Wix はドラッグ＆ドロップの操作でサイトを構築できるため、専門知識がなくても直感的にホームページを作れます。もちろん、HTML/CSS を理解していれば細部の調整ができますが、初心者のうちはツールに頼ってみるのも良いでしょう。

Q2. Wix は本当に無料で使えますか？

はい、Wix には無料プランがあります。無料プランでも主要なデザイン機能は利用可能で、サイトのデザインから公開まで無料でできます。

無料プランでは Wix の広告バナーが表示される点や、無料のサブドメインでの公開になります。本格的にホームページを運用したい場合や独自ドメインを使いたい場合は、プレミアムプランへのアップグレードを検討しましょう。

Q3. スマートフォン対応のサイトも作れますか？

今時のホームページは PC だけでなくスマホでも見やすいモバイル表示への対応が求められますが、Wix のテンプレートは最初からスマホ表示に対応しています。

自分で HTML/CSS を書く場合も、CSS のメディアクエリなどを使えばスマホ用レイアウトを実装可能ですが、初心者には難しいため、まずは Wix で自動対応に任せるのが簡単です。

Q4. 自分で HTML/CSS を勉強するにはどうしたらいいですか？

書籍やオンライン学習サイト、動画教材などで基礎から学ぶ方法があります。例えば MDN Web DocsやProgate、ドットインストールなどの初心者向け教材が充実しています。

また、実際にコードを書いて動かすことが習得への近道です。小さなページでいいので、自分の趣味紹介やお店の案内などテーマを決めて作ってみましょう。

作っている途中で疑問が出たら、その都度「HTML ○○ やり方」とネット検索することで解決策が見つかります。

Q5. Wix とコードでのホームページ制作、どちらが良いのでしょうか？

A5. 一長一短です。Wix のメリットは「手軽さ・速さ・デザイン性」で、コードを書かなくても完成度の高いサイトが作れる点です。初心者や時間がない方、デザインに集中したい方には Wix が適しています。

一方、コード制作（HTML/CSS 手書き）のメリットは自由度の高さです。思い通りの細かなデザインや特殊な機能も、自分でコードを書けば実現可能です。また、Web 制作スキルが身につくという副次的な利点もあります。

ただし習得や制作に時間がかかるため、まずは Wix でサイトを作りつつ必要に応じてコードも学んでみるという併用もおすすめです。

将来的に「Wix でベースを作り、Velo やカスタムコードで拡張する」ことも可能なので、目的や状況に応じて使い分けてください。

この記事を書いた人

下瀬美幸（Miyuki Shimose）

Wix 公式ブログ編集者／SEO エキスパート