このような悩みに答えていきます。
HTMLとCSSは、効率よく学習すれば習得にそれほど時間はかかりません。
ですが、間違った方法で学習してしまうと、時間とお金が無駄になってしまうこともあります。
この記事では、HTMLとCSSを最速でマスターする方法を紹介しています。
全部で4ステップに分けて紹介しているので順番に取り組んでみてください。
プログラミング学習の第一歩として、正しい勉強法で学習を始めましょう！
目次
HTML、CSSとは
HTMLは「Hyper Text Markup Language」の略で、WEBページを作成するために使う言語です。
インターネット上のほとんどのサイトはHTMLを用いて作成されています。
HTMLは厳密にはプログラミング言語ではなく、マークアップ言語と呼ばれます。
CSSは、「Cascading Style Sheet」の略で、WEBページの見た目を整えるための言語です。
文字の色やサイズなどを指定することができます。
HTML、CSSを最速で習得するための学習方法4ステップ
ここからは、HTMLとCSSの実際の学習方法について4ステップで解説します。
✔️ HTMLとCSSの学習方法
- Progate（プロゲート）の「HTML&CSSコース」を学習する
- ドットインストールの「HTML/CSSコース」を学習する
- 本を見ながらWEBサイトを作ってみる
- 模写コーディングする
それぞれ解説していきます。
1.Progate（プロゲート）の「HTML&CSSコース」を学習する
まずは、Progateという学習サイトを使いましょう。
Progateはゲーム感覚でプログラミング学習を進めることができるため、学習の第一歩目に最適です。
プロゲートコースは、「HTML&CSSコース」の初級編と中級編で十分です。
時間に余裕がある方や、もっと詳しく学びたい方は上級編にもチャレンジしましょう。
中級編以降を学習するには有料会員になる必要がありますが、月額たったの1,078円です。
プロゲートの料金と内容については以下の記事で解説しています。
>>Progate(プロゲート)は無料でどこまで学べるの？有料との違いを解説する
Progateでの学習は7割程度理解できれば十分です
あまり時間をかけすぎないように注意しましょう
2.ドットインストールの「HTML/CSSコース」を学習する
Peogateで基礎を学んだら、次はドットインストールで学習しましょう。
ドットインストールは動画を見ながらプログラミング学習ができるサービスです。
そのため、コードを書く流れが理解しやすくなっています。
学習の流れは以下の通りです
- HTML/CSSの学習環境を整えよう（[windows版] or [macOS版]）
- はじめてのHTML
- はじめてのCSS
- 詳解HTML 基礎文法編
- 詳解HTML フォーム部品編
- 詳解CSS 基礎文法編
- 詳解CSS セレクター編
ドットインストールのHTML/CSSのレッスンは全部で13コースありますが、基本は上記の7つで十分です。
4番以降は月額1,080円のプレミア会員になる必要があります。
ただ、１ヶ月以内に網羅できる量なので実質1,080円の支払いだけで終わります。
必須ではありませんが以下のレッスンもおすすめです。コードを書くスピードが格段に上がるのでできればやっておきましょう。
- Visual Studio Code入門
- Emmet入門
ドットインストールの学習では、必ず動画と同じ流れで実際にコードを書きましょう。「ただ動画を見るだけ」では学習効率がかなり下がってしまいます。
3、本を見ながらWEBサイトを作ってみる
WEBサービスだけでなく、本も並行して活用することで、学習効率が格段に上がります。
ここでは、HTMLとCSSを学ぶ上で役に立った本を2冊紹介します。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
この本では、HTMLとCSSはもちろん、デザインについても学習できます。
学習中の辞書としても使うことができます。
この一冊は持っておくことをおすすめします。
スラスラわかるHTML&CSSのきほん 第2版
実際に手を動かしながらWEBページを作成できます。
カフェのサイトのお問い合わせページや商品の紹介ページなど、実際のサイトを想定しながらHTMLとCSSを学ぶことができます。
注意ポイント
ドットインストールと同様、実際に手を動かしながら学びましょう。
- 内容に沿ってWEBサイトを完成させる
- それ以降は部分的に辞書として活用
の流れで学習しましょう。
4.模写コーディングする
ここまででだいぶHTMLとCSSについて理解が深まっていると思います。
その知識を活かしながら、サイトの模写コーディングに取り組んでみましょう。
模写コーディングとは、実際のサイトをそれ通りに自分で作ってみることです。
ここで、模写コーディングにおすすめのサイトを3つ紹介します。
✔️ 模写コーディングにおすすめのサイト
1.Facebookトップページ
2.Chatworkトップページ
3.airbnbトップページ
1.Facebookトップページ
1つ目はFacebookのトップページです。
メールアドレスとパスワードの入力欄、ログインボタンを実装することができます。
ページの構造自体もシンプルなので模写コーディング一発目にもってこいです。
2.Chatworkトップページ
2つ目はChatworkのLP（ランディングページ）です。
LP（ランディングページ）とは、縦に長いページで、企業が商品やサービスを紹介するページです。
このサイトは、作成しやすいのでおすすめです。
3.airbnbトップページ
3つ目はairbnb（エアービーアンドビー）トップページです。
画像が多く、配置が少し難しくなっています。
挑戦しがいがあります。
※模写コーディングでつまずいたら
模写コーディングでつまずくこともあります。そんな時はディベロッパーツール（検証ツール）を使いましょう。
ディベロッパーツールは、対象のサイトで右クリック→「検証」で開くことができます。
右側にページのコードが表示されます。
困ったらヒントにしましょう。
ただし、これは最終手段として使ってください。考えるプロセスが大切です。
まとめ：HTMLとCSSは正しい方法で学習すればすぐに習得できる
今回は、HTMLとCSSを最速で習得するための学習方法を4ステップで紹介しました。
- Progate（プロゲート）の「HTML&CSSコース」を学習する
- ドットインストールの「HTML/CSSコース」を学習する
- 本を見ながらWEBサイトを作ってみる
- 模写コーディングする
最後に、HTMLとCSSを学ぶにあたっての注意点を2つ。
- 完璧に理解することをを目指さない
- 必ず手を動かしながら学習する
HTMLとCSSを学ぶことは、それ以降の学習のための手段にすぎません。
HTMLとCSSはプログラミング学習の基礎として大切ですが、時間をかけすぎないようにしましょう。
僕自身も完璧に理解しようとして学習に半年かけてしまい、もったいないことをしたと後悔しています。
今からプログラミングを始めるあなたは今回紹介した方法で最速でマスターしてください。
✔️ あわせて読みたい
