ホームページの作り方をHTMLで、一から公開まで進める7つの手順

ホームページの作り方をHTMLで選ぶ前に知っておくこと

HTMLは、文章に「ここは見出し」「ここは段落」「ここは画像」と印を付けて、ブラウザに伝えるための言葉です。ホームページは、HTMLで中身と構造を書き、CSSで色や配置などの見た目を決め、必要ならJavaScriptで動きを足す、という3つの組み合わせでできています。

Wix やペライチのような作成サービスも、裏ではHTMLを出力しています。違いは、そのHTMLを自分で一行ずつ書くか、画面の操作でサービスに書いてもらうかです。自分で書けば自由がききますが、書いた分だけ直すのも自分になります。

作成サービスや WordPress を含めた作り方の全体はホームページの作り方の手順で、無料で使えるサービスの比べ方はホームページを無料で作成する方法でまとめています。この記事では、HTMLを自分で書く場合に絞って説明します。

HTML作成に必要な道具とフォルダの準備

HTMLを書くのに、有料のソフトは要りません。必要なのは、文字を書くためのテキストエディタと、表示を確かめるブラウザの2つです。Windows のメモ帳でも書けますが、タグに色が付き、入力の補助があるコードエディタを使うと書き間違いに気づきやすくなります。

フォルダとファイル名の決め方

書き始める前に、サイト用のフォルダを1つ作り、その中にファイルを置いていきます。トップページのファイル名は index.html にします。多くのサーバーでは、URL の最後にファイル名がないときに index.html を表示する設定になっているためです。

• サイトのフォルダの中に、index.html と、css、images のフォルダを作る
• ファイル名とフォルダ名は、半角の英小文字と数字、ハイフンだけにする(about.html、menu.html など)
• 日本語や空白の入ったファイル名は、公開したあとに URL がくずれる原因になるので避ける
• ファイルは文字コードを UTF-8 にして保存する

HTMLでトップページを作成する手順

道具がそろったら、トップページの index.html を書きます。いきなりタグを打ち始めるのではなく、先に紙やメモに「上から何を並べるか」を書き出しておくと、途中で手が止まりません。お店や教室なら、店名と一言の説明、提供しているもの、料金、場所と営業時間、問い合わせ先、の順が基本の形です。

最初に書くHTMLのひな形

HTMLのファイルは、決まった形から書き始めます。1行目に <!doctype html> を書き、全体を <html lang="ja"> で囲みます。その中を、見る人には表示されない情報を入れる <head> と、画面に表示される中身を入れる <body> の2つに分けます(出典: MDN Web Docs「HTML: コンテンツの作成」)。

1. <head> の中に、文字コードを伝える <meta charset="utf-8"> を書く
2. 同じく <head> の中に、ページの題名を <title> で書く(店名と、何のお店かが分かる言葉を入れる)
3. <body> の中に、いちばん大きな見出しを <h1> で1つだけ書く
4. 中身の区切りごとに <h2> の見出しと、<p> の段落を書く
5. 写真は <img src="images/shop.jpg" alt="店内の様子"> のように、alt に写っているものを文字で書く
6. 電話番号やほかのページへのリンクは <a> で書く

<title> に書いた文字は、ブラウザのタブや検索結果のタイトルに使われることがあります。Google は、検索結果のタイトルを作るときにページの title 要素や見出しの言葉などを使うと説明しています(出典: Google 検索セントラル「SEO スターター ガイド」)。店名や地域名を画像だけで見せず、文字で書いておくことも同じ理由です。

書いたらすぐブラウザで確かめる

数行書いたら保存して、index.html をブラウザで開きます。まとめて書いてから開くと、どこで間違えたのか探すのに時間がかかります。表示がくずれたら、直前に書いた部分の閉じタグ(</p> など)が抜けていないかを最初に見てください。

CSSで見た目を整え、スマホでも読める形にする

HTMLだけのページは、白い背景に黒い文字が並ぶだけの見た目です。色、文字の大きさ、余白、横並びなどは CSS で決めます。CSS は css フォルダに style.css などの名前で別のファイルにし、各ページの <head> に <link rel="stylesheet" href="css/style.css"> と書いて読み込みます。別のファイルにしておくと、全ページの見た目を1か所の修正で変えられます。

スマホ表示のための viewport の指定

スマホで開いたときに、パソコン用の画面がそのまま小さく縮んで表示されることがあります。これを防ぐために、<head> に <meta name="viewport" content="width=device-width, initial-scale=1"> を書きます。表示の幅を端末の幅に合わせ、拡大しない状態で表示する、というよくある設定です(出典: MDN Web Docs「<meta name="viewport">」)。

• まずスマホの幅で読みやすい1列の形を作り、画面が広いときだけ横並びにする
• 画像には max-width: 100% を指定し、画面からはみ出さないようにする
• 文字は小さくしすぎず、行と行の間をあけて読みやすくする
• 電話番号や予約のボタンは、指で押しやすい大きさにする

スマホで見にくくなる原因と、すでにあるホームページの直し方はホームページのスマホ対応の方法で詳しく説明しています。

複数ページのサイト作成をHTMLで進めるときの決まりごと

トップページができたら、料金、会社やお店の紹介、アクセスなどのページを増やしていきます。ページが増えると、1枚だけのときには気にならなかった手間が出てきます。先に決まりごとを作っておくと、あとで直す範囲が小さくなります。

