HTMLでのホームページの作り方を解説【初心者向け】 | プログラミング入門ならWEBCAMP NAVI
【12月枠も残りわずか】転職保証コース

HTMLでのホームページの作り方を解説【初心者向け】

女性とパソコン

「自分でイチからホームページを作りたい」

そう思ったことはありませんか?

ホームページはHTMLという言語で書かれているので、HTMLを覚えれば誰でもホームページを作ることができます。

今回の記事では、HTMLを使ったホームページの作り方を初心者の方にも分かりやすく解説していきます!

そもそもHTMLとは何か?

そもそも、HTMLとは一体どのような言語なのでしょうか?

大きく3つのポイントがあります。

  • HTMLとはブラウザに文書を表示させるための言語
  • タグというもので構成されている
  • ファイルの拡張子は.html

詳しく解説していきます!

ブラウザに文書を表示するための言語

HTMLは「HyperText Markup Language」の略になります。

直訳すると、「すごいテキストを構造化する言語」という意味になります。

具体的にどういうことができる言語かというと、文書中にリンクが設定できたり、文字の色や大きさを操作できたり、画像や動画を設置できたり、といった機能があるすごいテキスト、という具合に解釈していただくといいかもしれません。

タグというもので構成されている

HTMLはタグというものを使って書かれています。

文字を太くしたい場合、ワードなどでは文字列を選択して「B」のマークのボタンを押すと太くなりますね。HTMLでは太くしたいところを「<b>」というタグで囲みます。例えば以下のようにします。

HTML
<b>字体を太くしたいです</b>

この文字列をhtml用のファイル(後述します)に保存し、ブラウザで表示させると字体が太くなって表示されます。HTMLはこのようにさまざまな機能のあるタグを使って文書を構成していきます。

ファイルの拡張子は.html

テキストファイルを保存するとき、拡張子は.txt、ワードを保存するとき拡張子はおおむね.docxです。
HTMLは.htmlという拡張子をつけたファイルに保存します。
拡張子がご自身のパソコンで表示されない場合はまず拡張子を表示する設定を行ってください。

詳しい設定方法は以下のページをご参照ください。

ファイルの拡張子を表示する方法

HTMLでホームページを作成するステップ

それでは、実際にホームページを作成する方法を解説していきます。

ここで紹介する手順は実際に作って覚えるためというよりは、一連の流れを理解するためのものです。

具体的なやり方がわからなくても、とりあえず一度目を通してみてください。どのようにホームページが作成されていくのかがなんとなく掴めるようになるはずです。

STEP.1
開発環境を整える
まずは、HTMLを使ってホームページを作成する環境を整えましょう。こちらの記事に、HTMLでホームページを作成する際の手順が乗っておりますので、ご覧ください。
HTML・CSSの開発環境を整えよう【おすすめテキストエディタも紹介】
STEP.2
HTMLファイルを作成する
まずは拡張子が.htmlのファイルを作成します。ファイルをどこに保存するのかなどは今はあまり気にしなくて大丈夫です。
STEP.3
タグを使って文書を作成する

このファイルに前の章で説明したタグを使って文書を作成していきます。タグの詳細な説明はここでは省きますが、以下のような構成の文書をhtmlファイルに保存すると、このようなページがブラウザに表示されるようになります。

HTML
<html>
<head>
    <title>ここがタイトル情報です</title>
</head>
<body>
    <h1>文章のタイトルなどをここに記述</h1> 
    <p>ここが本文を記述するところです。</p>
</body>
</html>

STEP.4
FTPソフトを使ってwebサーバにアップロードする

完成したhtmlファイルを、今度はwebサーバーというホームページを公開するための外部のパソコンにアップロードしていきます。

htmlファイルをアップロードするにはFTPソフトという、外部のパソコンにファイルを送信するためのソフトウェアを使用します。FTPソフトには外部のパソコンと接続するための設定が必要ですが、複雑なのでここでは省きます。

