【初心者向け】htmlでホームページ作成する手順を徹底解説！

2023年2月12日 HP制作 Blog

「ホームページを自分で作りたい！」

そう思うのなら、htmlについての知識が必要です。htmlはホームページの基礎となるもの。ホームページはhtmlという言語で書かれているため、htmlを覚えることで、私たちもホームページを作れるようになるのです！

この記事ではhtmlの知識がない初心者向けに、htmlでホームページを作成する方法について詳しく解説していきます。htmlの知識がなくてもホームページを作る方法もありますが、ホームページを作るつもりならhtmlのことを知っておいて損はありません。htmlについて学び、自分の手でホームページを作れるようになっていきましょう。

htmlって何？

htmlはホームページを作るための基礎となるもの

htmlはHyperText Markup Languageの略語です。直訳すると、ハイパーなテキストを構造化する言語となり、何が何だかよくわかりませんね。htmlはホームページの基礎となるもので、普段見るホームページのほとんどで使われています。ブラウザに言語を表現するためのものであり、ホームページの中の各構成要素の意味を定義するために使われています。

各構成要素の意味を定義するとは、見出しや本文を区別するということです。ただの文章が並んでいるだけだったとしたら見づらいですし、どこが見出しでどこが本文なのかわかりません。それを見やすく整理し「ここが見出し」「ここが本文」と印をつけていくのがHTMLなのです。HTMLがあるおかげで、私たちはホームページをわかりやすく見られるというわけですね。

htmlを使ったホームページ作成の手順

テキストエディタの準備

HTMLを使ってホームページを作成するためには、まずHTMLを書く場所が必要となります。その場所こそがテキストエディタと呼ばれるツールです。テキストエディタと聞くと難しく感じられてしまうかもしれませんが、Windowsに標準装備されているメモ帳もテキストエディタの一種です。

もちろん、メモ帳にHTMLを書いてもいいのですが、HTMLを書くことに特化したテキストエディタがありますのでそちらの使用がおすすめです。おすすめのテキストエディタは以下の3つ。

Sublime Text
Atom
Visual Studio Code

特に初心者におすすめできるのは、Sublime Textでしょう。Sublime Text公式ホームページからダウンロードすることができ、シンプルで扱いやすくなっています。英語のページですがダウンロードをするために必要なのはワンクリックのみ。

ここから先の手順は、基本的にはSublime Textを使っているものとしてお伝えしていきます。

基本的なタグを準備する

テキストエディタの準備ができたら基本的なタグを準備していきます。タグとはHTMLによる印そのもののことです。

Sublime Textを使用すればタグを一つ一つ書かなくても、自動的に挿入することが可能となります。そのやり方は、エディタ上で <ht と打つだけ。そうすることで出てくるドロップダウンの中からhtmlを選択すれば基本的なタグの準備は完了です。

基本的なタグの中身と意味は下記の通り。

<!DOCTYPE html>　　→HTMLを記述するために必要な前置き

<html></html>　　　→HTMLの文書の始まりを表すもの

<head></head>　　　→ページ上には表示されない裏側の設定を記述するエリア

<title></title>　　　→ページタイトルを指定するための記述

<body></body>　　→実際にページ上に表示される要素を記述するエリアを示す

htmlタグを作りたいページ内容に合わせて記述

基本的なタグの準備を終えたら、htmlタグを作りたいページ内容に合わせて記述していきます。

先ほど説明した通り、<body></body>はページ上に表示される要素を記述するエリアですので<body>と</body>の間にhtmlを書いていきます。

よくあるページの構成として「大見出しの後に文章と箇条書きが続くページ」を例に見ていきましょう。

<h1>大見出しの内容</h1>→h1はページの大見出しを表す
<p></p>→pは文章の段落（paragraph）を表す

<ol>
    <li>箇条書きの内容</li>
    <li>箇条書きの内容</li>
    <li>箇条書きの内容</li>
</ol>
→olは番号付きのリスト（ordered list）を表す

番号無しのリストにしたい場合は、ul（unordered list）を使用する
li（listitem）はolやulの中でリスト内の項目を表す

htmlファイルに保存

htmlを記述し終わったら、ファイルを保存しなければなりません。このときhtmlファイルとして保存をしていきましょう。

Sublime Textの上部にあるメニューからFileを選択し、さらにSaveへと進み作成したファイルを保存していきます。ファイル名は「任意の半角英数字.html」としましょう。.htmlの拡張子を使用することで、私たちが記述したものはhtmlファイルとして保存することができます。