メニューと足元の部分は全ページで同じにする

HTMLだけで作る場合、上のメニューや下の連絡先の部分は、ページごとに同じものを書きます。メニューの項目を1つ足すと、全部のページを開いて同じ修正をすることになります。作る側でもここで直し漏れが起きやすいので、修正したときは全ページをブラウザで開いて確かめる習慣を付けてください。

リンクと画像の場所は相対パスで書く

ページ同士のリンクは href="about.html" のように、いまのファイルから見た場所で書きます(相対パス)。パソコンの中の場所(C: から始まる書き方)で書くと、公開したときにリンクも画像も表示されなくなります。

どんなページを用意して、どの順に並べるかはホームページの構成の決め方で、ページに載せる文章の書き方はホームページの文章の書き方で説明しています。

HTMLで作ったサイトをサーバーとドメインで公開する

パソコンの中で完成したHTMLのファイルは、そのままではほかの人に見てもらえません。インターネットに公開するには、ファイルを置く場所(サーバー)と、住所にあたるドメイン名が必要です。MDN の解説でも、ホスティング(ウェブサーバー上のファイル置き場を借りること)と、ドメイン名を借りることが公開の前提として説明されています(出典: MDN Web Docs「ウェブサイトの公開」)。

1. サーバーを用意する(レンタルサーバーの契約、または静的なファイルを置けるサービスへの登録)
2. 独自ドメインを取得する(お店や会社の名前に近い文字列を選ぶ)
3. ドメインとサーバーを結びつける設定をする(サーバー会社の案内に沿ってネームサーバーなどを設定する)
4. HTML、CSS、画像のファイルを、フォルダの形を保ったままサーバーへアップロードする
5. SSL(https で通信を暗号化する仕組み)を有効にする
6. スマホとパソコンの両方で、全ページとリンク、画像を確かめる

MDN では、無料で始めやすい公開先として GitHub Pages や Netlify なども紹介されています。ただし、事業のホームページとして使う場合は、商用で使えるか、独自ドメインを使えるか、サポートがあるかを、それぞれの公式サイトの利用規約で確かめてください。無料のサーバーを選ぶときの見方はホームページの無料サーバーの選び方にまとめています。

SSL の設定のしかたや費用は、サーバー会社によって違います。契約するサーバーの公式サイトで、SSL が使えるか、更新が自動かを確かめてください。設定していないと、ブラウザに警告が出ることがあります。そのときの見分け方は「保護されていない通信」の原因と直し方で説明しています。

HTMLのホームページで公開後につまずきやすい点

HTMLでホームページを作る人が、作る段階よりも困りやすいのは公開したあとです。作る側として相談を受けることが多いのは、次の3つです。

お問い合わせフォームがHTMLだけでは動かない

HTMLでは入力欄と送信ボタンの見た目は作れますが、送られた内容を受け取ってメールで届ける部分は、HTMLだけでは動きません。サーバー側で動くプログラムか、フォームを受け付ける外部のサービスを組み合わせる必要があります。迷惑な送信への対策も考えることになります。進め方は問い合わせフォームの作り方で説明しています。

更新できる人が作った人だけになる

HTMLのホームページは、営業時間や料金を1か所変えるだけでも、ファイルを開いて書き換え、サーバーへアップロードし直す作業になります。作った本人が忙しくなったり、担当が変わったりすると、更新が止まりやすくなります。

古くならないように手入れが続く

ブラウザやスマホの画面は変わっていきます。公開した時点では問題がなくても、表示のくずれ、SSL の更新、ドメインの更新、写真や情報の入れ替えなど、手入れは続きます。HTMLで作った場合、この手入れをすべて自分で行うことになります。

自分で作るときのつまずきと判断の基準はホームページを自分で作るのは難しいかで、頼んだ場合にかかる費用の内訳はホームページ制作の費用相場でまとめています。比べてから決めると、途中で作り直す手間を減らせます。

ホームページの作り方をHTMLで進める7つの手順の振り返り

ここまでの流れを、手を動かす順番にまとめます。

1. 目的と、上から並べる中身を紙に書き出す
2. コードエディタとブラウザを用意し、サイトのフォルダと index.html を作る
3. ひな形を書き、見出し、段落、画像、リンクで中身を入れる
4. CSSで見た目を整え、viewport を指定してスマホでも確かめる
5. ページを増やし、メニューと相対パスのリンクを全ページでそろえる
6. サーバーとドメインを用意し、SSL を有効にして公開する
7. お問い合わせフォームと、更新する人と手順を決める

HTMLを自分で書くと、ホームページがどう動いているかが分かり、頼む場合にも話が通じやすくなります。一方で、更新する時間が取れない、問い合わせをきちんと受けたい、写真と文章をそろえる時間がない、という場合は、作る部分だけでも任せた方が本業に時間を使えます。頼むときの流れはホームページ制作の流れと期間で確かめられます。

uparia では、制作費0円・月額2,980円からの月額プラン(最低契約期間12か月)で、独自ドメイン、サーバー、SSL、スマホ対応、お問い合わせフォーム、保守までまとめてお受けしています。24か月続ければ買取費用0円で、サイトとドメインはお客様のものになります。最初から自分のものにしたい方には、買い切りのスタートプラン(3万円〜)もあります。プランの違いはホームページ制作のプランと資料でご確認いただけます。