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ファイルは、ウェブブラウザで開くとマークアップが有効化されるので、ウェブ上でどのように表示されるかを、HTMLファイルをローカルに置いたまま、ブラウザで確認することも可能です。

ただし、作成したHTMLファイルを外部に公開する場合は、サーバーやドメインといった環境面の準備が必要になります。

HTMLファイルをホームページとして公開する過程で必要になるテキストエディタ、サーバー、ドメインについて確認しましょう。

HTMLファイルを作成する際に利用するのがテキストエディタです。

テキスト形式でHTMLコードを記述し、そのファイルの拡張子を「.txt」から「.html」に変更すれば、HTMLファイルとして保存されます。

HTMLを書く際には、テキストエディタがプレーンテキストモードになっていることを確認しましょう。

最近のテキストエディタは、初期設定でリッチテキストモードになっていることがあり、その状態で作成したテキストファイルは、拡張子を変更してもHTMLファイルとして機能しません。

プレーンテキストモードであれば、どのテキストエディタを利用しても問題なく、OSに初期状態から付属しているメモ帳でも充分です。

HTMLファイルをネットワークに公開して、外部からアクセスできる状態にする役割を担うコンピュータがサーバーです。

サーバーには様々な種類がありますが、個人でホームページ用のウェブサーバーを調達する場合は、レンタルサーバーを選択するのが一般的です。

レンタルサーバーは、複数人のユーザーがひとつのサーバーを共有することにより、安価な月額料金での利用を可能としたサービスです。

本来はサーバーの運用には欠かせない、セキュリティ対策やサーバーソフトの設定が不要なため、高度なサーバー管理のノウハウがないライトユーザーでも安心して利用できます。

レンタルサーバーを契約して、作成したHTMLファイルを設置すれば、そのHTMLファイルはホームページとしてインターネット全体に公開されます。

ホームページを公開する上で、サーバーと並んで重要になるのがドメインです。

サーバーに設置した時点でHTMLファイルはインターネットに公開されていますが、ユーザーがそこにたどり着くためには、ページのアドレスを知る必要があります。

レンタルサーバーには初期設定のURLがありますが、数字と記号が入り組んだ非常に冗長な文字列になっているため、独自ドメインを取得してレンタルサーバーに登録する作業は必須となります。

独自ドメインをレンタルサーバーに登録すると、その独自ドメインのURLからHTMLファイルを閲覧できるようになります。

これで晴れてホームページの公開作業は完了となります。

なお、ここで紹介した3つ以外にも、HTMLファイルの作成と公開に使われるツールはいくつもあります。

例えば、大量のHTMLのコードを書く際には、シンプルなテキストエディタよりも、Sublime TextやAtom、Visual Studio CodeといったHTML対応の高機能なコードエディタが利用されています。

これらのエディタは、HTMLのタグを途中まで書くと自動的に残りを補う自動補完機能や、コードに間違いがあると警告するエラー報告機能など、コーディングをサポートする様々な機能を搭載しています。

また、ウェブサーバーにHTMLファイルを転送する際には、FTPソフトが利用されるのが一般的で、これは大容量のデータをサーバーにアップロードするのに適したツールです。

しかし、最近のレンタルサーバーはFTPソフトを使わなくても、ファイルマネージャーで直接ファイルを転送する機能を備えているので、今回は省略しました。

HTMLファイルの表示にはウェブブラウザが必要になりますが、パソコンに標準で搭載されている上に、どの種類のブラウザを選択しても結果は同じであるため省略しています。

なお、これからレンタルサーバーと独自ドメインを用意するという人は、「お名前.com」の提供しているサービスを利用しましょう。

「お名前.com」では、独自ドメインとレンタルサーバーをセットで契約すると、独自ドメインをレンタルサーバーに紐付ける処理を簡単に行えます。

ホームページの立ち上げの設定が楽になるので、非常におすすめです。

ここからは、HTMLファイルを作成する手順について解説していきます。

作業自体は非常にシンプルで、テキストエディタのプレーンテキストモードでHTMLのコードを書き、拡張子を「.html」にして保存すれば、HTMLファイルになります。

この作業は誰でも自分のパソコンで行えるので、ホームページを構成する最低限のHTMLコードをサンプルに、HTMLファイルの作成手順を追いかけてみましょう。

テキストエディタにHTMLの書式でコードを入力しましょう。

ここではホームページの基礎となるヘッダー、ボディ、フッターで構造を作り、h1タグに「タイトル」、h2タグに「見出し」、pタグに「本文」というダミーの文章を入力しています。

HTMLを記述したテキストを保存、ファイル名は「index.html」と指定します。
これはトップページであることを示すための名称です。

「index.html」を保存できたら、ウェブブラウザの画面にドラッグ＆ドロップしてみましょう。正しく作成できていれば、HTMLで記述されたページの内容が表示されます。

これはローカルのHTMLファイルを表示させているだけで、ウェブに公開した状態ではない点に留意しましょう。

HTMLファイルを作成できたら、次はそれをサーバーにアップロードしましょう。

サーバーへの接続とファイル転送は本来、かなり複雑な手順を要しますが、レンタルサーバーではそのプロセスが大幅に簡略化されていています。

「お名前.com」のレンタルサーバーの場合、コントロールパネルからファイルマネージャーを開いて、HTMLファイルをドラック＆ドロップすれば、それでアップロードは完了です。

「お名前.com」のレンタルサーバーのコントロールパネルを開き、「ファイルマネージャー」をクリックしましょう。

レンタルサーバー内に保存されているファイルが表示されます。

初期状態ではエラーメッセージが保存される「error」フォルダと、サーバーの設定を記述した「.htaccess」だけが置かれています（レンタルサーバーにWordPressをインストールしている場合は、これ以外にも多くのフォルダやファイルが置かれています）。

ファイルマネージャーを開いた状態で、HTMLファイル（index.html）をブラウザにドラック＆ドロップすると、アップロードが行われます。

ファイルマネージャー上にHTMLファイルが表示されたのを確認しましょう。

「お名前.com」のレンタルサーバーを選択する画面に戻り、レンタルサーバーに設定されているドメイン（URL）をブラウザで開きましょう。

HTMLファイルの内容がブラウザに展開されます。

ブラウザのアドレス欄から、レンタルサーバーに設定したドメインのURLで、HTMLファイルが表示されていることを確認しましょう。

今回は、HTMLでホームページを作成してインターネットに公開する手順を解説しました。

HTMLファイルの作成とサーバーでの公開はインターネットの仕組みの根幹をなす、基礎中の基礎です。

今回サンプルに利用したのは、ホームページの構成要素のベースの部分のみで、表示されている内容は非常に簡素なものです。

基本的なホームページの仕組みはどれも共通なので、このHTMLファイルのコードを複雑にしていくことで、ホームページでの高度な表現が実現可能になります。

ホームページ運営の基本を学ぶために、手打ちでHTMLファイルを作成し、それを手動でサーバーにアップロードするところから、始めてみましょう。

ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、
あるいはWordPressなどを使用する方法があります。

まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

アフィリエイトに挑戦してみようと考えている方は、以下のリンクから、ぜひご利用ください！