8月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
7月受入枠は満員となっております。8月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい

上記にあてはまる方は、ぜひご検討ください!

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

ホームページは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ファイルを作成する

まずは拡張子が.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でホームページを作成するステップになります。なんとなくでもご理解いただけたでしょうか。

自分で稼ぐ力をつけるため、新卒5年目の営業マンがエンジニアに転職!【WebCampPro転職者インタビュー】

HTMLの学習方法

cat and macbook

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

簡単なHTMLを構成してみる

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

htmlとbodyタグで囲みます

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

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

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

文章は<p>

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

<html>
<body>


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

</body>
</html>
・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

リンクは<a>

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

<html>
<body>


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

<span><a href="http://yahoo.co.jp/" target="_blank">ヤフーはこちら</a></span>

</body>
</html>

・ホームページ作成を勉強する時に参考にしたい記事を集めてみました。

【初心者入門】HTMLの学習で参考になるおすすめのブログ○選!を参考にしてみてください。

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

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

<html>
<body>

<h1>HTMLの初歩</h1>


<h2>字体が少し小さくなります</h2>



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

<span><a href="http://yahoo.co.jp/" target="_blank">ヤフーはこちら</a></span>

</body>
</html>

最終的にはこうなります

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

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

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

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

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

・ホームページ作成を勉強する時に参考にしたい記事を集めてみました。

【初心者入門】HTMLの学習で参考になるおすすめのブログ○選!を参考にしてみてください。

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

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円で利用可能で、さまざまな機能を備えているためプロの使用にも耐えられます。

・楽しみながら、プログラミング学習をしたいという人は【初心者入門】ゲーム感覚で遊びながらプログラミングを学習できるサイト4選!を参考にしてみてください。

Atom

https://atom.io/

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

HTMLの学習方法につきましたら別の記事で詳しく書かれてますので、そちらも併せてご覧ください。

まとめ

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

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

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

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

8月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
7月受入枠は満員となっております。8月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!

おすすめの記事