・プログラミング初心者だが、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」のフロントエンドエンジニアです。
Tweets by yoshiko_pg twitter.com
https://www.wantedly.com/users/7049582www.wantedly.com
http://yoshiko.hatenablog.jp/yoshiko.hatenablog.jp
その③：初心者向けのおススメ動画学習サイトで学ぶ
本で勉強するのが向いている方と、
オンライン動画を見ながら勉強するのが向いている方、
ひとそれぞれだと思いますので、
おススメの動画学習サイトも紹介しておきます。
まずは無料で勉強できるものから始めて、
一通りの知識が身に着いたと思ったら、
有料サイトに手を出すのがいいかと思います。
ドットインストール
上記の２コースは、無料で最後まで見ることができますので、まずはこの２つをやるのがおすすめです。
さらに詳しく勉強したいと思ったら、有料のプレミアム版（月額1,080円）に挑戦しましょう。
≫詳解HTML 基礎文法編（全22回、うち前半5回は無料）：ドットインストールPREMIUM
≫詳解CSS 基礎文法編（全33回、うち前半5回は無料）：ドットインストールPREMIUM
Youtube
上記で紹介した「Mana」さんがやっている、WebクリエイターボックスのYoutubeチャンネルがあります。
まとめ
結論、初心者向けのHTMLとCSSの効率的な勉強法は以下です。
- プロゲートの無料の基礎講座をざっと終わらせる
- おススメ参考書は、Manaさんの『1冊ですべて身につく～』か、通称よしこさんの『～モダンコーディング』
- 動画で勉強したい方は、まず無料のドットインストール。次にドットインストールPREMIUM版かUdemy。
