目次
HTML&CSSをマスターする完全ロードマップ
現在は、Web制作会社で働きながら、Web制作の勉強をしています。
そんな私が、1ヶ月でHTML&CSSを身に付けた独学方法を解説していきます。
1.Progate(プロゲート)とドットインストールを1周して基礎を身につける
Progate(プロゲート)は、環境構築をしなくても、コードを書くことができるため、初めてプログラミングをする初学者におすすめの学習サイトです。
Progate(プロゲート)での学習を終えたらドットインストールで、さらにHTML&CSSの知識を深めましょう！
また、ドットインストールで勉強する際も実際にコードを書きながら勉強をしましょう！
⚠︎注意 講座の内容を『まだ覚えられてないからもう一周しよう』ということはせずに、次のステップに進むようにしましょう！ プログラミングは、カンニングOK! わからないところは、その都度調べればいいんです。 ということで、プロゲートやドットインストールで勉強する際は、『こういう機能があるんだな』という感じで全体像を学びましょう！ |
おすすめの書籍
また、私が独学で勉強した際に、役に立った書籍を紹介しておきます。
1.1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]
この本は、flexボックスに関してわかりやすく解説されているため、初学者でも読みやすい本だと思います。
私自身、独学を始めたころに、書店で立ち読みした際に、『とてもわかりやすいな！』と思い、購入した記憶があります笑
2.Webデザイン良質見本帳
この本では、webサイトがどのような意図でデザインされているのかを、『業種別、目的別』に画像を使いながらわかりやすく解説されています。
『自分はコーディングだけしたいからデザインは大丈夫』と思っている方もいると思います。
ですが、webサイトのデザインの意図を知ることは、そのサイトの機能性をあげることにも繋がることなので、webデザインを学ぶことは大事なことです。
webサイトの意図を知りたい方、自分でデザインをしたいという方に役に立つおすすめの本です。
3.CSS設計完全ガイド
CSS設計とは、クラスの名前に規則を持たせておくことで、コードに対して『保守できる、拡張できる、予測できる、再利用できる』という利点があります。
このCSS設計の考え方は、コードの量が増えれば増えるほど大事になってくるので、ぜひこの本を読んで身につけるようにしましょう！
2.実戦でよく使うHTML&CSSのコード
実戦でよく使うHTML&CSSのコードを記事にまとめましたので、Progate(プロゲート)やドットインストールだけでは、『不安だな…』 『まだ自信がない…』という方は、ぜひ読んでください！
テキスト編
レイアウト編
わかりづらいところ編
3.模写コーディング（初級編）をする！！
ある程度、基礎を身につけることが出来た！という方は、実戦あるのみ！！
ということで、模写コーディングをしましょう！
模写コーディングとは、実際に世にあるサイトをHTML&CSSを使い真似をすることです。
今回は、模写コーディング初級編ということで、僕が作成したサイトを模写コーディングしてみましょう！
以下の画像を模写コーディングしてみよう！
仕様書 ・ナビゲーションがあるヘッダー部分は、スクロールしても上部に固定されるようにします。 ・Blogの3カラムの横幅は、width: calc();を使いましょう！ ・Contactのlabel部分(青の背景部分)は、模擬要素を使ってレイアウトしています。 ・レスポンシブ対応は、ご自身でデザインしてコーディングしましょう！ ・画像は、ご自身で探して配置しましょう！ （画像素材を無料でダウンロードできるサイトのリンクを貼っておきます！⬇️） |
画像素材を探す際におすすめのサイト
『O-DAN 』・・・無料でダウンロードでき、画像の種類も豊富なのでおすすめです。
わからないところは、Progate(プロゲート)やドットインストール、本記事で紹介した『2.実戦でよく使うHTML&CSSのコード』の記事を参考にしましょう！
つまずきやすい箇所の参考記事を載せておきます！
・ヘッダー固定（fixed)
・3カラムの横幅設定 width: calc();
・模擬要素の使い方
以下のリンクに画像の回答コードをまとめていますので、どうしてもわからないという方は参考にしてください。
模写コーディングにおすすめのサイト
模写コーディングの初級編が終わったという方は、今から紹介する模写コーディングにおすすめのサイトを模写してみましょう！
Write
模写コーディング初級編を終えた方なら、問題なくコーディングできるレベルです！
iSARA
こちらのサイトは、少しレベルが高いですが、調べながらコーディングをすれば問題なく模写できると思います！
また、こちらのサイトは、実績としてポートフォリオに載せることができるので、ぜひチャレンジしてみましょう！
まとめ
1.Progate(プロゲート)とドットインストールを1周して基礎を身につける 2.実戦でよく使うHTML&CSSのコードの記事を見る(不安な方は) 3.模写コーディングで実戦！ |
模写コーディングが出来たという方は、HTML&CSSの知識はもう身についていると思います。
HTML&CSSの他にもjava scriptという言語を使えば、サイトに動きをつけることができるため、Progate(プロゲート)やドットインストールで基礎を身につけて、サイトに実装できるようにレベルアップしましょう！
java scriptの独学ロードマップも記事にしたいと思いますので、お楽しみに！
それでは、最後まで読んでいただきありがとうございました。
