プログラミング

HTML&CSSを最速でマスターする方法【4ステップで解説】

HTMLとCSSを最速で理解

 

ながもん
こんにちは、ながもんです

 

よく「プログラミングを学ぶ時にHTMLとCSSから勉強しよう」と聞くけど、どうやって勉強すればいいかわからない。という方も多いと思います。

この記事では、HTMLとCSSを最速でマスターする方法を紹介しています。

僕自身、HTMLとCSSを半年間かけて学習しました。その中での反省や、やってよかったことを踏まえて書いています。

全部で4ステップに分けて紹介しているので順番に取り組んでみてください。

プログラミング学習の第一歩として、正しい勉強法で学習を始めましょう!

HTML、CSSとは

HTML、CSSとは

HTMLは「Hyper Text Markup Language」の略で、WEBページを作成するために使う言語です。

インターネット上のほとんどのサイトはHTMLを用いて作成されています。

HTMLは厳密にはプログラミング言語ではなく、マークアップ言語と呼ばれます。

CSSは、「Cascading Style Sheet」の略で、WEBページの見た目を整えるための言語です。

文字の色やサイズなどを指定することができます。

HTML、CSSを最速で学ぶための4ステップ

HTMLとCSSを最速で理解するための4ステップ

ここからは、HTMLとCSSの実際の学習方法について4ステップで解説します。

✔️ HTMLとCSSの学習方法

  1. Progate(プロゲート)の「HTML&CSSコース」を学習する
  2. ドットインストールの「HTML/CSSコース」を学習する
  3. 本を見ながらWEBサイトを作ってみる
  4. 模写コーディングする

1.Progate(プロゲート)の「HTML&CSSコース」を学習する

HTMLとCSSを最速で理解するための4ステッププロゲート

まずはProgateという学習サイトを使って学習しましょう。Progateはゲーム感覚でプログラミング学習を進めることができるため、学習の第一歩目に最適です。

>>Progateをみてみる

コースは、「HTML&CSSコース」の初級編と中級編で十分です。

時間に余裕がある方や、もっと詳しく学びたい方は上級編にもチャレンジしましょう。

中級編以降を学習するには有料会員になる必要がありますが、月額たったの1,078円です。

プロゲートの料金と内容については以下の記事で解説しています。

>>Progate(プロゲート)は無料でどこまで学べるの?有料との違いを解説する

ここに注意

Progateでの学習は7割程度理解できれば十分です

あまり時間をかけすぎないように注意しましょう

2.ドットインストールの「HTML/CSSコース」を学習する

HTMLとCSSを最速で理解するための4ステップdotinstall

Peogateで基礎を学んだら、次はドットインストールで学習しましょう。

ドットインストールは動画を見ながらプログラミング学習ができるサービスです。

そのため、コードを書く流れが理解しやすくなっています。

>>ドットインストールをみてみる

学習の流れは以下の通りです

  1. HTML/CSSの学習環境を整えよう([windows版] or [macOS版])
  2. はじめてのHTML
  3. はじめてのCSS
  4. 詳解HTML 基礎文法編
  5. 詳解HTML フォーム部品編
  6. 詳解CSS 基礎文法編
  7. 詳解CSS セレクター編

 

ドットインストールのHTML/CSSのレッスンは全部で13コースありますが、基本は上記の7つで十分です。

4番以降は月額1,080円のプレミア会員になる必要があります。

ただ、1ヶ月以内に網羅できる量なので実質1,080円の支払いだけで終わります。

 

必須ではありませんが以下のレッスンもおすすめです。コードを書くスピードが格段に上がるのでできればやっておきましょう。

  • Visual Studio Code入門
  • Emmet入門

学習上の注意

ドットインストールの学習では、必ず動画と同じ流れで実際にコードを書きましょう。「ただ動画を見るだけ」では学習効率がかなり下がってしまいます。

3、本を見ながらWEBサイトを作ってみる

WEBサービスだけでなく、本も並行して活用することで、学習効率が格段に上がります。

ここでは、HTMLとCSSを学ぶ上で役に立った本を2冊紹介します。

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

 この本では、HTMLとCSSはもちろん、デザインについても学習できます

学習中の辞書としても使うことができます。

この一冊は持っておくことをおすすめします。

スラスラわかるHTML&CSSのきほん 第2版

 実際に手を動かしながらWEBページを作成できます。

カフェのサイトのお問い合わせページや商品の紹介ページなど、実際のサイトを想定しながらHTMLとCSSを学ぶことができます。

注意ポイント

ドットインストールと同様、実際に手を動かしながら学びましょう。

  1. 内容に沿ってWEBサイトを完成させる
  2. それ以降は部分的に辞書として活用

の流れで学習しましょう。

4.模写コーディングする

ここまででだいぶHTMLとCSSについて理解が深まっていると思います。

その知識を活かしながら、サイトの模写コーディングに取り組んでみましょう。

模写コーディングとは、実際のサイトをそれ通りに自分で作ってみることです。

ここで、模写コーディングにおすすめのサイトを3つ紹介します。

✔️  模写コーディングにおすすめのサイト

1.Facebookトップページ

2.Chatworkトップページ

3.airbnbトップページ

1.Facebookトップページ

模写コーディングFacebook

1つ目はFacebookのトップページです。

メールアドレスとパスワードの入力欄、ログインボタンを実装することができます。

ページの構造自体もシンプルなので模写コーディング一発目にもってこいです。

2.Chatworkトップページ

模写コーディングchatwork

2つ目はChatworkのLP(ランディングページ)です。

LP(ランディングページ)とは、縦に長いページで、企業が商品やサービスを紹介するページです。

このサイトは、作成しやすいのでおすすめです。

3.airbnbトップページ

模写コーディングairbnb

3つ目はairbnb(エアービーアンドビー)トップページです。

画像が多く、配置が少し難しくなっています。

挑戦しがいがあります。

※模写コーディングでつまずいたら

模写コーディングでつまずくこともあります。そんな時はディベロッパーツール(検証ツール)を使いましょう。

ディベロッパーツールは、対象のサイトで右クリック→「検証」で開くことができます。

HTMLとCSSを最速で理解

右側にページのコードが表示されます。

HTMLとCSSを最速で理解するための4ステップ

困ったらヒントにしましょう。

ただし、これは最終手段として使ってください。考えるプロセスが大切です。

まとめ:HTMLとCSSは正しい方法で学習すればすぐにマスターできる

HTMLとCSSは正しい方法で学習すればすぐにマスターできる

今回は、HTMLとCSSを最速でマスターする方法を4ステップで紹介しました。

  1. Progate(プロゲート)の「HTML&CSSコース」を学習する
  2. ドットインストールの「HTML/CSSコース」を学習する
  3. 本を見ながらWEBサイトを作ってみる
  4. 模写コーディングする

最後にHTMLとCSSを学ぶにあたっての注意点を2つ。

  1. 完璧に理解することをを目指さない
  2. 必ず手を動かしながら学習する

 

HTMLとCSSを学ぶことは、それ以降の学習のための手段にすぎません

HTMLとCSSはプログラミング学習の基礎として大切ですが、時間をかけすぎないようにしましょう。

僕自身も完璧に理解しようとして学習に半年かけてしまい、もったいないことをしたと後悔しています。

今からプログラミングを始めるあなたは今回紹介した方法で最速でマスターしてください。

 

✔️   あわせて読みたい

>>Progate(プロゲート)は無料でどこまで学べるの?有料との違いを解説する

>>テックキャンプ福岡ってどうなの?受講してわかったいい点・悪い点

-プログラミング
-