FTPソフトを使ってアップロードする手順

  1. まずFTPソフトでアップロードするファイル(今回はhtmlファイル)を選択。
  2. webサーバーにファイルをアップロード。
  3. webサーバーに設定してあるアドレス(概ねhttp://で始まる文字列)をブラウザのアドレスバーに入力して、htmlファイルをブラウザで表示させる。

実際はwebサーバーのインストールしてあるパソコンのどこにファイルをアップロードするのかなど細かい決まりごとがありますが、ここで大事なのは自分のパソコンで作成したhtmlファイルをインターネットで閲覧するには、webサーバーファイルをにアップロードする必要がある、ということです。

STEP.5
完了!
以上がHTMLでホームページを作成するステップになります。なんとなくでもご理解いただけたでしょうか。

HTMLはどうやって書くのか?

それでは、HTMLでWebサイトを作るのには欠かせない、基本的なタグの解説をしていきます。

さらに詳しく知りたい方は、こちらの記事でHTMLの基本的な書き方やタグについて詳しく解説しているので、こちらをご覧ください。

HTMLの正しい書き方まとめ【各要素・タグの使い方を徹底解説】

大きなポイントはこちらになります

  • headタグの中にHTMLの情報を記載する
  • bodyタグにページの内容を書く
  • ホームページのリソースをみる

詳しく解説していきます!

headタグにHTMLの情報を記載する

headタグの中に、サイトの情報などを記載していきます。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
    <link rel="stylesheet" href="style.css"> 
    <title>〇〇</title>
</head>

このheadタグに書かれている内容は、実際にページには表示されません。

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

bodyタグには、実際にブラウザに表示される、ページの内容を記載します。

HTML
<body>
    <h1>サンプルホームページ</h1>
    <p>事業内容</p>
    <p>メンバー紹介</p>
</body>

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

見出しを作成するには、h1タグを使用します。h1~h6までの段階があり、数字が大きくなるほど文字が小さくなります。

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

文章は<p>というタグで囲みます。bodyタグの中に書くようにします。

ブラウザで表示させると、このようになります。

ここまで作ってきた文書をhtmlファイルに保存し、ブラウザで確認すると以下のようなページを見ることができます。

ホームページのソースを見てみよう

ホームページのソースとは、ホームページを構成しているHTMLやCSSのことを指します。このソースは簡単に見ることができますので、見てみましょう。まずはご自身のパソコンでお好きなホームページを開いてみてください。

ブラウザを右クリックして出てきたメニューから、google chromeの場合は「ページのソースを表示」を選択すると見ることができます。
使用しているブラウザによって文章は変わりますが、「ソースを表示」というニュアンスの文字列が表示されるので、その項目を選ぶとホームページのソースが表示されます。

すると、たくさんの解読不明の文字列が表示されたのではないでしょうか。
実際のホームページはHTMLタグだけではなく、CSSやJavaScriptといった言語でも構成されています。
勉強を進めることでこれらの要素を理解できるようになります。

ホームページをデザインするには?

HTMLだけを用いてホームページを作成すると、白黒だけの単調なホームページになってしまいます。

デザインなどを加え、おしゃれなホームページにするにはCSSを用いる必要があります。

CSSについて詳しく学習したい方は、こちらの記事で初心者の方向けに詳しく解説してありますので、ぜひご覧ください。

CSS(スタイルシート)の書き方【初心者が5ステップで分かる基本文法】

その他のホームページの作り方

HTMLでは自分でデザインから考えてWebサイトを作成する事ができますが、ホームページを作成する方法は、他にもあります。

今回はその中でも代表的なCMS, 無料ホームページ作成サイト, ホームページ作成ソフトで作る方法を紹介します。

まず、それぞれの特徴を解説する前に一覧で表にまとめました。

HTML&CSS CMS HP作成サイト HP作成ソフト
費用 無料〜数千円 ドメイン・サーバー代 無料・有料プラン 数千円〜数万円
難易度 初心者は勉強が必要 少しHTMLなどの知識が必要 初心者でも簡単 初心者でも簡単
カスタマイズ性

HTML・CSSについては上記で説明しましたので、その他の方法についてそれぞれ詳しく解説していきます。

CMSで作成する

CMSとは、Contents Management System(コンテンツ・マネジメント・システム)の頭文字をとったものです。

web制作に必要な専門的な知識が無い方でも、webサイトやコンテンツを構築・管理・更新できます。

代表的なWordPressと、Movable Typeについて紹介します。

WordPress

カスタマイズ性
(3.5)
簡単さ
(3.5)
価格の安さ
(4.0)
総合評価
(4.5)

1つ目は、WordPressを使ってサイトを作成する方法です。

WordPressでは、無料か有料のテーマを選び、カスタマイズをしてホームページを作成していきます。

WordPressを使うこと自体は無料ですが、サーバー代、ドメイン代などが必要になります。

HTML・CSSの知識がなくても、本格的なサイトを作りたい人にオススメです!

Movable Type

カスタマイズ性
(3.5)
簡単さ
(3.5)
価格の安さ
(2.0)
総合評価
(4.0)

Movable Typeは日本の企業が提供しているため、信頼性が高いのが特徴です。

Movable Typeは個人利用では無償となっていますが、商用利用では有償になってしまいます。

またプラグインも有料なものが多いため、コストが大きくなってしまうのがデメリットとしてあげられます。

 

無料ホームページ作成サイトを使って作成する。

2つ目は、無料サイトを使って作成する方法です。

Wix.com」や「Jimdo」といった無料ホームページ作成サイトでは、たくさんのテンプレートの中から好きなものを選んでカスタマイズすることができます。

HTMLの知識や、Wordpressの初期設定などが必要ないので、とにかく簡単にホームページを作成したいという方におすすめです。

無料ですが、独自ドメインを取得したり、広告を非表示にする為に課金する必要があるので、注意が必要です!

Wix.com

引用元:https://ja.wix.com/

カスタマイズ性
(3.0)
簡単さ
(4.0)
価格の安さ
(4.0)
総合評価
(4.0)

Wix.comではAI を使用した自動ホームページ作成ツール「Wix ADI」、自由自在にデザインを編集できるクリエイティブな方向けの「Wix エディタ」など、様々な機能があり、誰でも簡単におしゃれなホームページが作成できます。

「無料」と書かれていますが、独自ドメインを取得したりするには料金がかかりますので注意が必要です。

ジンドゥー

引用元:Jimdo公式サイト

カスタマイズ性
(3.0)
簡単さ
(4.5)
価格の安さ
(3.5)
総合評価
(4.0)

ジンドゥーも無料でホームページ作成を始めることができますが、Wixと同様に、独自ドメインなどを取得するには課金する必要があります。

ジンドゥーは、「コーディング不要で作成できる方法」と「コーディングを用いながらホームページを作成する方法」の2つから選べるので、自分に合った方法でホームページを作成することができます。

ホームページ作成ソフトを使って作成する。

三つ目は、ホームページ作成ソフトを使って作成する方法です。

ホームページ作成ソフトは、Wordpressや無料作成サイトと違って数千円〜数万円とお金がかかってしまいますが、テンプレートの数が充実していたり、カスタマイズがより自由にできるといったメリットがあります。

代表的なホームページ作成ソフトをいくつか紹介します。

ホームページビルダー21

カスタマイズ性
(3.5)
簡単さ
(3.0)
価格の安さ
(2.0)
総合評価
(3.5)

ジャストシステム社が開発しているホームページ作成ソフトです。1~2万円前後で購入でき、初心者でも比較的簡単にホームページを作成することができます。Webページの表現もいくつかテンプレートがあらかじめ用意してあるので、HTMLやCSSに詳しくなくても本格的なホームページを作成できる点が魅力です。

DreamWeaber CC

カスタマイズ性
(3.5)
簡単さ
(3.0)
価格の安さ
(2.0)
総合評価
(3.5)

HTMLとCSSがある程度わかるようになってきたら、本格的なツールを使ってホームページを作成してみるのもいいでしょう。DreamWeaber CCはAdobe社が提供するホームページ作成ツールです。月額2,200円で利用可能で、さまざまな機能を備えているためプロの使用にも耐えられます。

ホームページを作る為に、さらに学習を深めよう

HTMLでホームページを作っていく為には、更に学習を深めていく必要があります。

代表的な学習方法として、「学習サイトで学習する方法」と「スクールに通う方法」について解説していきます。

学習サイトで学習を進める

ドットインストールやProgateなどの学習サイトでは、オンライン動画やスライドで分かりやすくプログラミングを学ぶことができます。

分からないところを何度も見返すことが出来るので、自分のペースで学ぶことができます。

HTMLを勉強できるサイトは数多く存在します。その中でも役に立つホームページをいくつかご紹介していきます。

ドットインストール

学びやすさ
(4.5)
面白さ
(4.0)
値段の安さ
(5.0)
総合評価
(4.5)

動画で学ぶならドットインストールがおすすめです。3分程度の短い動画でホームページの作り方を説明してくれるので、ちょっとした隙間時間にも学習を進めることができます。HTMLのほか、CSSやJavaScriptといった言語も学習可能です。

progate

引用元:https://prog-8.com/

学びやすさ
(5.0)
面白さ
(4.0)
値段の安さ
(5.0)
総合評価
(5.0)

HTMLを実際に書きながら学習できるサイトです。会員登録することで利用することが可能になります。無料と有料両方のコースが用意されており、初級編は無料で学習することができるようです。テキストを読みながらコードも書いて学習していきたい方におすすめです。

プログラミングスクールに通う

一番おすすめしたいプログラミングの学習方法は、「プログラミングスクールに通う」ことです。

プログラミング学習は、多くの人が挫折してまう分野でもあります。

そのために「作りたいホームページを作れるようになる」前に、諦めてしまう人が多くいます。

プログラミングスクールでは、分からないところをすぐに質問できたり、チーム開発を行える環境などがあるため、挫折する可能性が圧倒的に少なくなります。

プログラミングスクールのDMM WEBCAMPでは、転職保証などもあり、プログラミングスキルを身に付けるだけではなく、そのスキルを活かした仕事に就くことも可能です。

興味のある方は、ぜひこちらをご覧ください!

まとめ

いかがでしたか?なんとなくでもHTMLを使ったホームページ作成方法について、ご理解いただけましたでしょうか。

ホームページを作成するだけなら、HTMLやCSSといった言語を理解していなくても作ることは可能です。実際HTMLやCSSを書くことなく、美しいホームページを作成するためのサービスはいくつか提供されています。

しかしHTMLやCSSを覚えることで、より細かな調整や、こうしていきたいという希望が実現できたりするので、表現の幅が広がります。

HTMLは無料から有料までさまざまなタイプの学習サイトや、書籍、スクールなど数多く存在しています。HTMLは学習環境が大変整った学習しやすい言語なので、興味のある方は一度学習されてみてはいかがでしょうか。

12月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%