HTML&CSS学習ロードマップ【完全未経験からでも最短7日で「基礎」「自走力」がつく】

[![og-image-for-top-v2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289248/527c6456-b6ed-5ccc-43a7-c9f1da3c29ab.png)](https://html-css.sokushu-class.com/?ref=qiita)




# 前置き

※ <font color="red">**本記事は「[HTML&CSS速習教室](https://html-css.sokushu-class.com/?ref=qiita)」のトップページの内容を抜粋したものになります。**</font>


「**[HTML&CSS速習教室](https://html-css.sokushu-class.com/?ref=qiita)**」のトップページ内では、

- HTML&CSS速習教室とは何か
- HTML&CSS速習教室ではどのように学習を進めるか


というのを動画で説明もしております。


HTML&CSS速習教室について、より詳細な情報を知りたい場合は、ぜひ「**[HTML&CSS速習教室](https://html-css.sokushu-class.com/?ref=qiita)**」のトップページもご覧いただけたらと思います^^


- **[HTML&CSS速習教室](https://html-css.sokushu-class.com/?ref=qiita)**


# 「HTML&CSS 速習教室」について

HTML&CSS 速習教室を運営している「つよぽん（[@tsuyopon_xyz](https://twitter.com/tsuyopon_xyz)）」と申します^^

当サイトはトップ画像にも書いてあるとおり、<font color="red">**最短７日で HTML と CSS の「基礎力」と「自走力」を身につけることをコンセプトにした「HTML と CSS の学習サイト」**</font>になります。

今まで HTML と CSS を使ったこと無い方でも、最初から順番に学習を進めることで、HTML と CSS を読み書きできるようになります。

学習途中でつまづいてしまい、全く先に進められなくなったとしても、「**LINEを使った学習サポート**」もしているので、お気軽に質問していただけたらと思います^^

> LINE を使った質問の流れは「**[質問したい場合](https://html-css.sokushu-class.com/intro/how-to-ask.html?ref=qiita)**」のページをご確認ください。


# なぜ HTML と CSS を学ぶのか？

HTML と CSS のスキルが身につくことで、次のようなことができるようになります。

- ホームページ制作
- Web アプリ開発
- WordPress のカスタマイズ
- 「アメブロ」「はてなブログ」などのブログサービスのカスタマイズ



逆に言えば、**「個人の Web サービスを作りたい」「ホームページ制作の仕事をしたい」「Web アプリ開発の仕事をしたい」と言った人は、HTML と CSS のスキルが必須**ということを意味します。

また、Web ページ作りをしない人でも、広告の運用に携わる仕事をしている場合は「数値計測用のタグを HTML に埋め込む」「広告タグを HTML に埋め込む」という作業が出てきます。（例: Google Analytics、Google AdSense などのタグ埋め込み）

つまり、Web サービスの運営に関わる場合、広い範囲で HTML の知識が必要になるということです。

そして、Web サービスの開発をする場合は、さらに CSS の知識も欠かせないことになります。

# 「自走力」が必要な理由

当サイトでは、HTML と CSS の基礎を学ぶのはもちろん、「**自走力**」を伸ばしていただくことも重要視しております。

ここで出てきた「自走力」とは、「<font color="red">**どうやって実装するかわからないとしても、自分で調べて自分で解決する力**</font>」を意味します。

この「自走力」がなぜ必要かというと、実際の開発の仕事では「初めて利用する技術」「新しい概念」を学ぶ場面が頻繁に出てくるからです。

厳しい言い方になるかもしれませんが、「**自走力が全くない＝開発でわからないことが出てきても、自分で解決する能力がない**」ということを意味します。

学習の段階から「自走力」を鍛えてもらうために、当サイトの後半では細かい解説はせず、自己学習のヒントに繋がる「キーワード」「調べ方」「学習の参考になるサイト」を提示します。

それらの参考資料を元に、「**調べる → 実際にコードを書く → 動作を確認する**」を繰り返して「自走力」を鍛えていただけたらと思います。

この試行錯誤を繰り返すことで「自走力」が少しずつ鍛えられます。

色々と調べた結果、それでもわからず全く先に進められなくなった場合は、先ほども紹介した「**LINEを使った学習サポート**」をご利用いただけたらと思います^^

> LINE を使った質問の流れは「**[質問したい場合](https://html-css.sokushu-class.com/intro/how-to-ask.html?ref=qiita)**」のページをご確認ください。


# 学習の流れ

当サイトでは、次の流れで学習を進めていくことになります。

- 下準備: コーディングを始めるために最低限必要な準備を行う
- １日目: 自分で書いた HTML を Web ブラウザに表示させる体験をする
- ２日目: 最初に抑えておくべき HTML の概念を学ぶ
- ３日目: HTML と CSS を連携させてデザインを変更する体験をする
- ４日目: 最初に抑えておくべき CSS の概念を学ぶ
- ５日目: Amazon の商品一覧のように、一覧表示する方法を学ぶ
- ６日目: パソコン画面とスマホ画面で見た目を切り替える方法を学ぶ
- ７日目: 自分でゼロから CSS を書かなくても、キレイな見た目の Web ページを作ることができる「Bootstrap」の使い方を学ぶ



上記項目を大きく分けると「① コーディング環境の準備」「②HTML の学習」「③CSS の学習」「④ パソコンとスマホに対応した Web ページの作り方」の 4 つのパートで構成されます。

最初から最後まで学習を終えた後は次のいずれか学習に入ると良いでしょう。

- フロントエンドの学習（Web アプリ開発の仕事につながる）
- バックエンドの学習（Web アプリ開発の仕事につながる）
- WordPress の学習（Web 制作の仕事につながる）

「フロントエンドの学習」「バックエンドの学習」「WordPress の学習」で、それぞれ具体的にどんなことを学習すれば良いかわからない場合は、LINEで質問していただけたらと思います^^

> LINE を使った質問の流れは「**[質問したい場合](https://html-css.sokushu-class.com/intro/how-to-ask.html?ref=qiita)**」のページをご確認ください。


## 【動画】当サイトの紹介

このページにiframeでYouTube動画を埋め込めないため、動画で「HTML&CSS速習教室」の全体像や活用方法を確認したい場合は、「**[HTML&CSS速習教室](https://html-css.sokushu-class.com/?ref=qiita)**」のトップページをご確認いただけたら幸いです^^

- **[HTML&CSS速習教室](https://html-css.sokushu-class.com/?ref=qiita)**