Webデザインの教室

HTMLを使った自作ホームページの作り方

garan
Categories:

初心者の方でもシンプルなホームページであれば簡単に作れます。

ホームページを初めて作る方に向けて、HTMLを使ったホームページ作成の手順を説明していきます。

手順に沿って、実際にHTMLを編集して、ホームページの作成方法に慣れていきましょう。

必要なツールを準備する

ホームページをHTMLで作る際に必要な2つのツールを準備します。

Webブラウザー

Google Chrome・Safari・Microsoft Edgeなど

テキストエディタ

テキストエディタとは、パソコンでテキストデータを編集するためのアプリケーションです。

パソコンに内蔵されているメモ帳でも問題なくコードを書くことはできますが、本格的にコーディングやプログラミングをしたい場合には、専用のテキストエディタ（HTMLエディタなどと呼ばれる）を使用しましょう。

おすすめのテキストエディタ

サクラエディタ
TeraPad
Notepad++
Sublime Text
Online HTML EDITOR
Visual Studio Code

番外
HTMLオーサリングソフト

Dreamweaver

HTMLファイルを作成する

実際にHTMLを記述していきましょう。

テキストエディタで新しいファイルを作成します。

次に以下のように<html>～</html>までを記述します。

<!DOCTYPE html>
  <html lang=ja dir="ltr" >
    <head>
      <meta charset="utf-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設定

デバイスごとに表示領域を設定（レスポンシブデザイン）する属性値のことです。2023年の時点でGoogle は、こちらの記述を推奨しているため、上記のように設定しておきます。

title属性

ページ内のコンテンツを簡潔に説明する箇所です。検索ページにタイトルとして表示されます。
また、CSSへのリンクなど、必要なその他の情報も記載します。

HTMLのbody要素

<body>～<body>で囲まれているのがbody要素です。

body要素とは、ページのコンテンツを記述する箇所です。bodyタグで囲まれた箇所は、Webページを開いた際に表示されるコンテンツになります。

body要素のコンテンツ作成については、次の章で解説します。

HTMLタグを使用してコンテンツ作成

HTMLの大枠を作成したら、Webページのコンテンツを<body>～</body>の間に記述します。

body要素で覚えておきたいのは次の4つのタグです。

<h>タグ
<p>タグ
<a>タグ
<img>タグ

<h>タグ

見出しを表すタグで、<h1>～<h6>まであります。
重要度が高さによって、1から順に文字サイズの大きな見出しとなります。

h1 1番目に大きな見出し

h2 2番目に大きな見出し

h3 3番目に大きな見出し

h4 4番目に大きな見出し

h5 5番目に大きな見出し
h6 6番目に大きな見出し

<p>タグ

<p>タグは段落を表すタグで、文章を<p>～</p>で囲むと1つの段落になります。

body内のコンテンツ作成では、最も使用頻度が高いタグなので覚えておきましょう。

<a>タグ

<a>タグとは、リンクを挿入するタグです。””の中にURLを記述することで、<a>タグに囲まれたテキストにリンクを挿入することができます。

<img>タグ

<img>は画像を表示させるタグです。””の中に画像ファイルのURLを記述することで、画像が表示されます。

HTMLファイルで保存しブラウザで確認

コンテンツの記述が完了したら、HTMLファイルとして保存し、ブラウザで実際のページを確認してみましょう。

今回は、例として次の画像のように簡易ページを作成しました。

ファイルを保存する際には、必ず拡張子をHTMLにしておきましょう。Atomのテキストエディタを使用している場合は、名前の後に.htmlと記載すればHTML拡張子として保存されます。

HTMLとしてファイルを保存したのち、実際にWebブラウザで開き、問題なく表示されていることを確認します。

サーバーへアップロード

HTMLファイルを作成しただけでは、ホームページとしてまだWeb上に公開されていません。

ホームページとしてWeb上に公開するには、FTPソフトを使用して作成したHTMLファイルをサーバー上にアップロードする必要があります。

FTPソフトとは、サーバーにファイルをアップロードしたり、サーバーにあるファイルをダウンロードしたりするための転送用ソフトのことで、有名なものではFFFTPやFileZillaがあります。

こういったFTPソフトを使い、作成したHTMLファイルを利用中のサーバーへアップロードしたら、ホームページのWeb公開は完了です。

ファイルのアップロードの仕方については各サーバーによって異なるため、お使いのサーバーサイトで確認してください。

ホームページを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つ紹介しますので、ぜひご活用ください。

まずはHTMLを使ってシンプルなホームページ作成から

シンプルなサイトであれば、初心者でもHTMLを使って簡単にホームページを作成できます。

機能的でオシャレなデザインにしたい場合には、CSSやJavascriptといった言語も学ぶ必要がありますが、シンプルなサイトであればテンプレートを使って簡単に作成できます。

HTMLやCSSといったコーディングが難しく感じるのであれば、コーディングなしでホームページを作成できる無料ツールも多くあるため、そういったホームページ作成ツールの活用もおすすめです。