- [HTMLを独学で勉強するには? エンジニアが学ぶべき理由や習得に必要な時間](https://and-engineer.com/articles/YXpquhUAACsAivlG)

- [HTMLでできることは少ない？できないことやタグも一覧でまとめた](https://and-engineer.com/articles/YV1ZtxAAACn9LtD9)

- [HTMLのdivタグとは？読み方・目的・使い方などを解説！](https://and-engineer.com/articles/YUmP1hAAACUA1NVs)

まずは、*HTMLとは何か*について解説します。HTMLが使われる場面やPHPなどのプログラミング言語との違いについて詳しくみていきましょう。

### HTMLはホームページの文書を作成するための言語

HTMLとは、*ホームページの文書を作成するための言語*のことです。ホームページの文書には見出しが表示されていたり、画像・表・リストなどが挿入されていたりします。**HTMLでは「タグ」というものを使って、このような文書を書き表すことが可能**で、HTMLのソースコードを書いたファイルを「HTMLファイル」と呼びます。HTMLファイルをブラウザで開くと、ブラウザがHTMLコードを読み取り、ホームページを作成します。

また、HTMLと並んで多く使用されるのが「CSS」で、**ホームページのデザインを整えるための言語**です。デザインはHTMLだけでも整えることは可能ですが、HTMLのみだとコードの中身が複雑になり、開発が困難になってしまいます。そこで、デザイン部分の処理はCSSを使って記述することでコード全体がまとまり、ホームページの修正を行う際も比較的容易になります。

CSSとは？初心者が覚えたい基礎知識から使用例まで解説！

HTMLを使う代表的な仕事は、*Webデザイナー*です。WebデザイナーはWebサイトのデザイン面を担当する仕事で、どういったデザインにするか考え、デザイン通りになるようにHTMLコードを記述していきます。

他にも、マークアップエンジニアという仕事もあります。マークアップエンジニアは、HTMLコードの記述のみに特化したエンジニアです。**HTMLやCSSについてより深く精通し、ハイレベルなコードを書ける必要がある**でしょう。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

### HTMLとプログラミング言語の違い

HTMLは厳密には、*プログラミング言語ではありません*。プログラミング言語とは、コンピュータに処理を行わせるための言語のことです。たとえば、コンピューターに計算をさせたり、同じ処理を繰り返しさせたりします。

**HTMLは計算や繰り返し処理を記述することができない**ため、それらの処理が得意なPHPやJavaScriptなどのプログラミング言語とは、明確に区別されています。

PHPでできることを解説！機械学習やスマホアプリ開発はできる？

JavaScriptでできることとは？代表的なものから特徴まで詳しく紹介！

## HTMLを勉強するのにおすすめな本5選

*HTMLを勉強するのにおすすめの本*を5つ紹介します。これらの本は、これからHTMLを勉強する方に特におすすめです。どの本を購入すべきかわからない場合はこの中から選んでみてください。

### スラスラわかるHTML&CSSのきほん

こちらは、ベストセラーにもなっているHTMLの本です。HTMLとCSSの基礎について丁寧に解説しており、スラスラ理解できる1冊です。書籍内にはソースコードも多く掲載されており、詳細な解説が特徴です。**自分が書いたコードの意味を、一行一行理解しながら進めていける**でしょう。

*[スラスラわかるHTML&CSSのきほん](https://www.sbcr.jp/product/4797393156/) *

### いきなりできます！最新ホームページ作り&HTML超入門

本書は、*ホームページ作りについて解説が網羅されている1冊*です。HTMLの書き方だけでなく、画像の扱い方やサーバにファイルをアップロードする方法まで、詳しく解説されています。さらに、Twitterボタンの設置方法など細かいところも抜けなく説明がされているため、本書でホームページ作りの基礎が身につくでしょう。
なお、本書は**Windows対応となっており、Macには対応していないので要注意**です。

*[いきなりできます！最新ホームページ作り&HTML超入門](https://www.sbcr.jp/product/4797382235/) *

### いちばんやさしい HTML&CSS 入門教室

本書は、HTMLとCSSの使い方について*ステップ・バイ・ステップで学ぶことが可能*です。また、現在のトレンドを意識し、**スマホ向けサイトの作り方を重点解説**しているのもポイントでしょう。最終的には、レスポンシブデザインの制作ができるようになります。現場で役立つスキルを身に着けたい方に、おすすめの1冊です。

*[いちばんやさしい HTML&CSS 入門教室](http://www.sotechsha.co.jp/pc/html/1213.htm) *

### 1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書は、*書店員がオススメする「CPU大賞」の1位に選ばれている1冊*です。最新技術にも対応しており、**レスポンシブ・Flexbox・CSSグリッドも学べます**。コードの書き方だけでなく、デザインのことも同時に勉強することが可能なため、まさに1冊ですべてを身につけられる本と言えるでしょう。

*[1冊ですべて身につくHTML&CSSとWebデザイン入門講座](https://www.sbcr.jp/product/4797398892/) *

### いちばんよくわかる HTML5＆CSS3 きちんと入門

本書は、*やや上級者向けの本です*。HTMLやCSSの実践的なテクニックについて詳しく解説されてあり、多くのサンプルコードが掲載されているため、手を動かしながら学ぶことができます。本書を読み込むことで、無駄のないHTMLコードを書けるようになるでしょう。**ある程度HTMLとCSSを学んだ方に、おすすめの1冊**です。

*[いちばんよくわかる HTML5＆CSS3 きちんと入門](https://www.sbcr.jp/product/4797388541/) *

続いて、*HTML本の選び方について解説*します。書店に行くと多くの種類のHTML本が並んでいます。その中から自分に合った本を探すコツをまとめました。

基本的に技術書系は電子書籍より、*紙の本を選択するのがおすすめ*です。理由として、電子書籍だと見開きにしにくく、サンプルコードが途中で途切れてしまうこともあるためです。また、**紙媒体の方が調べたことをメモしやすい**など、メリットが多くあります。

HTMLの本は、*なるべく出版日が最新のものを選択*しましょう。HTMLやCSSはこれまで何度もバージョンアップされており、新機能が追加されてきています。**出版日が古い書籍だと新機能についての解説がありません**。書籍を購入する場合は、出版日を必ず確認するようにしましょう。

### CSSも解説しているものを選ぶ

HTMLだけでなく、*CSSも十分に解説されている本が良い*でしょう。なぜなら、HTMLを使う場合は必ずCSSも一緒に使うことになるためです。Webデザイナーやマークアップエンジニアは、**HTMLとCSSを上手く使い分けるスキル**が求められます。

### ホームページの作り方まで解説しているものを選ぶ

*ホームページの作り方まで解説されている本だと、より良い*でしょう。レンタルサーバーの使い方・ドメインの取得方法・FTPソフトの使い方・ファイルのアップロード方法について、総合的に解説している本がおすすめです。**HTMLの文法は分かるけれど、サイト作成でつまずいているという方は多い**です。ホームページの作り方に関しても、十分なページ数を割いて解説されているか確認しましょう。

最後に、*HTMLを勉強するコツ*についてまとめました。HTMLを効率的にマスターするにはどうすべきかまとめてあります。これからHTMLの勉強を始める方は、ぜひ参考にしてください。

まずは、*学習スケジュールを立てることが肝心*です。1週間後、1ヶ月後に、学習をどこまで進める予定か紙に書き出してみましょう。本格的なWebサイトを作れるまでは、長期的な学習が必要です。学習スケジュールを立てないと**現時点で学習が何%程度進んだのか分からず、学習意欲が衰退してしまい、途中で挫折してしまう可能性があります**。学習スケジュールはしっかり立て、机の前などに張り出すのが良いでしょう。

### 実際に手を動かしながら学習する

HTMLの勉強は、*実際に手を動かしながら学習*しましょう。HTMLの本にはサンプルコードが掲載されているものが多いため、サンプルコードを模写し、**自分のブラウザで表示させてみてください**。コードの実行結果を確認することで、HTMLについて分かることが増えたという実感が湧き、勉強意欲が出てきます。

何冊も本を購入する勉強方法は、あまりおすすめできません。まずは、*1冊を完璧にこなすことが大切*です。HTMLの優良な本には、1冊に基礎がほとんど詰まっているため、1冊を完璧にするだけでも十分に基礎は固まります。その反面、**複数の本をこなそうとすると学習が散漫になってしまいがち**です。他の本にチャレンジするのは、1冊目を完璧に理解してからでも遅くはありません。

## HTMLの勉強は本がおすすめ！手順に基づいて効率的に勉強を進めよう

本記事では、*HTMLを勉強する場合のおすすめの本*について解説しました。どういった本を購入するのが良いのか、お分かり頂けたかと思います。HTMLだけを学んでも実務に活かすのは難しいため、**CSSやホームページの作成方法まで総合的に学べる本を探すのが良い**でしょう。また、なるべく出版日が新しい本だとHTMLの最新バージョンに対応しているため、おすすめです。本記事がHTMLをこれから学ぶ方にとって、有意義なものとなれば幸いです。

本記事では、HTMLを勉強できるおすすめの本を解説します。HTMLは長きに渡って使われているIT言語のため、書籍も多く販売されています。そのため、どの本を選択すべきか分からない人も多いでしょう。今回はおすすめのHTML本を5つ厳選しました。

HTMLとはホームページの文書を作成するための言語

CSSやホームページの作成方法まで、総合的にHTMLを学べる本を探すのが良い

なるべく出版日が新しい本がおすすめ

初学者必見！HTMLを勉強するのにおすすめの本を5つ厳選

始めに、*HTMLエディタとは何か*について解説します。**HTMLエディタは何に使われるものなのか**、メモ帳や統合開発環境との違いはなにか、についてまとめました。

### HTMLエディタはテキストを編集するためのソフト

HTMLエディタは、*テキストを編集するためのソフト*のことです。HTMLのソースコードを記述し、HTMLファイルとして保存することができます。多くのHTMLエディタは、HTMLだけでなく、他のプログラミング言語の記述も可能です。HTMLエディタにはさまざまな種類があり、**中にはインストール不要なものやオンラインで使えるものもあります**。

### HTMLエディタとメモ帳の違い

Windowsのパソコンには、最初からメモ帳ソフトがインストールされています。また、Macにもテキストエディットというメモ帳と類似したソフトがあります。これらのソフトでも、HTMLコードの記述は一応可能ですが、*HTMLエディタを使う方がおすすめ*です。なぜならHTMLエディタには、タグの入力サポートやエラー表示など、コードの記述を効率化できるさまざまな機能が備わっているからです。**プログラマーやWebデザイナーのほとんどが、メモ帳ではなくHTMLエディタを使っています**。

### エディタと統合開発環境の違い

エディタとよく似たものに、「統合開発環境」があります。統合開発環境とは、開発作業を効率的に行うための開発環境を指します。たとえば、Eclipseなどです。統合開発環境とエディタは厳密には区別されていないですが、*一般的に開発に関する機能が豊富なものを統合開発環境と呼ぶことが多い*です。

HTMLのコードを書く際に統合開発環境を使う人もいますが、機能が豊富な分、動作が遅く、**ある程度パソコンのスペックが高くないとスムーズに編集できない**可能性があります。そのため、初心者には統合開発環境よりもHTMLエディタがおすすめです。

## 初心者におすすめのHTMLエディタ5選

ここでは、*初心者におすすめのHTMLエディタを5つ厳選*しました。これらのエディタは使いやすいと評価が高いものばかりです。エディタ選びに迷ったら、**これら5つから選ぶのが良いでしょう**。

サクラエディタは、*日本人が開発したHTMLエディタ*です。エディタ上の表記は全て日本語なので、初心者でも使いやすいでしょう。マニュアルなども日本語なので、分からない箇所が調べやすいのも特徴です。また、機能面も豊富であり、コードの強調や検索機能など**HTML編集に必要な機能は一通り揃っています**。

[サクラエディタ](https://sakura-editor.github.io/)

Atomは、GitHubを作った会社が開発したHTMLエディタです。Atomは利用者が多く、ネット上に使い方を解説したサイトが多いため、*分からない所を調べやすいのがメリット*でしょう。また、Atomはプラグインが多く、機能を追加したり便利に活用したりすることが可能です。**エディタ上の表記がデフォルトで英語になっています**が、プラグインを使うことで日本語に変換できます。

Visual Studio Codeは、**マイクロソフト社が開発したHTMLエディタ**です。Windows・Macの両方で使えて、*初心者から上級者まで人気の高いHTMLエディタ*です。HTML以外にも、さまざまなプログラミング言語に対応しています。

[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

Notepad++は、Windows専用のHTMLエディタです。*Windowsを使っている人が使いやすいように設計*されています。メモ帳と同じような感覚で使えるので、初心者にもおすすめでしょう**。また、プラグインも豊富なため、自分好みにカスタマイズすることが可能**です。

[Notepad++](https://forest.watch.impress.co.jp/library/software/notepadplusp/)

Online HTML EDITORは、*オンラインで使えるHTMLエディタ*です。インストール不要で、手軽にコードを記述して実行結果を確認することができます。インストールが不要なので、**パソコンの容量を圧迫することなく使える点がメリット**でしょう。本格的な開発には活用できませんが、コードにミスがないか素速く確認したいときにおすすめです。

[Online HTML EDITOR](http://asomin.net/htmleditor/)

HTMLエディタにはさまざまな機能が備わっています。ここでは、*具体的にどういった機能が備わっている*のかまとめました。これらの機能を活用することで、**ソースコードの記述がスムーズに行える**でしょう。

HTMLエディタの多くには、記述サポートがついています。記述サポートとは、*その文字から始まるタグを表示してくれる機能*のことです。たとえば、「a」とタイプした場合、aから始まるタグが表示されます。この機能により入力にかかる手間を省くことができますし、**スペルミスも防げる**でしょう。開発スピードを上げるには欠かせない機能です。

HTMLエディタは、**タグごとに色付けをしてくれます**。タグごとの色が付いていると、ソースコード全体が見やすくなり、記述ミスを防ぐことができるでしょう。HTMLのソースコードは、*1文字でも間違っていると正しく動作することができません*。そのため、こういった表記ミスを防ぐ機能があるかどうかは重要です。

HTMLエディタの多くには、プレビュー機能が備わっています。HTMLコードの実行結果を確認する場合、通常はブラウザを開かないといけません。しかし、何回もブラウザをリロードして確認するのは大変です。*HTMLエディタのプレビュー機能を使えば、実行結果を素速く確認する*ことができます。**ショートカットキーを押すだけですぐに実行結果を確認できる**ので、開発スピードがアップするでしょう。

HTMLエディタの多くには、エラーメッセージ機能が揃わっています。エラーメッセージ機能とは、HTMLのソースコードに記述ミスがあると*「ここは間違っています」と教えてくれる機能*のことです。エラーメッセージ機能のおかげで、デバック作業効率が一気に上がります。**特に初心者はスペルミスをすることが多い**ため、欠かせない機能と言えるでしょう。

## HTMLエディタを選ぶときのポイント

最後に、*HTMLエディタを選ぶ際のポイントを紹介*します。HTMLエディタにはさまざまな種類があり、中には上級者向けのものもあります。**上級者向けのエディタは機能が多すぎて使いにくい場合も**あります。そこで、初心者でも使いやすいエディタを選ぶコツを解説します。

### ネットに情報が多く掲載されているか

HTMLエディタによってはネット上に情報が少なかったり、**英語の情報ばかりだったりすることがあります**。情報が少ないと、エディタが思うように動かない場合、調べて解決するのが難しくなるでしょう。そのため、なるべく*ネットに情報が多く掲載されているHTMLエディタを選ぶ*のがポイントです。たとえば、サクラエディタは日本人が開発したHTMLエディタのため、日本語の情報が多く掲載されています。

HTMLエディタによっては、**一部のOSにしか対応していないものもあります**。たとえば、Notepad++などは、Windowsでしか使うことができません。*公式サイトのダウンロードページを確認すれば、どのOSで使えるのかは分かります*。自分が使っているOSに対応しているか必ず確認しましょう。

### 拡張機能を使わなくても機能が充実しているか

HTMLエディタの中には、拡張機能（プラグイン）を使わないと機能がそこまで多くないものもあります。初心者は、できるだけ*拡張機能を使わなくても良いHTMLエディタ*を使いましょう。**拡張機能のインストールは初心者には少しハードルが高く**、どの拡張機能を使えば良いか調べるのも大変です。

## 自分に向いているHTMLエディタを選んで作業効率を上げよう！

本記事では、*おすすめのHTMLエディタを解説*しました。どういったHTMLエディタを選ぶと良いのか、お分かり頂けたかと思います。HTMLエディタはなるべく軽くて使いやすいものを選びましょう。**本記事を参考に、自分に向いているHTMLエディタを探してみてください**。

今回はHTMLエディタを紹介します。HTMLエディタにはさまざまな種類があり、どれを使うべきか分からない方も多いのではないでしょうか。そこで、初心者におすすめのHTMLエディタを5つ厳選しました。HTMLエディタ選びに迷っている方は、ぜひ参考にしてください。

HTMLエディタはテキストを編集するためのソフト

メモ帳と違いHTMLエディタは開発がスムーズになる機能が豊富にある

初心者は日本語の情報が多く使いやすいHTMLエディタを選ぶのがおすすめ

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

- [HTML・CSSとは何か？使い方やできること、独学方法を解説！](https://and-engineer.com/articles/YUbmNRAAACUAyIm5)

- [HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！](https://and-engineer.com/articles/YTsTCBAAACIAk0be)

まず始めに、*HTMLとは何か*について初心者の方でも分かりやすいように解説します。HTMLは何をするためのものなのか、どういった場面で使われるのかみていきましょう。

### HTMLはWebサイトを作成するための言語

*HTMLはWebサイトを作成するための言語*です。Webページ上に表示される文章・写真・リンクなどの情報は、HTMLによって作成されています。HTMLによって「この文章を表示する」「画像を挿入する」などを具体的に表現することが可能です。

また、HTMLでWebページの構造を書き表したファイルを「HTMLファイル」と呼び、**HTMLファイルをサーバにアップロードすることで、Webページをネット上に公開することが可能**です。

### HTMLはタグを使ってWebページの構造を表す

**HTMLでは「タグ」というものを使って、Webページの構造を表します**。タグとは文章や画像をどのように表示するか、コンピュータに指示を出すためのものです。たとえば、```<b>```というタグがHTMLにはあります。特定の文章にこれを使用してタグ付けすることにより、その文章を太字にして表示することができます。このように、*タグを使うことでコンピュータに表示方法の指示を出すことが可能*です。

ここでは、*HTMLでできることの一覧*をまとめました。Webアプリケーション開発において、HTMLがどのように活躍するのか解説しています。これからHTMLを勉強する方は、HTMLでできることを予め抑えておくと良いでしょう。

まずできることが、*Webページ上に記載された文章の作成*です。コンテンツの文章、ヘッダーやフッターに記載されている文章などは、全てHTMLによって作成されています。また、**Webページのタイトルやその他のメタ情報など、表には出ない文章もHTMLで作成可能**です。

HTMLを使うことで、*Webページをデザインする*ことも可能です。たとえば、Webページを2分割し、それぞれ別内容のコンテンツを表示させることができます。さらに、Webページの文章を太字にしたり、文字色を変えたりといった調整も可能です。

ただし、こういったデザイン調整は**HTMLではなくCSSが使われることもあります**。CSSは、Webページのデザイン調整を専門に担当する言語です。HTMLだけでもデザイン調整は可能ですが、CSSを使った方が調整にかかる時間を減らすことができます。そのため、HTMLを習得する場合、CSSも合わせて習得しておくと良いでしょう。多くのHTMLの書籍には、CSSの使い方も合わせて記載されていることが多いです。

HTMLはWebアプリ開発以外でも活躍します。たとえば、HTMLをメールで使用することができ、**メールの文章の色を付けたり、画像や動画をメール上に埋め込んだりする**ことができます。こういったデザイン調整を行うことで、より多くの情報を視覚的に伝えることが可能です。普段の業務でHTMLメールを使うことは少ないかもしれませんが、ユーザーにメール配信を行う場合などで活用できます。

## HTMLだけではできないこと一覧

続いて、*HTMLだけではできないこと*を解説します。HTMLだけではどうしても限界があり、JavaScriptなど他のプログラミング言語の力を借りないと難しいことも多くあります。

HTMLだけでは動的なWebページを作成することはできません。動的なWebページとは、*ページを開く度に表示内容が変更されているページ*のことです。具体的には掲示板やSNSなどが挙げられ、掲示板はページを開く度に書き込み内容が変更されています。

動的なWebページを作成する場合、Webページ上の変更されるデータを別途作らないといけません。データの作成はブラウザではなく、Webページを管理するサーバ上で行われます。サーバでプログラムが動いてデータ作成を行い、そのデータをブラウザに渡しているのです。

**サーバで動かせるプログラミング言語には、PHP・Python・Rubyなどがあります**。動的なWebページを作るなら、これらの言語の知識が必要です。

### アニメーションがあるWebページ

*Webページにスライドショーなどのアニメーションをつける*のも、HTML単体では難しいです。Webページにアニメーションをつける場合は、JavaScriptという言語を使います。そのため、Webページ制作の業務に就く場合、**HTMLだけではなくJavaScriptの知識も必要**です。JavaScriptはHTMLよりも難易度が高く、習得に時間がかかるため、HTMLの勉強に時間を取られすぎないよう注意が必要です。

### ユーザーが入力できるWebページ

お問い合わせフォームなど、*ユーザーに入力させるページもHTMLだけでは作成できません*。お問い合わせフォームは、入力された内容に問題がないかチェックする必要があります。入力内容のチェックはJavaScriptによって行われ、**HTMLだけでは入力内容のチェックはできません。**

続いて、*HTMLの代表的なタグを解説*します。HTMLのタグを活用して、Webページの見た目を整えます。HTMLはタグの使い方さえ覚えてしまえば、ほとんど使いこなせてしまいます。今回は、*初心者が最低限覚えたいHTMLタグをまとめました*。HTML初心者の方は、まずはこちらのタグをマスターしてください。

Webページに大きな文字で見出しが書かれているのを見たことがあるでしょう。*見出しはHTMLのh2タグを使うことでつけることが可能*です。たとえば、

と記述することで「タイトル」という見出しを作ることができます。また、**見出しの中に小さい見出しを作りたい場合はh3タグ**を使います。さらに小さい見出しを作りたいなら、h4、h5、h6タグも用意されています。

HTMLには文字のレイアウトを変更できるタグが多くあります。たとえば、*bタグを使うことで太字にすることが可能*です。また**iタグを使えば文字を斜体にできたり、uタグを使えば文字に下線を引いたり**できます。これらのタグはWebページ制作だけでなく、HTMLメールを作成する場合にも使えるでしょう。具体的には次のように書きます。

~~~ 
<b>太字</b>
<i>斜体</i>
<u>下線</u>
~~~ 


Webページ上に箇条書きを用意するためのタグもあります。*箇条書きを作る場合は、ulタグを使います*。ulタグは先頭に記号を付ける箇条書きを作成できます。さらに、olタグを使うことで、先頭に数字がつく箇条書きも可能です。また、**それぞれの箇条書きはliタグで囲う**必要があります。具体的には次のように書きます。
~~~ 
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>
~~~ 


Webページ上にリンクをつけて、*他のWebページに飛ばしたい場合はaタグを使います*。具体的には、次のように書く必要があります。

~~~ 
<a href="https://www.google.com/">Google</a>
~~~ 

こうすることで、Googleのページに飛ばす**リンクを作成できます。**

最後に、*HTMLを学習する方法をまとめました*。HTMLの習得は容易ではあるものの、タグの数が多く、覚えるのに時間を要します。また、Webアプリ開発を行う場合、HTMLだけでなくCSSやJavaScriptもマスターしないといけません。そのため、*なるべく効率的な方法でHTMLを素速く習得しましょう。*今回は、時間がない方でもHTMLを習得できる方法を解説します。

書籍を購入するのは、一般的な学習方法と言えます。*HTMLの書籍はWeb制作初心者向けのものが多く*、Webサイトの仕組みから丁寧に解説しているものが多いです。こういった書籍を1冊マスターすることで、Webサイト制作者としての基礎知識を身につけられます。

おすすめは**「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」**です。本書は、HTMLやCSSの基礎を体系的に学べる本です。また、レスポンシブ対応やFlexbox・CSSグリッドのレイアウトなど、最近流行中の技術についても解説されており、中級者以上にもおすすめできます。

[1冊ですべて身につくHTML & CSSとWebデザイン入門講座](https://www.sbcr.jp/product/4797398892/)

2つ目の方法は、学習サイトを活用することです。*Progateやドットインストールなどのサイトなら、HTMLを手軽に学ぶことが可能*です。学習サイトは、月額1,000円程度で利用できるため、**プログラミングスクールに入会するよりもリーズナブル**でしょう。Progateやドットインストールは教材が分かりやすいのに加え、練習問題が多く掲載されているためおすすめです。

## HTMLでWebページの作成が可能！動的なページを作るなら他の言語も習得しよう

本記事では、*HTMLでできることについてまとめました*。HTMLを使うことで何ができるのか、お分かり頂けたかと思います。HTMLを使うことで、静的なWebページを作成することが可能です。ただし、入力フォームを作ったりアニメーションを作ったりするなどの動的なWebページは、HTMLだけでは作成することができません。

**Webアプリケーション開発に携わりたい場合、HTMLの知識だけでは不十分**なため、CSSやJavaScriptのスキルも抑えておくと良いでしょう。HTMLの勉強はなるべく時間をかけず、効率的に行いましょう。本記事がHTMLをこれから学ぶ方にとって、有意義なものとなれば幸いです。

今回はHTMLでできることについて解説します。HTMLはWebアプリ開発で使われる言語の1つですが、具体的にWebアプリのどの部分の開発ができるか、ご存知ない方は多いでしょう。本記事ではHTMLでできること・できないことをまとめました。

HTMLはWebページの文章の作成やデザイン調整ができる

HTMLだけでは動的なWebページの作成はできない

HTMLでできることは少ない？できないことやタグも一覧でまとめた

HTMLのdivタグとは？読み方・目的・使い方などを解説！ 

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！ 

この記事ではHTMLの勉強法について解説しますが、その前にHTMLを学ぶ必要性や目的について確認しておきましょう。学ぶには明確な目的が必要です。「何となく」「後学のために」といった軽い気持ちで学んでも身に付きません。
学ぶ以上は、「*HTMLを学んで何をしたいのか*」「*自らの人生設計にどう役立てるのか*」を明らかにすることが先決です。

### エンジニアにHTMLの知識が必要な理由

*Webサイトは基本的にHTMLで作られています*。「ブログを作ったことはあるけれど、HTMLは使わなかった」という方は多いです。最近はCMSと呼ばれる、テキスト入力やWord操作の感覚でWebサイトの作成や更新ができるツールが増えました。
誰もが知っているWordPressではHTMLの知識が皆無でもWebページを作れますが、WordPressのアウトプットはHTMLです。つまり、Webページを作るだけなら、HTMLの知識は無くとも困ることはありませんが、次の理由から*ITエンジニアにとってHTMLは必要不可欠の知識*と分かります。

**1.Webページの最終調整にはHTMLスキルが求められる**

WordPressの操作で、シンプルなWebページは作れますが、特徴的なWebページを作るのに限界があります。仮にWordPressで作成できても、最終的な*Webページの微調整・動き・色合い整など、デリケートな調整はHTMLで直接記述することがあります*。

**2.HTMLの知識があると具体的な指示を出せる**

システムエンジニアがWebプログラマーやWebデザイナーに開発の指示・修正・微調整の指示を出す際に、*HTMLを知っているか否かによって、指示の具体性が大きく変わります*。

**3.フルスタックエンジニアへの近道**

複数の領域のスキルを持ち、オールラウンドに活躍できるエンジニアをフルスタックエンジニアと称しますが、*HTMLのスキルを持ったエンジニアは、フルスタックエンジニアを目指せる可能性*があります。
例えば、*フロントエンド開発の領域ではHTML・CSS・JavaScriptの3つを習得していれば、ほぼ独力でフロントエンド開発を担えます*。
さらにPHPやPythonなどの言語スキルを身に付け、*フロントエンド開発に加えてバックエンド開発を担えると、フルスタックエンジニアとして活躍の機会*が広がるでしょう。

HTMLは"Hyper Text Markup Language"の略語です。Languageは言語と訳されることが多いため、プログラム言語の一種と思いがちですが、プログラム言語ではありません。

HTMLのLanguageは言語の意味ではなく、文法やルールの意味合いです。*HTMLはプログラミング言語ではなく、マークアップ言語なのです*。

私たちが日常利用しているWebページは、視覚的に分かりやすくタイトル・文字・画像などが配置されています。一方、コンピューター側からWebページを見てみると、単なるコードの羅列です。
実は**HTMLがコンピューターと人間を取り持ち、翻訳者の役割を果たしています。**
HTMLがコンピューターに対して、Webページに表示する文字・画像のサイズ・配置を教え、その指示を受けたコンピューターが人間の視覚に訴えるページを作成します。
次に、HTMLのHyper Text （ハイパーテキスト）について確認しておきましょう。

### ハイパーテキスト（HyperText）とは

「HyperText」のHyperは直訳すると「超」です。「HyperText」はテキストを超越するテキストという意味になります。では、何が「超」なのでしょうか？

Webページには「ハイパーリンク」というものが頻繁に登場します。このハイパーリンクには、元の語句から直接、関連文章や説明文書を呼び出す機能があります。
このように*語句や文章を「関連づける」ことをハイパーリンク*と呼び、**ハイパーリンク機能を持っている文書を「ハイパーテキスト」と呼んでいます**。この「ハイパーテキスト」から成り立っているのがHTMLの特徴の1つです。

HTMLがハイパーテキストで構成されていることは理解できました。ではマークアップ"Markup"とは何を意味するのでしょうか？

「タグ（Tag）」と呼ばれる記号によって文章を囲い、**「マークアップ（Markup）」は文章に「目印をつけて」意味を持たせること**です。

*「タグ」（Tag）とはWebページ上での表示のさせ方を指定する「命令文」*であり、テキストをその意味ごとに"&lt;&gt;"で囲みます。

この**タグをコンピューターが読み取り、人に分かりやすい表示に変えてくれる**という仕組みです。

たとえば、見出しであれば階層の上から&lt;h1&gt;~&lt;h6&gt;を用います。大見出しの場合は&lt;h1&gt;大見出しの文言&lt;/h1&gt;と記述します。

本文であれば、段落を表す&lt;p&gt;本文&lt;/p&gt;を用います。

他、*画像は&lt;img&gt;タグを用います。&lt;img src="画像ファイル名"/&gt;の様に記述*します。

Webページの作成において、HTMLと切ってもきれない関係にあるのがCSSで、CSSは"Cascading Style Sheets"の略語です。
CSSは化粧に近いものと考えてください。**HTMLだけで作られたWebページに見栄えよく化粧を施したり、動きを付ける役目**を持ちます。HTMLを学習する際には、ぜひCSSも学びましょう。

HTMLが主にWebページの作成に使われていることは理解できましたが、実はHTMLはWebページ以外にも活用されています。ここでは、*HTMLが利用されている主な3つの領域*について紹介していきます。

世界中のWebサイトのほとんどがHTMLによって開発されています。それを確認する方法があります。

HTMLで記述されているソースコードを確認するには、*Windowsパソコンなら「Ctrl+U」、Macの場合は「⌘+Option+U」を同時に押すことでソースコードが現れます。*

**Webサイトの裏側はすべてHTMLで記述されている**のです。

普段利用している*EメールでもHTMLが使われているケースが増えています*。特に多いのは、広告メールです。メールを開くと、あたかもWebページのように画像やアニメーションが見られるメールを受け取ったことがあるでしょう。
ビジネスメールではテキストメールが主流ですが、**メルマガや登録サイトのお知らせメールなども「HTMLメール」が大半**です。

HTMLはOSに制限されない点が強みです。iOSやAndroidOSに関わらず、HTMLは共通の言語です。スマホアプリの開発では、iOSはObjective-CやSwiftなどを利用し、Androidは主にJavaを使います。iOSとAndroidの双方に対応できるスマホアプリを開発する場合は、基本的に二重開発を余儀なくされます。

しかし、**JavaScriptと、HTML（HTML5）を使うことで、iOSとAndoroid兼用のスマホアプリの開発が可能**です。
このようなアプリを*ハイブリッドアプリと言い、開発コストの低減が図れる*ことから注目を浴びましたが、動作面やパフォーマンス面の弱点があり、必ずしもスタンダードにはなっていません。

ここまででHTMLの概略は理解できたでしょうか。ここからは*HTMLの勉強法について紹介*していきます。何から勉強を始めるのか迷うところですね。

スクールに通う、オンラインスクールを受講するといった方法も選択肢としてはありますが、本格的にスクールに通う場合は、数十万円の受講料が必要です。オンラインスクールも有料のスクールは数万円程度かかります。
しかしHTMLやCSSは、さほど難易度は高くないため、独学が可能です。以上の理由から、ここでは独学をおすすめします。

### 難易度や習得に必要な勉強時間

*ITスキルのある方*（ITの基礎知識がある人、プログラミング言語を1つ程度習得している人）であれば、**1日1時間の学習で、半月から1カ月もあれば独力でブログサイトが作れる程度のレベルには達する**ことができるでしょう。

HTML・CSSの作成で、特別なものを用意する必要はありません。普段使っている*パソコン・Webブラウザ・テキストエディタ（ex.メモ帳）*があれば、すぐにでも作業は始められます。

テキストエディタがあればHTMLのコーディングは可能ですが、できれば**HTMLエディタを利用した方が、コーディングがはかどります**。
コードの記述ミスをチェックしてくれたり、タグの種類ごとに色分けしてくれたり、作業をサポートしてくれるため、フロントエンドエンジニアは必ずといっていいほど、それぞれが気に入ったHTMLエディタを活用しています。初めての方におすすめしたいHTMLエディタは以下の3つです。

*1.[Atom](https://atom.io/)*
定番ともいうべきHTMLエディタです。ベースは英語ですが、日本語化プラグインもあり、初心者から熟練者まで幅広く使えます。

*2.[サクラエディタ](https://sakura-editor.github.io/)*
日本人が開発したエディタです。日本語の解説サイトもあり、使い方に困った際には大きな力になります。

*3.[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)*
マイクロソフト社提供の無料のエディタです。さまざまなプログラム開発で重宝します。

ここでは、おすすめの独学法として2つ紹介します。もちろんすべてを選んでも構いませんし、1つに集中しても構いません。どちらも、*「一方的に講義を聞く」「ただ単にテキストを読む」という方法ではなく、手を動かして覚える実践的な方法*です。
いずれの学習法でも終了する頃には、独力で簡単なWebページを作れるだけのスキルが身についているはずです。

### 無料でプログラミング学習サービスを利用する

プログラミング学習サービスの1つに*[Progate](https://prog-8.com/)*というサービスがあります。この中に*[「HTML & CSS 初級編」](https://prog-8.com/lessons/html/study/1)*という学習コースがあり、**会員登録をすると誰でも無料で受講**ができます。中級以上でも月額1,078円で受講できるため、書籍代よりも安上がりかもしれません。Progateは初心者に優しいサービスが作られているので、飽きずに続けられるのがおすすめポイントです。

### 入門者向けのテキストで学ぶ

*[1冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座（ ＳＢクリエイティブ）](https://honto.jp/netstore/pd-book_29559725.html)*

その名の通り、**この1冊でHTMLとCSS、さらにはWebデザインまで学べます**。テキストに従って、*実際に1つのサイトを作るので、実践を交えながら基礎を学ぶため、習熟は早い*でしょう。
テキストに従って最後まで進めていくと、お洒落なサイトが出来上がりますので、学習の達成感が倍増します。ちなみに著者はMana（マナ）という方で、「マナブログ」で有名な人気ブロガーの坂内学さんではないかと考える人がいますが、別人のようです。

スマホでスキマ時間にHTMLを学べるようなアプリがあると便利です。一時期、*「Trico-Hello world without PC」というHTML学習アプリがiPhoneアプリとして存在していましたが、残念ながら現在は提供されていません*。

HTML/CSSはどこまで勉強すればよいのか、誰もが不安に感じる点でしょう。とりあえず簡単なブログサイトを作れればそれで良いという方は、ひと月も学習すれば十分です。一方、**フロントエンドエンジニアを志す方は次の認定資格の取得**を目指しましょう。

*[HTML5プロフェッショナル認定試験](https://html5exam.jp/)*

エルピーアイジャパン（LPI-Japan）という特定非営利活動法人の認定資格で、*HTML5以外にCSSやJavaScriptなどに関する技術や知識も必要な試験*です。
レベルは1と2があり、*エンジニアレベルのスキルが求められます*。合格率は不明ですが、合格には70%の正当率が求められるため、決して易しくはありません。

以上、HTMLの勉強法について解説してきました。ここまで読まれたエンジニアの皆さんは、HTMLを習得し、もうワンランク上のエンジニアを目指してみてください。

Web全盛の時代を迎え、Webの基本であるHTMLはITエンジニアにとって必須知識・スキルといっても過言ではありません。ではHTMLはどう学べばよいのでしょう。ここではHTMLの習得を目指すエンジニアの方に向けて、HTMLの基本から勉強法まで解説していきます。

世界中のWebがHTMLによって作られていることから、ITエンジニアにとってHTMLは必須知識となっている。

HTMLはOSに左右されにくいWebアプリの開発にも利用されており、CSSとセットで学ぶことが望ましい。

HTMLは比較的易しい言語であり、教材も多く揃っていることから費用をかけず独学でも学べる。

HTMLは独学で学べる？勉強法や初級エンジニアに必要な習得時間

HTMLとは「Hyper Text Markup Language」の略称であり、Webサイトの構造を定義するためのマークアップ言語です。HTMLではタグを使用してWebサイトの構造を作成することができます。その中でもdivタグはよく使用されるタグの1つです。ここでは、divタグの概要や書き方について詳しく紹介します。

divとは「division」の略称であり、読み方は一般的に「ディブ」もしくは「ディヴ」です。**divタグ単体では意味を持ちませんが、divで囲む部分をブロック要素としてまとめて扱えるのが特徴です。**align属性を使用して水平方向の配置を指定したり、スタイルシートを適用したりなどブロック化すればまとめて行うことができます。

**divタグを使用するときは一般的に```<div>テキスト</div>```と記載します。
**またdivタグにid属性やclass属性を追加し、```<div id="id名">テキスト</div>``` ```<div class="class名">テキスト</div>```と記載することも多いです。*id属性やclasの属性を付ければ、スタイルシートで装飾しやすくなるという特徴があります。*

なおidとclassの違いについてですが、*id属性は同じWebページ内でid名が重複してはいけないという決まりがあります。*一方*class属性は、同じWebページ内でclass名が重複しても問題ありません。*そのため同じ装飾を指定したいときに、class属性は使用されます。また1度しか使用しない場合でもclass属性を用いることは可能です。

divタグと同様でspanタグも単体では意味を持ちません。**divタグとspanタグの違いは、ブロックレベル要素かインライン要素かです。**divタグはブロックレベル要素の1つで、spanタグはインライン要素の1つです。
ここではdivタグの知識を深めるためにも、ブロックレベル要素とインライン要素の違いについて詳しく紹介します。また配置のルールについても解説します。

**ブロックレベル要素はテキストを構成する基本となる要素であり、1つのまとまりとして認識されるのが特徴です。ブロックレベル要素では余白や縦横のサイズなどを自由に定義できます。**しかし、ブロックレベル要素の前後には自動で改行が入ることもあるため注意が必要です。ブロックレベル要素の例として、pタグ・h1～h6タグ・tableタグ・divタグなどが挙げられます。

**インライン要素は、主にブロックレベル要素の中で使用される要素であり、文章の一部として扱われるのが特徴です。**そのためインライン要素の前後には改行は入りません。例えば、pタグの中でstrongタグを使用すれば、段落の中の一部を強調することができます。 インライン要素の例としてaタグ・bタグ・iタグ・imgタグ・strongタグ・uタグ・spanタグなどが挙げられます。

**ブロックレベル要素の中に、他のブロックレベル要素やインライン要素を配置することは可能です。 しかし、インライン要素の中にブロックレベル要素を配置することはできません。**ただし*インライン要素の中に、文字データや他のインライン要素を配置することはできます。*インライン要素は行の一部として扱われます。そのためspanタグのようなインライン要素では、一般的に「width」「height」というプロパティを使用してサイズの調整ができません。

ただし例外もあるため、spanタグを使用するときには、公式リファレンスなどを参照して確認しましょう。

## divタグを使用する目的・使い方

divタグはブロックレベル要素で、余白の調整やサイズの変更が自由にできることは理解できたでしょうか。ここでは、divタグを使用する目的・使い方について詳しく紹介します。

HTMLの記事（5ページ目）