HTMLでのホームページの作り方・ウェブの基本を徹底解説！
ホームページの作成で、もっとも基本になるのが、HTMLでウェブページを作成する手法です。
しかし、HTMLとは何か、どうすればホームページとして公開できるのか、全く分からない人も多いはず。
今回は全てのホームページの基礎となる、HTMLによる作成方法を紹介します。
HTMLとは何か？どうやって書けばいい？
HTMLは、正式にはハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）という名称のマークアップ言語です。
テキストの中に機能や装飾を加える機能で、例えば、テキストの大きさや色、フォントの種類を指定したり、別のウェブページへとジャンプできるハイパーリンクを埋め込んだりすることができます。
ウェブページの文章の中に関連ページへのリンクが含まれていたり、太字や取り消し線といった装飾が施されていたりするのは、このHTMLの効果によるものです。
このHTMLのコードが記述された「HTMLファイル」がホームページの本体であり、ホームページの内容の変更は、HTMLファイルを書き換えることによって行います。
HTMLでは、テキストの始点と終点にタグを配置することで、その中間のテキストに処理が反映されます。
例えば、始点が「<b>」、終点が「</b>」」で囲まれたテキストは、太字（bold）で表示され、起点が「<a href="URL">」、終点が</a>で囲まれたテキストはハイパーリンクになり、「URL」の部分に記述されたウェブページへとジャンプできるようになります。
他にも、HTMLには数多くのタグが用意されているので、HTMLについて詳しく解説しているサイトや動画で、書き方を習得してみてください。
ウェブページのデザインを定義しているファイルとしてはHTMLの他にもうひとつ、CSSがあり、これはカスケーディングスタイルシート（Cascading Style Sheets）の略称で、HTMLファイルから、主にウェブページの装飾に関する設定を分離したものです。
現在は、ウェブページの構造（構成要素や配置順や画像など）をHTMLファイルで指定し、テキストの書式や装飾、背景などはCSSで指定するのが一般的となっています。
HTMLファイルからCSSを分離させたことで、大量のウェブページの見た目を変えなければならないときに、HTMLファイルを個別に開いてコードを書き換えなくても、CSSを変更するだけで、全てのHTMLファイルに設定を反映できるようになっています。
ホームページの中身を編集したいときは、このHTMLファイル（拡張子が「.html」のファイル）を開くのが基本になります。
HTMLがないのにホームページを表示するサーバーもある？
ホームページによっては、サーバーの中にHTMLファイルが存在しないこともあります。
そういったサーバーでは、HTMLの代わりにPHPファイルが大量に保存されているはずです。
これはWordPressなどのCMS（コンテンツ・マネジメント・システム）をベースに作られたホームページで、訪問者のアクセスに応じてPHPファイルがHTMLファイルを生成して表示させるという仕組みになっています。
この場合、サーバーにはHTMLファイルの代わりに「HTMLを生成するプログラムが書かれたPHPファイル」が置かれていますが、最終的にHTMLが出力されてブラウザに表示されるという仕組み自体には変わりありません。
ウェブページが表示されるということは、必ずサーバーのどこかにHTMLファイルか、HTMLファイルを生成するプログラムが存在するということを覚えておきましょう。
HTMLファイルをホームページとして機能させるには？
ホームページの本体であるHTMLファイルは、非常に簡単に作成できます。
パソコンに標準搭載されているテキストエディタでHTMLのコードを記述し、拡張子を「.html」に変更して保存するだけで、HTMLファイルが完成します。
HTMLファイルは、テキストエディタではソースコードの状態で表示されていますが、Google ChromeやFirefox、SafariやMicrosoft Edgeなどのウェブブラウザにドラック＆ドロップして開くとマークアップが有効化されるので、ウェブ上でどのように表示されるかを、HTMLファイルをローカルに置いたまま、ブラウザで確認することも可能です。
ただし、これはあくまでパソコン内部のローカル環境でHTMLを表示させたに過ぎず、作成したHTMLファイルを外部のインターネット上に公開する場合は、サーバーやドメインといった環境面の準備が必要になります。
HTMLファイルをホームページとして公開する過程で必要になるテキストエディタ、サーバー、ドメインについて確認しましょう。
テキストエディタ
HTMLファイルを作成する際に利用するのがテキストエディタです。
テキスト形式でHTMLコードを記述し、そのファイルの拡張子を「.txt」から「.html」に変更すれば、HTMLファイルとして保存されます。
HTMLを書く際には、テキストエディタがプレーンテキストモードになっていることを確認しましょう。
最近のテキストエディタは、初期設定でリッチテキストモードになっていることがあり、その状態で作成したテキストファイルは、拡張子を変更してもHTMLファイルとして機能しません。
プレーンテキストモードであれば、どのテキストエディタを利用しても問題なく、OSに初期状態から付属しているメモ帳でも充分です。
また、テキストエディタの中には、HTMLの編集がしやすいように、タグを色別に表示する機能を備えたものがあります。
さらに強力なエディタでは、タグの一部を入力すると残りを自動的に補完したり、HTMLの記法にミスがあった場合に自動的にエラーが表示されたり、ブラウザを使わずにマークアップを有効にしたプレビューを表示するといった機能を備えたものもあります。
代表的なHTML向けのテキストエディタを紹介するので、導入してみてください。
- 秀丸エディタ
- サクラエディタ
- Visual Studio Code
- TextPad
- Notepad++
- Sublime Text
なお、テキストエディタで作成したHTMLファイルは、どのブラウザで表示させても、基本的には同じ内容が表示されます。
過去には、 Internet Explorerのような表示に独特のクセのあるブラウザが存在し、HTMLもそれに合わせて調整されることがありましたが、現在のブラウザはどれを使っても表示内容はほぼ一緒なので、ブラウザのチョイスについては気にする必要はないでしょう。
サーバー
HTMLファイルをネットワークに公開して、外部からアクセスできる状態にする役割を担うコンピュータがサーバーです。
サーバーには様々な種類がありますが、ウェブサーバーソフトであるApacheやNginxを導入できれば、基本的にどんなサーバーでもウェブサーバーとして利用可能です。
ただし、サーバーマシンは個人で購入するには高価で、運用もセンシティブなので、個人でホームページ用のウェブサーバーを調達する場合は、レンタルサーバーを選択するのが一般的です。
レンタルサーバーは、複数人のユーザーがひとつのサーバーを共有することにより、安価な月額料金での利用を可能としたサービスです。
本来はサーバーの運用には欠かせない、セキュリティ対策やサーバーソフトの設定が不要なため、高度なサーバー管理のノウハウがないライトユーザーでも安心して利用できます。
レンタルサーバーを契約すると、自分専用の管理領域が提供されるので、そこに作成したHTMLファイルを設置すれば、そのHTMLファイルはホームページとしてインターネット全体に公開されます。
なお、パソコンからサーバーにHTMLファイルを移動させる際には、FTPソフトが利用されます。
FTPはパソコンとサーバーを接続してファイル転送を可能にするプロトコルで、パソコン上で作成したHTMLファイルや画像ファイルを、サーバー上に移動させる用途で使われます。
ただし、最近のレンタルサーバーには、ブラウザにファイルをドラック＆ドロップするだけでサーバーに転送できるファイルマネージャー機能を備えたものが増えているため、FTPソフトの出番は少なくなってきています。
ドメイン
ホームページを公開する上で、サーバーと並んで重要になるのがドメインです。
サーバーに設置した時点でHTMLファイルはインターネットに公開されていますが、ユーザーがそこにたどり着くためには、ページのアドレスを知る必要があります。
レンタルサーバーには初期設定のURLがありますが、数字と記号が入り組んだ非常に冗長な文字列になっているため、独自ドメインを取得してレンタルサーバーに登録する作業は必須となります。
独自ドメインをレンタルサーバーに登録すると、その独自ドメインのURLからHTMLファイルを閲覧できるようになります。
これで晴れてホームページの公開作業は完了となります。
なお、これからレンタルサーバーと独自ドメインを用意するという人は、「お名前.com」の提供しているサービスを利用しましょう。
「お名前.com」では、独自ドメインとレンタルサーバーをセットで契約すると、独自ドメインをレンタルサーバーに紐付ける処理を簡単に行えます。
ホームページの立ち上げの設定が楽になるので、非常におすすめです。
HTMLファイルの作り方を解説
ここからは、HTMLファイルを作成する手順について解説していきます。
作業自体は非常にシンプルで、テキストエディタのプレーンテキストモードでHTMLのコードを書き、拡張子を「.html」にして保存すれば、HTMLファイルになります。
この作業は誰でも自分のパソコンで行うことが可能で、OSやテキストエディタの種類も問いません。
どんな環境でも可能な、HTMLのもっとも基本的な作成方法となります。
ホームページを構成する最低限のHTMLコードをサンプルに、HTMLファイルの作成手順を追いかけてみましょう。
テキストエディタにHTMLの書式でコードを入力しましょう。
ここではホームページの基礎となるヘッダー、ボディ、フッターで構造を作り、h1タグに「タイトル」、h2タグに「見出し」、pタグに「本文」というダミーの文章を入力しています。
HTMLを記述したテキストを保存、ファイル名は「index.html」と指定します。
これはトップページであることを示すための名称です。
「index.html」を保存できたら、ウェブブラウザの画面にドラッグ＆ドロップしてみましょう。正しく作成できていれば、HTMLで記述されたページの内容が表示されます。
これはローカルのHTMLファイルを表示させているだけで、ウェブに公開した状態ではない点に留意しましょう。
HTMLファイルをサーバーにアップロードする手順
HTMLファイルを作成できたら、次はそれをサーバーにアップロードしましょう。
既に触れましたが、パソコンとサーバーの接続には、これまでFTPソフトが利用されていました。
FTPソフトの利用には、サーバー側にFTPサーバーソフトを導入し、FTPアカウントを登録、パソコン側のFTPソフトにIDとパスワードを入力して接続するという煩雑な作業が発生します。
しかし、近年のレンタルサーバーにはファイルマネージャー機能が搭載されています。
これはレンタルサーバーの管理画面からサーバー内のファイル構造にアクセスし、パソコン内のファイルをブラウザ上にドラック＆ドロップするだけで転送が開始されるという非常に便利な機能です。
「お名前.com」のレンタルサーバーの場合、コントロールパネルからファイルマネージャーを開いて、HTMLファイルをドラック＆ドロップすれば、それでアップロードは完了です。
「お名前.com」のレンタルサーバーのコントロールパネルを開き、「ファイルマネージャー」をクリックしましょう。
レンタルサーバー内に保存されているファイルが表示されます。
初期状態ではエラーメッセージが保存される「error」フォルダと、サーバーの設定を記述した「.htaccess」だけが置かれています（レンタルサーバーにWordPressをインストールしている場合は、これ以外にも多くのフォルダやファイルが置かれています）。
ファイルマネージャーを開いた状態で、HTMLファイル（index.html）をブラウザにドラック＆ドロップすると、アップロードが行われます。
ファイルマネージャー上にHTMLファイルが表示されたのを確認しましょう。
「お名前.com」のレンタルサーバーを選択する画面に戻り、レンタルサーバーに設定されているドメイン（URL）をブラウザで開きましょう。
HTMLファイルの内容がブラウザに展開されます。
ブラウザのアドレス欄から、レンタルサーバーに設定したドメインのURLで、HTMLファイルが表示されていることを確認しましょう。
ホームページのコードの確認方法
ホームページのHTMLは、表示しているブラウザの機能から確認することができます。
ブラウザで表示中のホームページで、HTMLがどのように記述されているのか調べたいときに利用できます。
Google Chromeで表示中のホームページのHTMLを表示させる手順は次の通りです。
HTMLを表示させたいウェブページを開いて、背景（リンクやボタンや画像以外の場所）を右クリックしてメニューを表示させ「ページのソースを表示」をクリックしましょう。
新しいタブが開いてウェブページのHTMLが表示されます。
Firefox、Safariなどの他のブラウザでも同様の手順でHTMLを表示させることが可能です。
なお、ブラウザに表示された表示されたHTMLは、ホームページで使われているHTMLをダウンロードしたものなので、このHTMLを変更してインターネット上のホームページの内容を変えることはできません。
ホームページの内容を変えるには、サーバー内にあるHTMLを変更する必要があります。
ホームページにタグを設置する方法
ホームページの作成では、HTMLの中に指定されたタグを設置する機会が何度も出てきます。
例えば、アクセス数を計測するサービス「Googleアナリティクス」をホームページに導入する場合は、Googleアナリティクスが発行するタグを、ホームページのHTMLファイル内に記述しなければなりません。
ここではホームページにタグを設置する2つのやり方、HTMLファイルに直接タグを入力する方法と、タグマネージャーでタグを設定する方法を紹介しましょう。
HTMLファイルに直接タグを入力する
タグの設置でもっともシンプルな方法は、ホームページのHTMLファイルをテキストエディタで開いて、その中にタグを入力する方法です。
タグの数が少ない場合は管理が難しくないので、この単純な方法で問題ありません。
Googleアナリティクスの管理画面で、左下の歯車アイコンから「管理」を開き、「プロパティ」の「トラッキング情報」の「トラッキングコード」を選択、「グローバルサイトタグ」に表示されているタグをコピーしましょう。
ホームページのHTMLファイルをテキストエディタで開き、<head>と</head>の間に、コピーしたタグを貼り付けて保存しましょう。
タグマネージャーでタグを設定する
設置するタグの数が増えてくると、どこに何のタグを設置したのか覚えておくのが大変です。
そこで便利なのが、ホームページのタグを一括で管理できる「タグマネージャー」です。
ホームページにタグマネージャーのタグを設置すれば、以降はタグマネージャーにタグを登録することで、ホームページにタグを適用できるようになります。
タグマネージャーにはGoogleタグマネージャー、Yahoo!タグマネージャーなどがありますが、ここではGoogleタグマネージャーを紹介します。
Googleタグマネージャーにログインし、「Googleタグマネージャーをインストール」で2種類のタグをホームページのヘッダーとボディに貼り付けます。
あとはGoogleタグマネージャーにタグを登録するだけで、ホームページにタグが反映されるようになります。
GoogleタグマネージャーにはGoogle関連をはじめ主要なウェブサービスのタグ設定機能が用意されていますが、設定にないサービスのタグを登録する場合は「カスタムHTML」でタグを入力しましょう。
まとめ
今回は、HTMLでホームページを作成してインターネットに公開する手順を解説しました。
HTMLファイルの作成とサーバーでの公開はインターネットの仕組みの根幹をなす、基礎中の基礎です。
今回サンプルに利用したのは、ホームページの構成要素のベースの部分のみで、表示されている内容は非常に簡素なものです。
基本的なホームページの仕組みはどれも共通なので、このHTMLファイルのコードを複雑にしていくことで、ホームページでの高度な表現が実現可能になります。
ホームページ運営の基本を学ぶために、手打ちでHTMLファイルを作成し、それを手動でサーバーにアップロードするところから、始めてみましょう。
