初心者向けHTML/CSSの効率的な勉強法【おすすめ参考書と動画学習サイト】
・プログラミング初心者だが、WEB制作ができるようになりたい。
・HTMLとCSSの初心者向けの効率的な勉強方法を知りたい。
こういった疑問に答えます。
本記事の内容
この記事を書いている私は、WEBエンジニアを目指して独学でプログラミングの勉強中。
こういった私が、解説していきます。
プログラミング初心者がWEB制作をできるようになるための、HTMLとCSSの効率的な勉強方法をまとめました
HTMLとCSSの効率的な勉強法は、結論、以下の３つです。
その①：Progateプロゲート で無料の「HTML & CSS 初級編」を一通り学ぶ
初心者がプログラム学習をするときの定番サイトが、「Progateプロゲート」です。
基礎レベルの講座はどれも無料で見ることができます。
内容は、イラスト中心のスライドでの解説で、
インターネットにつながるパソコンだけあれば、
他に特別なツールや環境は不要です。
HTMLのコードも、プロゲートの画面の中に実際に書きながら勉強ができます。
≫HTML & CSS 初級編（全８章、修了時間 3時間50分）：Progate
このコースのもくじは下記になっています。
- 1 章：HTMLに触れてみよう！
- 2 章：CSSに触れてみよう！
- 3 章：レイアウトを作ろう！
- 4 章：ヘッダーを作ろう！
- 5 章：フッターを作ろう！
- 6 章：コンテンツを作ろう！
- 7 章：お問い合わせフォームを作ろう！
その②：初心者向けのHTML・CSSの参考書で学ぶ
プロゲートの初級編を終わらせたら、次は、初心者向けの参考書で細かい部分を勉強しましょう。
『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』
おススメは、「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」です。
いろいろなサイトやブログでも、おススメ本として紹介されているものです。
 | 1冊ですべて身につく HTML ＆ CSSとWebデザイン入門講座 |
著者の「Mana」さんは、海外でもWEBデザイナーとして働いていらした方で、現在はWEB制作のインストラクターをされています。
ブログを始めて10年。節目の年で、こんな素敵な賞をいただきました✨ありがとうございます！😭 https://t.co/DMf7cmDqbk
— Mana (@chibimana) 2020年3月10日
「Webクリエイターズボックス」というWEB制作関連のブログ運営もされている方です。
『HTML5／CSS3モダンコーディング』
もう少しレベルの高い参考書として、もう一冊おススメするのが、「HTML5/CSS3モダンコーディング」です。
こちらの本も、いろいろなブログでおすすめ本として紹介されています。
 | HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページ レイアウトの作り方 |
著者の「吉田真麻（通称よしこ）」さんは、現在はネット証券サービス「FOLIO」のフロントエンドエンジニアです。
その③：初心者向けのおススメ動画学習サイトで学ぶ
本で勉強するのが向いている方と、
オンライン動画を見ながら勉強するのが向いている方、
ひとそれぞれだと思いますので、
おススメの動画学習サイトも紹介しておきます。
まずは無料で勉強できるものから始めて、
一通りの知識が身に着いたと思ったら、
有料サイトに手を出すのがいいかと思います。
ドットインストール
上記の２コースは、無料で最後まで見ることができますので、まずはこの２つをやるのがおすすめです。
さらに詳しく勉強したいと思ったら、有料のプレミアム版（月額1,080円）に挑戦しましょう。
≫詳解HTML 基礎文法編（全22回、うち前半5回は無料）：ドットインストールPREMIUM
≫詳解CSS 基礎文法編（全33回、うち前半5回は無料）：ドットインストールPREMIUM
Youtube
上記で紹介した「Mana」さんがやっている、WebクリエイターボックスのYoutubeチャンネルがあります。
Udemy
有料になりますが、「Udemy」
という動画学習サイトにも、WEB制作、HTMLやCSSの初心者向けの講座がたくさんアップされています。
≫世界最大級のオンライン学習サイトUdemy https://www.udemy.com/ja/
Udemyは、ときどき、90％OFFみたいな大幅な割引セールをしていることがあります。
通常時の価格はかなり高いので、ねらった講座があれば、定期的にチェックしてセール時を狙うのがポイントです。
全9時間のレクチャーが、セール時は1,750円で受けられるなら、書籍を買うよりも安いし、動画の方が勉強しやすい方にはおすすめと思います。
≫[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門（全9時間のレクチャー）：Udemy
上記は、『よくわかるPHPの教科書』の著者として有名な「たにぐち まこと」さんが講師をされている講座です。
まとめ
結論、初心者向けのHTMLとCSSの効率的な勉強法は以下です。
- プロゲートの無料の基礎講座をざっと終わらせる
- おススメ参考書は、Manaさんの『1冊ですべて身につく～』か、通称よしこさんの『～モダンコーディング』
- 動画で勉強したい方は、まず無料のドットインストール。次にドットインストールPREMIUM版かUdemy。
