HTMLやCSSは、Webページを作成する際に、デザインやスタイルを指定するために使用する言語です。
近年はWebマーケターの業務領域が広がり、エンジニアでなくても、Webページのちょっとしたデザイン修正や内容の変更に対応することが求められています。その際に、HTMLやCSSの基本的な使い方を覚えておけば、プログラミングの知識がなくても対応が可能です。
本記事では、「これからHTMLやCSSを学びたいけれど、どのように勉強すれば良いか分からない」という方に向けて、独学で基礎からHTMLやCSSを学べる、本・アプリ・動画・学習サイトなど、入門編としておすすめの勉強法をご紹介します。
勉強する際に押さえておくべきポイントも掲載していますので、ぜひ参考にしてください。
HTMLやCSSを勉強するには、独学もしくはスクールに通う方法の2パターンがあります。短期間で身に付けたいならスクールに通った方がおすすめですが、特に期間の制限がないのであれば独学でも十分習得できます。
プログラミングを身に付けるために必要な勉強時間は、オリジナルのWebサイトを制作できるレベルに到達するには200時間程度、エンジニアとして仕事ができるレベルに到達するには500時間程度と言われています。そのうち、HTMLとCSSの基本を理解するために必要な勉強時間は、20～30時間が目安です。
まずは、「どのくらいの期間で習得したいか」「週何時間程度、勉強できるか」を思い浮かべてみましょう。
HTMLやCSSは他の言語に比べて比較的理解しやすいため、時間に余裕があるなら独学から始めてみるのがおすすめです。
独学でHTMLとCSSの基礎を勉強する方法は、次の4つです。
ここからは、それぞれの具体的な方法について解説していきます。
基礎からしっかり理解するには、本を使った勉強法がおすすめです。インターネットがない環境でも勉強でき、通勤時間や移動中の隙間時間も活用できます。
本章では、HTML＆CSSの勉強におすすめの本を2冊ご紹介します。
簡単なWebサイト作りを通して、HTMLとCSSの基礎が勉強できる入門書の決定版です。第1版は累計4万部を突破しており、第2版では、現在のトレンドを反映したスマートフォンやタブレット対応を、より分かりやすく学べる内容になっています。
イラストや写真を使って、「HTMLやCSSとは？」「Webサイト制作に必要な準備」といった初歩的なことから説明されているため、初心者でも理解しやすいでしょう。
実際にカフェサイトを作りながら、HTMLとCSSの基本文法や役割、使い分けなどについて、段階を踏みながら学べる本です。完成を目指すサイトのデザインがおしゃれなので、楽しみながら勉強できます。
この本1冊で、Webサイトの公開までできるようになっているので、自分のオリジナルサイトを作ってみたい方におすすめです。
場所を選ばず気軽に勉強できるのが、アプリを使った勉強法のメリットです。無料で始められるアプリもあるので、まずは気軽に体験してみると良いでしょう。
ここでは、HTMLとCSSの勉強におすすめのアプリを2つご紹介します。
Progate（プロゲート）は、ゲーム感覚で楽しみながらプログラミングを学習できるアプリです。パズルのようにコードを当てはめていく勉強法なので、HTML＆CSSの構造や概念をおおまかに学ぶのに向いています。
Webサイトの環境設定や細かい説明はないため、体験学習や復習に利用するのがおすすめです。アプリの他に、Web版のProgateもあります。
ShareWis（シェアウィズ）は、Googleの専門家との共同開発によって生まれた、社会人向け学習アプリです。プログラミング（HTML・CSS・Javascript・Java）の他、外国語やデザインスキルも取り扱っています。
90秒の無料動画を見ながらHTMLとCSSの基礎を学んだあとは、定額制のプロコースでスキルを高めましょう。
授業のように説明を受けながら勉強したい方には、動画学習がおすすめです。動画では、実際の画面操作が視覚的に分かるだけでなく、コードを書くスピード感も学べます。
また、HTMLやCSSでバージョンアップがあった場合、本の場合は新刊を購入する必要がありますが、動画はアップデートしやすく、容易に最新情報をキャッチできるというメリットもあります。
HTMLとCSSの勉強におすすめの動画サイトを2つご紹介します。
ドットインストールは、3分前後の短い動画でHTMLやCSSを学べる動画サイトです。画面を見ながら音声で解説が流れるため、実際にコードを書く練習がしやすいのが特徴です。
アプリと同様に、環境設定や細かい解説はないため、分からない所は一時停止して本やWebで調べながら勉強すると良いでしょう。
Schoo（スクー）は、Web業界のプロが、HTMLを入門から分かりやすく解説している動画サイトです。無料会員でも生配信授業に参加でき、有料のプレミアム会員は録画授業が7,000本以上見放題になります。
講師へ質問したり、他の生徒と一緒に学ぶことも可能なので、勉強のモチベーション維持にも役立つでしょう。動画をダウンロードしておけば、オフラインでも利用可能です（ダウンロードはプレミアム会員のみ）。
HTMLやCSSを独学する際に頼りになるのが、無料の学習サイトです。豊富なサンプルコードを配布しているサイトと、カリキュラムを進めていくスタイルのサイトの2つをご紹介します。
とほほのWWW入門は、1,000種類以上のHTML＆CSSのサンプルコードが検索できる学習サイトです。独学で分からないワードがあった場合や、コードの使用例が知りたい場合などに参考にすると良いでしょう。
Web版 Progate（プロゲート）は、アカウントを登録するだけで、無料でプログラミングの基礎を学べる学習サイトです。難易度でレベル分けされており、有料会員はプログラミングの応用を学習できます。「HTML＆CSS初級編」は無料プランでも利用でき、4時間弱で勉強できます。
自分で書いたコードが、その場でプレビュー表示される機能や、一つのカリキュラム達成ごとにレベルアップする仕組みにより、ゲーム感覚で学習を進められます。
ここまで、本やアプリでHTMLとCSSを勉強する方法をご紹介しました。冒頭でお伝えしたとおり、初心者が効率よくプログラミングを習得するには、いくつか押さえておくべきポイントがあります。
本章では、勉強する前に知っておきたい3つのポイントをご紹介します。
プログラミング学習は、目標やゴールによって必要な学習時間が異なります。例えば、次のような目標が考えられるでしょう。
Webエンジニアとして転職、または副業やフリーランスで案件を獲得するための勉強時間目安は、300～500時間以上必要と言われています。平日・土日も毎日3時間勉強したとして、3か月以上の期間が必要です。
プロのエンジニアになるためには、基礎力だけでなく、現場や実践で役立つ知識や経験も求められます。そのため、じっくり独学で勉強するよりも、有料のプログラミングスクールなどで講師のサポートを受けながら勉強した方が、効率が良いと言えるでしょう。
一方、趣味や仕事で簡単なHTMLとCSSの知識があれば良いということならば、無料のアプリや動画サイトなどで十分でしょう。このように、目標やゴールから逆算して学習計画を立てることで、無駄なく勉強できるようになります。
自分に合った勉強法は、人それぞれ異なります。1人で黙々と取り組んだ方が習得しやすい方もいれば、オンラインやオフラインスクールで、他の人と励まし合いながら学ぶスタイルが合っている方もいるはずです。
アプリや動画学習の無料体験などを活用し、まずは気になったものを試してみながら、自分に合った勉強法を見つけていきましょう。
また、プログラミング学習で挫折する理由として、質問できる人がいないことや、エラーが起きた時に自分だけで対処できないことがあげられます。今の勉強法が自分に合っていないと感じたら、スクールの利用や有料コンテンツの購入をすることも検討してみてください。
無料アプリや学習サイトなどを使った勉強法で陥りやすいのが、その勉強自体が目的になってしまい、基礎知識だけで満足してしまうことです。
HTMLやCSSの基礎を勉強したあとは、自分のオリジナルサイトなどを制作することで、実践的なスキルとして身に付きやすくなります。実際の案件に挑戦してみるのも、一つの方法です。
特にエンジニアを目指す方であれば、転職活動や営業をする際に実績が求められるため、早めに実務を体験しておくことをおすすめします。
ここまで、HTMLとCSSの勉強法について、おすすめの本・アプリ・動画・学習サイトを紹介してきました。HTMLとCSSは、初心者でも比較的理解しやすい言語なので、独学でも十分に修得が可能です。
効率よく学習を進めるためには、目標に合った勉強法を見極め、自分に合った方法を選択することが大切です。
プログラミングを直接仕事に使わない方でも、HTMLとCSSの基礎知識があれば、エンジニアやWebデザイナーと話す際に円滑に業務が進められるなど、メリットは多いはずです。この記事が、HTMLとCSSの勉強法を見つけるヒントになれば幸いです。