更新日: 2018年11月1日
公開日: 2018年10月31日

全HTML入門者に捧ぐ、最初にみておきたい４個の項目

HTML（えいちてぃーえむえる）は、すぐに実行結果がわかって修正も比較的カンタンなので、全くの初心者でも楽しく学べちゃうオススメの言語です。学習をスムーズにすすめるために、基本構造、おおまかな書き方、おすすめの入門書、おすすめ入門サイトの４つを知っておきましょう！

HTMLとは？
HTMLがわかると、こんなメリットが！
HTMLの基本構造
基本構造
HTMLタグ
HEADタグ
BODYタグ
DIVタグ
Pタグ
IMGタグ
HTMLの書き方
テキストエディタとブラウザを用意する
テキストエディタで書く！
HTMLとして保存する
ブラウザで確認してみる
修正・更新する
HTML入門書
いちばんよくわかるHTML5&CSS3デザインきちんと入門
スラスラわかるHTML&CSSのきほん第2版
デザインの学校これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]
HTMLの入門サイト
ドットインストール
Progate
まとめ

HTMLとは？

HTMLとは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、インターネット上のWebページを表現するために使われている言語です。Webブラウザが、HTMLで書かれた文章を読み込んだ結果、今あなたが閲覧しているようなWebサイトが表示されます。

Webサイト上で、右クリック→ソースを表示としてみてください。今見ているサイトのHTMLをみることができますよ。

HTMLがわかると、こんなメリットが！

HTMLがわかると、以下のようなメリットがあります。

自分のWebサイトが作れる

自分のお店や趣味の紹介のホームページなど、見るだけだったWebサイトが自分でも作れちゃいます。

ブログパーツを編集できる

ブログのデザインはHTMLやCSSで書かれています。HTMLが書ければ、自分の思った通りに細やかな編集ができますよ。

他のプログラミング言語の入り口にピッタリ

PHPやJava、Pythonなど他のプログラミング言語も、Webブラウザに文章や画像を表示させるときはHTMLを使います。また、何度でもトライアンドエラーができるHTMLなら「命令を書いて、マシンがその通りに動く」という独特なコンピューターとのやり取りのコツも掴みやすいです。いつかはプログラミングを始めたいなら、HTMLから始めて損はないでしょう。

HTMLの基本構造

よくわからないアルファベットがたくさん並んでいる・・・と思われがちなHTMLですが、学んでみると意外とわかりやすいですよ！

HTMLはタグと呼ばれる< >のカッコで囲まれた専用の指示を使って、文字や画像を仕分け、組み立てています。図で見てみましょう！

基本構造

それぞれ四角で囲んでいる部分が、タグで囲まれている部分にあたります。たとえば上の図のような構造で作ったHTMLは実際にはこのようになっています。

HTMLファイル

Webブラウザで確認

HTMLタグ

簡単にひとつひとつのタグの意味を見ていきましょう！ <HTML> </HTML> で囲まれた部分は、このファイルがHTMLだということを表しています。

HEADタグ

<HEAD> </HEAD> で囲まれた部分は、文字化けを防ぐための文字コードの指定や、ページのタイトルなど、Webサイトの補助的な情報を記載します。

BODYタグ

<BODY> </BODY> で囲まれた部分は、Webサイトの本文です。

DIVタグ

<DIV> </DIV> で囲むことで、Webサイト上の情報のかたまりを表します。このタグで囲んだ部分に線をひいたり、色をつけたりすることもできます。

Pタグ

文章の段落を<P> </P>で囲みます。

IMGタグ

<IMG src="ファイル名" > で画像を指定の場所に配置します。

このように、HTMLでは「こう表示したいときはこう書く」というルールに沿って、色々なタグを組み合わせてWebページを作っていきます。

HTMLの書き方

それでは試しに、HTMLを書いてみましょう！

テキストエディタとブラウザを用意する

パソコンさえあれば用意するものは、こちら2点だけ。どちらも最初からインストールされているもので大丈夫です！

テキストエディタ(Notepadなど)
Webブラウザ(ChromeやIEなど)

テキストエディタで書く！

