Web制作勉強方法

HTML/CSSの独学でおすすめの勉強本と動画【エンジニア選定】

HTML/CSSの独学でおすすめの勉強方法【本か動画でOK】
本ページにはプロモーションが含まれています。

ありさちゃん
ありさちゃん
HTML/CSSを独学したいけど、おすすめの本屋動画が知りたい、できれば現役エンジニアが本当におすすめしているものだけ知りたい…
まさひろくん
まさひろくん
おすすめ20選記事とか見たけど、多すぎて選べないです

こんな疑問に答えます。

まず始めに言うと、「HTML/CSS学習は沼」なので、大変危険です。

気がつくと一年ぐらい教科書をやっていて、全然本題の「デザインカンプからのコーディング」に進めない場合もありえます。

これだとWeb制作を仕事にするまで、あと10年はかかってしまいます。

本記事は、将来Web制作を仕事にしたい人を対象にしています。

そこで今回は「一個やるだけで、HTML/CSSの基礎学習が終了する良質な本・動画」のみを解説します。

これをこなすことで、すぐに教科書の学習から卒業することができます。

これを話している私自身は、業界6年目のフリーランスエンジニアで、Web制作案件数200件以上、50人以上のフリーランス独立を支援しスクールの講師もしています。

今回紹介する本や動画は全部自分で中身を見て、ずっとおすすめし続けているロングセラーばかりになるので、ぜひ最後まで御覧いただき、実践してみてください!

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

前提:HTML/CSSの基礎教材は一つで良い話

シャッター

HTML/CSS学習者が最近は多いので、たくさんの入門者が揃っています。

しかし、現在エンジニアとして働いていて思うのは、

しょーご

教科書での学習は早めに終わらせて実践に入らないと、厳しい!

ということです。

いたずらに大量の入門書をこなすより、「良質な一冊or動画教材」を学習して、早めに次の段階に行くことがかなり大事になってきます。

よって、この記事では紹介する教材をかなり絞っています。

Progateもやっておくとスムーズかも

Progateの「HTML&CSSコース」はやっておくとスムーズかと思います。

道場コースをやる必要はないですが、「Flexbox編」までなんとなく進めておけば、本での学習もスムーズに進められます。

HTML/CSSを本で学ぶ場合のおすすめ本

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

HTML/CSSの独学でおすすめの勉強本と動画【エンジニア選定】

本でHTML/CSSを学習する場合は、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」がおすすめです。

この本はHTML.CSS関連の本では数年間ずっと売上No.1になっていますが、それほど分かりやすく、「間違いない外さない教材」である証拠だと思います。

グッドポイント
  • CSS Gridなどモダンな手法も掲載
  • 実際に作りサイトがおしゃれなので、モチベに良い
  • 制作の流れやデザインに関しても少し触れられる

実際に分かりやすい雰囲気は下記画像から分かると思います。

https://amzn.to/48rtePF
しょーご

この本を一冊やるだけで、HTML/CSSの基礎学習は終了でいいと思います。この後のステップは後述します。

created by Rinker
¥2,237 (2024/05/24 20:18:15時点 Amazon調べ-詳細)

HTML/CSSを動画で学ぶ場合のおすすめ動画

ちゃんと学ぶ、HTML/CSS + JavaScript

https://www.udemy.com/course/html-css-js/

個人的には動画で学習するのが本以上に分かりやすくおすすめで、動画なら「ちゃんと学ぶ、HTML/CSS + JavaScript」を選べば間違いありません。

HTML/CSSで一番売れている動画教材だと思います。

また、Udemyなので、セール時に購入するのがお得です。

ちゃんと学ぶ、HTML/CSS + JavaScript」の中で、取り組むべき場所は以下です。

Web制作の独学勉強法【現役エンジニアが語る準備から案件受注レベルまで】

JavaScriptの部分は、また後で学習するば良いので、HTML/CSSを学習する段階では飛ばしてOKです。

Bootstrapに関しては使うことがほぼ無いので、学習する必要はありません。

しょーご

FlexboxやCSS Gridをとにかく演習できるのがいいですね!

\動画で分かりやすくHTML/CSSを最速学習する/

HTML/CSS独学のヒント

分からない部分があっても、とりあえず一周することを最優先にする

初めて学ぶことなので、分からない部分が多発すると思います。

そんなときに、考えすぎて先に進めない人が多いと思いますが、解决策は以下です。

  • 諦めて先に進みつつ、
  • 同じ内容を扱っている教材も見てみる

今回は「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」と「ちゃんと学ぶ、HTML/CSS + JavaScript」を紹介しましたが、

2つを見比べつつ学習するのも全然ありだと思います。

とにかく「どちらかを一周すること」を最優先にしましょう。

しょーご

同じ内容を別の表現で見ると、一気に理解度が上がることが多いです。

手詰まって先に進まないより全然マシなので、難しいと感じたら両方揃えるのもいいかと!

どこまで理解したら次に進んでいいの?

本の内容を7割ぐらい理解したら、教科書から離れてOKです。

  • 教科書や動画の参考コードを見て、自分で0から書けなくても、意味は分かるレベル

ここを目指してもらえればと思います。

この後の工程で模写コーディングかデザインカンプからのコーディングを行いますが、そのときに、振り返って活用できるのがこのレベルです。

HTML/CSSの基礎学習が終わったらやるべきこと

今回は「一個やるだけで、HTML/CSSの基礎学習が終了する良質な本・動画」のみを解説しました。

この後の工程としては、「模写コーディング」もしくは「簡単なデザインカンプからのコーディング」に挑戦するのがベストです。

挑戦しつつ、分からない部分があれば教科書に戻る方法が一番レベルアップできます。

Web制作を仕事にするまでの全工程は以下になっています。

Web制作ロードマップ

これを徹底解説したのが、「Progateから実務までにやるべきことと具体的手順」という記事です。

この記事を完走してもらえれば、就職転職、もしくはフリーランスもいけます。

まずは、今回紹介した教材を爆速で一周して、その後上記のWeb制作独学ロードマップ記事を参考に進めていただければと思います。

しょーご

私の出している「コーディング演習課題」では実務レベルのレビューをしていますので、そちらも頑張ってください!👍

2024年追記 周りと差がつく本も紹介しています!

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!