WebCamp・WebCampProを運営する株式会社インフラトップのオウンドメディア【スキルマ】。プログラマー・エンジニア・Webデザイナーを目指す初心者の方に向けた記事や、就職・転職を考えている方向けの記事を発信しています。

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

プログラミング教室・人気ランキング

順位 スクール名 こんな方におすすめ 公式サイト
   Web Camp 【業界最安値】1ヶ月通い放題/Webサービスなど作りたい方 公式サイト 
  TECH BOOST ブロックチェーン/AI/IoTコースあり/3ヶ月でエンジニアに! 公式サイト
Tech Camp Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方! 公式サイト
▼本記事について
本記事は、『たった1ヶ月で未来を変えられる』初心者向けプログラミングスクール「WebCamp(ウェブキャンプ)や、未経験者でも3ヶ月の学習でエンジニアに転職・就職ができる「WebCampPro(ウェブキャンププロ)」を運営してる株式会社インフラトップが提供しています。

みなさんはご自身でホームページを作ってみたいと思われたことはありますか?

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

今回はHTMLを使ったホームページの作り方を初心者の方にもわかりやすいように、大枠でご説明していきます。

そもそもHTMLとは何か?

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

HTMLはHyperText Markup Languageの頭文字です。直訳すると「すごいテキストを構造化する言語」という意味になります。具体的にどういうことができる言語かというと、文書中にリンクが設定できたり、文字の色や大きさを操作できたり、画像や動画を設置できたり、といった機能があるすごいテキスト、という具合に解釈していただくといいかもしれません。

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

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

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

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

ファイルの拡張子は.htmlです

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

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

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

まずはテキストファイルを新規作成します。(拡張子は.txtです)作成したファイル名は任意のもので構いません。ファイルを開いて上記の「<b>字体を太くしたいです</b>」という文字列をコピーペーストして保存します。そしてファイルを閉じ、ファイル名を変更して拡張子を.htmlに変更します。その後このファイルをお使いのブラウザのアドレスバーのところまでドラック&ドロップしてみてください。

いかがでしょうか。太字で「字体を太くしたいです」と表示されましたでしょうか。htmlとはこのようににホームページを作っていくための言語です。もちろんできることはもっとたくさんあります。

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

ここで紹介する手順は実際に作って覚えるためというよりは、一連の流れを理解するためのものです。具体的なやり方がわからなくても、とりあえず一度目を通してみてください。どのようにホームページが作成されていくのかがなんとなく掴めるようになるはずです。

htmlファイルを作成する

まずは拡張子が.htmlのファイルを作成します。ファイルをどこに保存するのかなどは今はあまり気にしなくて大丈夫です。

タグを使って文書を作成する

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

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

図1

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

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

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

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

1.まずFTPソフトでアップロードするファイル(今回はhtmlファイル)を選択。

2.webサーバーにファイルをアップロード。

3.webサーバーに設定してあるアドレス(概ねhttp://で始まる文字列)をブラウザのアドレスバーに入力して、htmlファイルをブラウザで表示させる。

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

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

HTMLの学習方法

HTMLを学習するにはいくつか方法がありますが、ここではひとまず入門的なことを学習する手順をご紹介していきます。

簡単なHTMLを構成してみる

まずは簡単なHTMLを作成してみましょう。

htmlとbodyタグで囲みます

HTMLはまずhtmlとbodyタグで囲みます。

<html>
<body>
</body>
</html>

なぜこうするのかは今は深く考えなくても大丈夫です。こういう約束になっていると思ってください。ちなみにタグを閉じるときは</>(スラッシュ)を使います。<html>のタグを閉じる場合は</html>です。タグをしっかり閉じないと、意図したとおりに文書が表示されなくなりますのでご注意ください。

文章は<p>

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

<html>
<body>
<p>文章はpタグの中に書きます</p>
</body>
</html>

リンクは<a>

リンクはaタグです。例えばYahoo!へのリンクを貼りたい場合はaタグの中の「href=””」のダブルクォーテーションの中にアドレスを記入します。別ページで開きたい場合は「target=””」のダブルクォーテーションの中に「_blank」と記入します。このようにタグの詳細な情報を規定する項目を「属性」と言い表します。

<html>
<body>
<p>文章はpタグの中に書きます</p>
<p><a href=”<a href="http://yahoo.co.jp/">http://yahoo.co.jp/</a>” target=”_blank”>ヤフーはこちら</a></p>
</body>
</html>

強調したい文字列は<h>

文字列をタイトルのように強調したい場合はhタグを使用します。hタグはhの後に数字をつけることで、文字の大きさを調整することができます。1が最も大きい字体で、数字が小さくなっていくごとに文字の大きさが小さくなっていきます。数字は6まで使うことができます。

<html>
<body>
<h1>HTMLの初歩</h1>
<h2>字体が少し小さくなります</h2>
<p>文章はpタグの中に書きます</p>
<p><a href=”<a href="http://yahoo.co.jp/">http://yahoo.co.jp/</a>” target=”_blank”>ヤフーはこちら</a></p>
</body>
</html>

最終的にはこうなります

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

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

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

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

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

学習サイトなどで勉強を深める

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

やさしいホームページ入門

http://www.ink.or.jp/~bigblock/

タグとは?というHTMLの初歩の初歩からわかりやすく解説してくれるページです。基本的なHTMLの構造から、テーブルの作り方まで一通り学習することができます。ひとまず概念的なものをざっと理解したいという方に向いています。

1時間で作るホームページ

http://www.shoshinsha.com/hp/1hour/index.html

HTMLをまったく知らない状態からでも、ホームページが作成できるページです。かわいいキャラクターの会話形式で説明が進んでいくので、理解しやすくなっています。目次を追うごとにホームページが完成していくので、手を動かしながら覚えたい方にはぴったりの学習サイトです。

ドットインストール

http://dotinstall.com/

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

progate

https://prog-8.com/

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

ホームページ作成ツールを使ってみる

ホームページはメモ帳でも作成することができます。しかしHTMLを構成するのに適したツールを使うことで、何倍も作成しやすくなるうえ、生産性も上がります。ここではホームページを作成するのに便利なツールをいくつかご紹介していきます。

ホームページビルダー21

http://www.justsystems.com/jp/products/hpb/index.html

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

DreamWeaber CC

http://www.adobe.com/jp/products/dreamweaver.html

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

Atom

https://atom.io/

HTMLやCSSなどを書くのに適し無料のテキストエディターです。作成ツールというよりかは、コードを編集していくエディターとなっています。メモ帳よりも便利な機能が多くあるので、コードをしっかり学習していきたい方にはおすすめのツールになります。ただし使い方が少し難しい部分もあるので、ある程度HTMLやCSSの学習を進めた方におすすめのツールです。

まとめ

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

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

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

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

WebCamp・Webスクについて

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。Webスクは半年間で未経験から即戦力エンジニアを育成する転職保証付きのプログラミングスクールです。

2つのサービスを運営するインフラトップでは、「学びと仕事を通して人生を最高の物語にする」という理念で会社を経営しています。

キャリアアップを目指す方は、この機会に私達と一緒にプログラミングを学んでみませんか?

▼未経験から1ヶ月でWebデザイン・プログライミングを学びたい方はこちら!

▼IT未経験からエンジニアに就職・転職したい方はこちら!