htmlファイルを保存する場所に関してはどこでも構いません。おすすめはデスクトップやダウンロードなどにして、見つけやすいようにすることです。

FTPソフトを使ってwebサーバにアップロード

最後に記述したhtmlファイルをwebサーバにアップロードすることでホームページの作成は完了です。

FTPソフトを使ってアップロードするには、次の3つの情報を準備してください。

wwwサーバー（Webサーバー）名
FTPアカウント
パスワード

FTPソフトはWindowsに標準で入っているものです。FTPを起動させ、FTPのウィンドウで「ftp>open　Webサーバ名」と入力しWebサーバーに接続しましょう。接続ができたらFTPアカウントとパスワードを入力します。

続いて、htmlファイルを転送していきます。FTPでファイルを転送する場合には「ftp>put　〇〇.html」と入力していきましょう。ファイルの転送が完了したら「bye」と入力をしFTPを終了します。その後、ブラウザで転送したWebページが表示されるか確認してみましょう。

htmlって難しい？基本の書き方解説

headタグにHTMLの情報を記載

htmlでホームページを作成するのに欠かせない基本的なタグの解説をしていきます。

まず冒頭にあるheadタグ。headタグにはサイトの情報などを記載していきます。headタグに書かれている内容は、実際にページに表示されることはありません。

bodyタグにページの内容を書いていく

bodyタグには実際にブラウザに表示される、ページの内容を書いていきます。

h1タグ<h1></h1>には、見出しを記載

見やすいホームページを作るのに欠かせないのが見出しではないでしょうか。その見出しを作成するには、h1タグを使用していきます。見出しにはh1~h6までの段階があり、数字が大きくなるほど文字が小さくなっていきます。

pタグ<p></p>には、文章を記載

文章は<p>というタグで囲みます。pタグはbodyタグ内に書くようにしてください。

<body>

<h1>ホームページ</h1>

<p>今日の出来事</p>

</body>

上記のように書くとホームページという見出しの下に、人物紹介と今日の出来事という文章が表示できます。

このページどうやって作るの？そんなときはホームページのソースを見てみよう

ホームページを作成するようになってから、さまざまなホームページを見ていると「このページどうやって作るんだろう？」「素敵だから真似したい！」と思うことがあるでしょう。そんなときにはホームページのソースを見てみましょう。

Google chrome・Microsoft Edge・Safariいずれの場合でも、htmlを見たいホームページ上で右クリックをして「ページのソースを表示」を選択すると、ソースが表示されます。どのようなhtmlでそのホームページが構築されているかがわかるので参考になるでしょう。

html以外のホームページの作り方

CMS

CMSとは、Contents Management System（コンテンツ・マネジメント・システム）の頭文字をとったもの。ホームページ作成のための専門的な知識がなくても、ホームページを構築・管理・更新していくことができます。有名なものにはWordPressがあります。

ホームページ作成ソフト

ホームページ作成ソフトを使用すれば、htmlの知識がなくともホームページを作成することができます。豊富なテンプレートがあり、カスタマイズも自由にでき魅力的なホームページを作成することができるでしょう。ただしホームページ作成ソフトの購入には、数千円〜数万円のお金がかかります。代表的なホームページ作成ソフトは、ホームページビルダー、DreamWeaber CCなどです。

ホームページ作成サイト

無料のホームページ作成サイトを使って、ホームページを作成することができます。簡単にホームページが作成できて、htmlの知識がなくても大丈夫です。CMSを利用する際に生じる初期設定もする必要がないので、ホームページ作成に手間をかけたくないという人におすすめです。

無料のホームページ作成サイトで有名なものには「Wix.com」や「Jimdo」といったものがあります。これらを使用すればhtmlの知識がなくとも、たくさんのテンプレートの中から好きなものを選びカスタマイズして好みのホームページを作り上げることができるでしょう。

基本的には無料なのですが、独自ドメインの取得や広告を非表示にするためには課金が必要となります。

まとめ

この世のホームページはhtmlという言語で作られています。だから、ホームページを作りたいのならhtmlの知識を身につけるといいでしょう。私たちが日常で使う言語もまったく知らないものは難しく感じられてしまいますが、覚えてしまえば難しく感じることはありません。

htmlという言語も覚えてしまえば、それほど難しいものではありません。まずは基本的なhtmlを覚え、自分でホームページを作成できるようになっていきましょう。

お問い合わせ

【初心者向け】htmlでホームページ作成する手順を徹底解説！