テキストエディタで、タグを書いていきます。1文字ずつ打つことで覚えやすいかたは、時間があれば自分で書いてみてください。急いでトライしてみたい！というかたは、こちらのサンプルをコピーしてテキストエディタに貼り付けてみましょう。

<HTML>
<HEAD>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>サンプルHTMLです</title>
</HEAD>
<BODY>
    <div>
        <p>
            <h2>サンプル見出し</h2>
            <img src="sample.jpg" width=100 height=100>
            サンプルテキスト
        </p>
        <p>
            サンプルテキスト2
        </p>
    </div>
    <div>
        <p>
            <h2>サンプル見出し</h2>
            <img src="sample2.jpg" width=100 height=100>
            <img src="sample3.jpg" width=100 height=100>
        </p>
    </div>
</BODY>

</HTML>

HTMLとして保存する

先ほど書いた/貼り付けたテキストを、保存します。通常、テキストファイルをそのまま保存するとXXXX.txtなどになっていることと思います。HTMLファイルは.(ドット)以降のファイル名である拡張子を.htmlにして保存します。例えば、sample.htmlなど好きな名前をつけましょう。

ブラウザで確認してみる

保存したHTMLファイルをダブルクリック、もしくはWebブラウザにドラッグ＆ドロップすると、先ほど書いたHTMLがWebサイトのように表示されます！

修正・更新する

サンプルのままでは画像ファイルが反映されていません。IMGタグにある画像ファイル名を自分のパソコンにある好きな画像のファイル名に変更してみましょう。

テキストエディタで再度編集し、ブラウザの「更新」ボタンを押すと反映されますよ。

HTML入門書

もっとたくさんHTMLが書きたくなってきたのでは？入門者がざっと概要を掴むには、やはり書籍での学習がおすすめ。まず読んでほしい入門者向け書籍を紹介します！

いちばんよくわかるHTML5&CSS3デザインきちんと入門

img	text
	著者：狩野祐東出版社：SBクリエイティブ出版年月：2016/10/27 単行本価格：2,678円 Kindle価格：2,480円対象：体系立てて学びたい人

img

text

著者：狩野祐東
出版社：SBクリエイティブ
出版年月：2016/10/27
単行本価格：2,678円
Kindle価格：2,480円

対象：体系立てて学びたい人

編集部レビュー

Webサイトがどうして表示されるのか？のしくみの部分にはじまり、タグの意味や使い方、CSSを使った装飾など基礎から真面目に取り組むことができる一冊です。スマートフォンでの閲覧が増えている昨今の現状に合わせ、レスポンシブWebデザインについても網羅されており、そろそろ独自のWebサイトを開発したい中級者にも役立ちそうです。

Amazonレビュー

学ぶ過程で誰しも疑問を抱えつつ進んでいきそうな部分がしっかりと解説されています。

Amazonレビューより引用

スラスラわかるHTML&CSSのきほん第2版

img	text
	著者：狩野祐東出版社：SBクリエイティブ出版年月：2018/4/14 単行本価格：2,138円 Kindle価格：1,980円対象：手を動かしながら学びたい人

img

text

著者：狩野祐東
出版社：SBクリエイティブ
出版年月：2018/4/14
単行本価格：2,138円
Kindle価格：1,980円

対象：手を動かしながら学びたい人

編集部レビュー

HTMLを書くためのテキストエディタのインストールから解説してくれている、入門者向けの親切な一冊です。「カフェのサイトを作る」という目的で実習課題を進めていく内容になっており、手を動かしながら理解したい人におすすめです。実習課題作成のためのサンプルデータもダウンロードできるので安心。2018年4月の第二版への大改訂で、最新のHTML5.2に対応したのも高評価ポイントです！

Amazonレビュー

この参考書はわかりやすくプログラミングが好きになります。初心者におすすめの参考書です。

Amazonレビューより引用

デザインの学校これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

img	text
	著者：千貫りこ出版社：技術評論社出版年月：2017/5/26 単行本価格：2,138円 Kindle価格：2,138円対象：パソコン操作にちょっと自信がない人

img

text