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

HTML関連記事

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

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

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

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

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

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

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

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

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

本文であれば、段落を表す<p>本文</p>を用います。

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

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

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の勉強法について紹介していきます。何から勉強を始めるのか迷うところですね。

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

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

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

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

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

2.サクラエディタ 日本人が開発したエディタです。日本語の解説サイトもあり、使い方に困った際には大きな力になります。

3.Visual Studio Code マイクロソフト社提供の無料のエディタです。さまざまなプログラム開発で重宝します。

HTMLの独学方法おすすめ2選

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

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

1冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座（ ＳＢクリエイティブ）

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

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

独学の成果は認定資格で

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

HTML5プロフェッショナル認定試験

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

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