HTML＆CSS学習ステップアップ

1、はじめに

私が勉強を始めたばかりの頃、どんな段階のレベルがあり、どのくらいできれば、実務でやっていけるのかが、さっぱりわからなかったので、どんな順番でどの様にやるのが効率が良いのかについて今回はHTML＆CSSに限ってまとめていこうと思います。

各書籍を詳細に解説するとそれぞれ1冊毎に1記事書くことになるので、この記事では割愛します。

2、progate、ドットインストール

この辺はプログラミングの勉強を始めようと思った方なら、多くの方が行き着く所なので、簡単に説明していきます。

(1)progate (https://prog-8.com/)

スライド形式で、説明され、説明の仕方が初めてプログラミングを勉強しようと思っている方向けの説明となっているので、最初の教材としては、非常に良いと思います。

・やっておきたいレッスン

HTML&CSS初級
HTML&CSS中級
HTML&CSS上級
HTML & CSS Flexbox編

まずは、上記レッスンに取り組むのが良いと思います。

理由としては、上記のレッスンを行えば、HTML＆CSS（マークアップ言語）を使って、サイトのフロント画面を作るのに必要最低限の知識は揃うからです。（ただし、プロとしてやっていけるレベルとはまだ程遠いです。）

また、道場編が用意されているのですが、正直初めてHTML＆CSSをやる方には何をどう直せば良いのかがさっぱりわからず、効率が悪いです。

(2)ドットインストール (https://dotinstall.com/)

約3分ぐらいのレッスンで1レッスンが終了する動画教材です。

https://dotinstall.com/lessons 3もっと詳しくHTML/CSSを学んでみようまでがprogateの内容と被っており、はじめにやる内容としては十分な気がします。

コラム —Progate、ドットインストールどっちから先にやれば、良いのか問題—

人それぞれ、得意不得意はあるので、どちらかをやってよくわからないと思ったら、もう一方の教材の同じ部分の内容をやってみてみてください。

個人的には、書いてある内容が初めは正しく読めないので、動画教材であるドットインストールから入るのが良いと思います。

やる回数としては、両方2回もやれば、正直十分です！（早く次のレベルのものに取りかかりましょう！）

3、Udemy(未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース)

＊Udemy：有料の動画教材です。動画を購入する際はセールが行われている時にするのが良いです。2万円する教材が1000円代で購入できるので！（私が確認している最安値は動画1本1200円です）

progate、ドットインストールで最低限のウェブサイトのデザインを作れる様になったのに、いざ実際に1から作っていくと思った様にWebページを作ることができないと思います。

この原因は知識の使い方を学んでいないからだと、考えています。progate、ドットインストールまでは、この知識でこれが出来ますと言うことを説明してますが、それらの知識をもとにどの様に考え、Webページを作っていくかまでを説明していないからです。

そこで、プロの方がどの様なことを考えて、コーディング（HTML＆CSSのみ）を使っているのかを学ぶために今回の教材をやるのが適していると考えています。

未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース

上記のコースはWebデザイナーになるためのコースであるので、Photoshop、XDなどWebデザイン系の動画も出てきますが、こちらは一旦置いておき、コーディングの部分だけをやっていきましょう！

具体的にはセクション21:[HTML]HTML入門第1回からセクション48（最後）までやりましょう。

こちらの教材は非常に勉強になるのですが、レスポンシブデザインについては取り上げられていないのが、惜しい点ではあります。

4、HTML＆CSSの書籍

動画で学んだ後は、書籍で学ぶことをお勧めします。動画は分理解しやすいのですが、どうしても書籍と比べて情報の詳細に欠けるところがあります。この業界でお金稼いでいこうと思うのでしたら、しっかりとした情報で専門性を身につけるべきですし、仕事をする上でも要求される知識です。

1.HTML&CSSの学習に役立つ書籍

1冊目は上記の書籍になります。HTML＆CSS、webデザインをちょうど良いバランスで学べる書籍になっています。

Webサイトの基本、HTMLの基本、よく使うタグ、CSSの基本、プロパティの一覧を学習した後、フルスクリーン、2カラム、タイル型のWebサイトのデザインのコーデディング(HTML&CSSを書く)作っていきます。最後の章で外部メディアの使い方も学べる一冊になっています。

ここまでで、Webサイトのコーディング練習として6サイト作ったことになるので、だいぶWebサイトを作る勝手がわかってきたのではないでしょうか。

この一冊では不安な場合は、下記の書籍もおすすめです。

６ステップでマスターする　「最新標準」HTML CSSデザイン（固定レイアウト版）

6ステップつまりは、1冊で1つのWebサイトを作成するので、一つ一つの手順を詳しく書いています。『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』の説明では詳細がなく、分かりづらいと思った方には良いと思います。

『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』以外にもWebサイトを作るのを練習したいという方に役立つと思います。この書籍ではコーディンの練習として3つのセルフコーディングが用意されています。ただ、HTML＆CSSの学べる知識としては、『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』の内容と重なるものが多いです。

HTML&CSSの知識を詳しく学びたい方におすすめできる書籍です。左の書籍は15ステップで構成され、右の書籍は30lessonで構成されています。段階を踏んで勉強したい方は左の書籍から学ぶのが良いと思います。Webサイトを実際に作るよりもWebサイトを作る上で重要なこと、管理についても知れる書籍となっています。

ここまで紹介してきた書籍でHTML＆CSSの知識に関しては十分と言って良いと思います。残すところとしてはCSSを効率よく書き、管理し易くするSassとCSS設計の知識となります。

5、Sassについて学べるコンテンツ

ここでは、CSSを効率よく書くためのSassについて学べるものを紹介します。

- ProagteのSassコース
- 『Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書』

教材はHTML＆CSSに比べると圧倒的に少なく主な日本後で書かれているものは上記ぐらいしかないです。また、あくまでもCSSを効率良く書くための技術となりますので、CSSの発展と捉えるのが良いと思います。（正確にはそれだけではないですが、詳細は割愛します。）

6、CSS設計について学べる書籍

レベル順に並べると、上記の様にはなるのですが、右端の書籍である『CSS設計完全ガイド詳細解説実践的モジュール集』が他のCSS設計の書籍と比較して圧倒的に分かりやすく、詳細に記載されています。この1冊は文句なしに他の方オススメできる書籍だと思います。

7、まとめ

以上がHTML&CSSに関する教材をレベル順に並べた内容になります。

今回紹介した教材を全部購入した場合の総額は26,630円でした。

6、までできないとお仕事はできないというわけではないです。日本で出回っているHTML＆CSS系の教材をレベル順に並べるとこんな感じになるのではないかという考えで並べただけす。また、Webデザインはこれとは別に学ぶ必要がありますが。。。

8、この記事を書くにの参考にした書籍一覧

『HTML&CSSとWebデザインがきちんと身につく本』
『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』
『6ステップでマスターするHTML＋CSSデザイン最新標準』
『HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッドシングルページレイアウトの作り方』
『HTML5&CSS3デザインきちんと入門これから本気で学びたい人の最高の教科書』
『HTML5&CSS3コーディングとサイト制作の教科書』
『HTML5＆CSS標準デザイン講座30LESSONS』
『作りながら学ぶHTML&CSSデザインの教科書』
『CSSグリッドレイアウトデザインブック』
『HTML5&CSS3完全大辞典』
『Sassの教科書Webデザインの現場で必須のCSSプリプロセッサ』
『CSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法』
『最強のCSS設計手法』
『CSS設計完全ガイド詳細解説実践的モジュール集』

HTML＆CSS学習ステップアップ