本記事では、HTMLを攻略するために、お勧めの学習サービスと学習のための開発環境を解説しています。HTMLはPCとインターネットがあれば学習を進めることが出来ます。また、学習した内容を自分の手でコーディングして動作確認する環境は、フリーのソフトだけで用意することが出来ます。それではHTMLの概要から解説していきます。
HTMLとは
HTMLは「HyperText Markup Language」の略です。HTML文書は、Webサイトの構造を「要素」と呼ばれるものの組み合わせによって定義していきます。要素というのは、例えば「ヘッダ」「見出し」「画像」「段落」等で、「<>」で囲まれた「タグ」と呼ばれるものでそれぞれの要素を意味づけします。これにより、ブラウザに対してHTML文書内のそれぞれのパーツの意味を伝えることが出来ます。
HTMLと一緒に使われる言語には、HTMLの要素を装飾する「CSS」や、HTMLだけでは表せない動的な表現を記述する「JavaScript」という言語があります。HTMLだけでの記述ではどうしても表現が乏しくなりますので、HTMLの基本を理解した後で、必要に応じてこれらの言語も習得していくようにしましょう。
HTMLを学習できるサービス3選
HTMLを学習できるサイトには、動画での講座や実際にコードを記述しながら実践的なレッスンを受けることの出来るサービスなどがあります。コードを動かすための環境がクラウド上に用意されているサービスもあり、気軽に学習を始めることが出来ます。どのサイトも無料で受講できる講座があり、有料会員になる事で全講座を受講することが出来るようになります。本記事では、おすすめの3選のサービスを紹介します。
ドットインストール
ドットインストール
プログラミングのレッスン動画を配信している学習サイトです。動画は1つ3分前後で構成されているため、空いた時間に少しずつ or まとめて見るのどちらでも、自分のスタイルに合わせて学習を進めることが出来ます。
HTMLの動画については、全て無料で閲覧できる講座が豊富に用意されています。「HTML/CSSの学習環境を整えよう」にはWindowsとMacOS編があり、Atom＋Google Chromeでの環境構築について触れています。「HTML入門」講座では、先ほどの学習環境を前提にWebサイトを作るチュートリアルで、一つの講座を通してプロフィールサイトを作ります。「HTML基礎文法入門」HTMLの最新バージョンのHTML5が前提で、タグやタグごとの属性、使い方をひとつひとつ解説する内容になっています。これらの講座は全て無料で視聴することが出来ますが、有料版でも月額980円で他の言語(CSSやJavaScript等)も含む全ての講座を視聴することができます。まずは無料分を受けてみた後で、継続を検討すると良いでしょう。
Progate
Progate
スライドで解説を見た後にクイズ形式の演習といった繰り返しで学習を進めていくサイトです。言語ごとに初級・中級・上級編のように分かれています。演習では、解説の記述と実際にコーディングを行うエディタ、動作確認のブラウザ相当の環境が1つの画面で見られるような画面構成となっており、使いやすい学習環境が用意されています。学習を進めていくと、言語ごとに経験値がもらえてレベルが上がっていくため、ゲーム感覚で楽しく学習を進めることが出来ます。
無料会員では、HTML初級編を含む17つの講座を学習できます。月額980円の有料会員になることで全67レッスンをすべてを学習できるようになります。
CODEPREP
CODEPREP
プログラムを実際に記述して動作確認しながら学習を進めていくサイトです。1冊は10分という少な目のボリュームなので、隙間時間に学習を進めていくことが出来ます。Progateと同様、ブラウザがあればコーディングと動作確認が出来る環境が用意されていますので、端末に環境を用意せずに学習を始めることが出来ます。ブック内にはディスカッションボードが用意されており、他のユーザー同士での「教えあい」の機能があるのも特徴です。
無料会員では、「はじめてのHTML」のブックでのレッスンが出来ますが、月額980円で他の言語を含む100冊以上のブックを利用することが可能です。
HTML学習に必要な開発環境
HTMLの学習には下記が必要です。
・テキストエディタもしくは統合開発環境(IDE)：コーディングをおこなう
・ブラウザ：動作を確認する
最低限の開発環境の構成として、コーディングをテキストエディタ、動作確認をブラウザで行うことが可能です。ただしエディタに関しては、プログラミングに特化した機能を一つのソフトウェアにまとめた「統合開発環境(IDE)」を使う事で、開発の効率がアップし、よりスピーディーに開発を進めることが出来るようになります。例えばコメントや属性等、キーワードの種類ごとに文字の色が変わる「コードハイライト」や、コードの数文字を入力するだけで単語の候補の一覧が表示される「コードの入力補完」、文法エラーがあった場合にエラー内容を表示する「エラー表示」等の機能です。
コーディングの経験が無い方の場合は、まずはコーディングに慣れることが大切です。そのため、感覚的に操作できて少ない設定で使い始められるIDEや、htmlに特化したコーディング用の機能が備わっている多機能なテキストエディタにより、初期設定や操作の習得に時間をかけることなく学習を始められるツール選びが出来ると良いでしょう。
以降では、初心者の段階でお勧めの無料で使える統合開発環境や多機能テキストエディタのご紹介をします。
Brackets
Brackets
Adobe Systemsが開発している、Web開発に特化したオープンソースのエディタです。初期設定をせず最初から使える機能が豊富なことが特徴です。コーディング中のHTMLをブラウザでリアルタイムに動作確認する「ライブプレビュー機能」やコードの補完機能等、開発を楽にする機能がはじめから使えるようになっています。拡張機能も豊富で、便利な機能を追加して使うことも可能です。最初に入れておきたい拡張機能としては、「Beautify(コードの自動整形)」「Emmet(HTML入力支援)」等がありますので、コーディングに慣れてきたらカスタマイズして使いましょう。こちらも軽量で最初から高機能といったところが人気のエディタです。Adobe社製のため、Adobe Creative Cloudとの連携等、Adobeの他のソフトとの親和性が高い点も評価されています。
Atom
Atom
GitHub社が開発している、HTMLエディタです。パッケージと呼ばれる拡張機能をインストールする事で自分の好みの機能をエディタに追加することが出来ます。初めから基本的な機能はあるので、最初は「Emmet(HTML入力支援)」「japanese-menu(メニューの日本語化)」「tag(終了タグの補完)」あたりの必要最低限のパッケージをインストールしておき、慣れてきたら好みのパッケージを追加していきましょう。軽量で人気のエディタです。
Visual Studio Code
Visual Studio Code
Microsoftが開発している、あらゆる言語で使える有名なフリーのIDEです。基本的な機能でHTMLのコード補完や終了タグの自動追加、コードの整形、カラーピッカー等の開発支援機能を使うことが出来ます。拡張機能も豊富で、「HTMLHint(構文チェック)」「Live HTML Previewer(リアルタイムプレビュー)」等は最初の段階で入れておきたい拡張機能です。
まとめ
HTMLの学習は、Webアプリケーション開発の第一歩です。HTMLの学習は、難易度も高くはなく、ほとんどの場合独学で十分な場合が多いでしょう。今回紹介したようにWeb上にも気軽に学習を進めることのできるサービスは豊富にあるので、それらをうまく利用しながらステップアップしていってください。
