こんな疑問に答えます。
まず始めに言うと、「HTML/CSS学習は沼」なので、大変危険です。
気がつくと一年ぐらい教科書をやっていて、全然本題の「デザインカンプからのコーディング」に進めない場合もありえます。
これだとWeb制作を仕事にするまで、あと10年はかかってしまいます。
そこで今回は「一個やるだけで、HTML/CSSの基礎学習が終了する良質な本・動画」のみを解説します。
これをこなすことで、すぐに教科書の学習から卒業することができます。
これを話している私自身は、業界6年目のフリーランスエンジニアで、Web制作案件数200件以上、50人以上のフリーランス独立を支援しスクールの講師もしています。
今回紹介する本や動画は全部自分で中身を見て、ずっとおすすめし続けているロングセラーばかりになるので、ぜひ最後まで御覧いただき、実践してみてください！
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
前提：HTML/CSSの基礎教材は一つで良い話
HTML/CSS学習者が最近は多いので、たくさんの入門者が揃っています。
しかし、現在エンジニアとして働いていて思うのは、
教科書での学習は早めに終わらせて実践に入らないと、厳しい！
ということです。
いたずらに大量の入門書をこなすより、「良質な一冊or動画教材」を学習して、早めに次の段階に行くことがかなり大事になってきます。
よって、この記事では紹介する教材をかなり絞っています。
Progateもやっておくとスムーズかも
Progateの「HTML&CSSコース」はやっておくとスムーズかと思います。
道場コースをやる必要はないですが、「Flexbox編」までなんとなく進めておけば、本での学習もスムーズに進められます。
HTML/CSSを本で学ぶ場合のおすすめ本
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
本でHTML/CSSを学習する場合は、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」がおすすめです。
この本はHTML.CSS関連の本では数年間ずっと売上No.1になっていますが、それほど分かりやすく、「間違いない外さない教材」である証拠だと思います。
- CSS Gridなどモダンな手法も掲載
- 実際に作りサイトがおしゃれなので、モチベに良い
- 制作の流れやデザインに関しても少し触れられる
実際に分かりやすい雰囲気は下記画像から分かると思います。
この本を一冊やるだけで、HTML/CSSの基礎学習は終了でいいと思います。この後のステップは後述します。
HTML/CSSを動画で学ぶ場合のおすすめ動画
ちゃんと学ぶ、HTML/CSS + JavaScript
個人的には動画で学習するのが本以上に分かりやすくおすすめで、動画なら「ちゃんと学ぶ、HTML/CSS + JavaScript」を選べば間違いありません。
HTML/CSSで一番売れている動画教材だと思います。
また、Udemyなので、セール時に購入するのがお得です。
「ちゃんと学ぶ、HTML/CSS + JavaScript」の中で、取り組むべき場所は以下です。
JavaScriptの部分は、また後で学習するば良いので、HTML/CSSを学習する段階では飛ばしてOKです。
Bootstrapに関しては使うことがほぼ無いので、学習する必要はありません。
FlexboxやCSS Gridをとにかく演習できるのがいいですね！
＼動画で分かりやすくHTML/CSSを最速学習する／
HTML/CSS独学のヒント
分からない部分があっても、とりあえず一周することを最優先にする
初めて学ぶことなので、分からない部分が多発すると思います。
そんなときに、考えすぎて先に進めない人が多いと思いますが、解决策は以下です。
- 諦めて先に進みつつ、
- 同じ内容を扱っている教材も見てみる
今回は「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」と「ちゃんと学ぶ、HTML/CSS + JavaScript」を紹介しましたが、
２つを見比べつつ学習するのも全然ありだと思います。
とにかく「どちらかを一周すること」を最優先にしましょう。
同じ内容を別の表現で見ると、一気に理解度が上がることが多いです。
手詰まって先に進まないより全然マシなので、難しいと感じたら両方揃えるのもいいかと！
どこまで理解したら次に進んでいいの？
本の内容を7割ぐらい理解したら、教科書から離れてOKです。
- 教科書や動画の参考コードを見て、自分で0から書けなくても、意味は分かるレベル
ここを目指してもらえればと思います。
この後の工程で模写コーディングかデザインカンプからのコーディングを行いますが、そのときに、振り返って活用できるのがこのレベルです。
HTML/CSSの基礎学習が終わったらやるべきこと
今回は「一個やるだけで、HTML/CSSの基礎学習が終了する良質な本・動画」のみを解説しました。
この後の工程としては、「模写コーディング」もしくは「簡単なデザインカンプからのコーディング」に挑戦するのがベストです。
挑戦しつつ、分からない部分があれば教科書に戻る方法が一番レベルアップできます。
Web制作を仕事にするまでの全工程は以下になっています。
これを徹底解説したのが、「Progateから実務までにやるべきことと具体的手順」という記事です。
この記事を完走してもらえれば、就職転職、もしくはフリーランスもいけます。
まずは、今回紹介した教材を爆速で一周して、その後上記のWeb制作独学ロードマップ記事を参考に進めていただければと思います。
2024年追記 周りと差がつく本も紹介しています！
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
