HTML&CSSを1ヶ月で習得するための無料の勉強法とは

まず初めに

プログラミングの勉強ってまず何から始めていいか分からない・・・

一般的なサイトを作るために必要なマークアップ言語のHTMLとCSS。このブログの見た目・レイアウトはHTMLとCSSでできています。(スマホ用のメニューだけはJavascriptという言語だったり、実際動かしているのはPHPという言語です。)

プログラミングに入る前の基本のきでもある、このHTMLとCSSっていうのは習得するだけであれば1ヶ月でできてしまうのではないかと思いました!ですので、その勉強法をいくつか紹介したいなと思います!お前学校いってんじゃんって思った方、行く前にHTMLとCSSだけは独学で勉強してから行きました。またこっちに来てからこうすれば早く習得できるんじゃないかと思ったので、それを踏まえた勉強法です。

以下みなさんのお力になれればと思います!

勉強する前に用意しておきたい環境

・ブラウザ(GooglechromeやSafariなど)

 このサイト見ている人は用意する必要はないです。デベロッパーツールが使えるのでおすすめはChromeブラウザです。

・コードを書くためのテキストエディタ

 初心者の方にはSublimetextというのがオススメです。
ダウンロードや使い方はこちら
サクラエディタやmiでも大丈夫です。

5つの勉強法

ddd3dad613828f087d6aaaa8edf03129_s

⑴Progateを使う

⑵ドットインストールを使う

⑶メンターとなる人を見つける

⑷簡単なWebサイトをコピーしまくる

⑸デベロッパーツールとリファレンスを使ってうまくいかないところの原因を探す

⑴⑵は両方やって欲しいのが本音ですが、どちらかだけでも大丈夫です。
⑶はできたら見つけて欲しいなと思います。つまずいたときに役に立ってくれます。

あとは⑷⑸を利用して、技術をものにしていきましょう!

⑴Progateを使う

スクリーンショット 2015-08-03 17.26.51

一番おすすめしたいのが

Progate

という学習用のwebサービスです。
Progateというのは、ゲーム感覚でHTMLやCSSといったプログラミング言語を身につけることができます。

スクリーンショット 2015-08-03 17.32.44

HTML&CSS基礎編、応用編とあるのですが、どちらもクリアしていくにつれ徐々にサイトができあがってくのでとても満足感があります。あっ!いつのまにかwebサイトができていたなんてことになります。

個人的にレベルが上がっていく感じも好きです!
  
スクリーンショット 2015-08-03 17.32.10

スクリーンショット 2015-08-03 17.33.47

実際の勉強画面がこんな感じになっています。

⑵ドットインストールを使う

スクリーンショット 2015-08-03 17.15.11

プログラミン言語やサイト作成、アプリ開発を勉強するための動画サイト

ドットインストール

実際の画面での操作状況を動画で見ることができます。レッスンが細切れになっていたり、一回一回が短いので飽きずに続けることができます。
  

スクリーンショット 2015-08-03 17.18.41

ドットインストールを使ったおすすめの勉強法は、画面を2分割して左側でドットインストールを見ながら、右側のエディタで同じように打って、実際どう映るのか自分自身で試すことです。

⑶メンターとなる人を見つける

HTML&CSSを1ヶ月で習得するための無料の勉強法とは

上記の二つや実際に本を読みながら勉強することも重要なのですが、もうすでにプログラミングができてメンターとなる人が身近にいるとなおさらいいと思います。

なぜならつまずいたり、わからなくなったりした場合、原因を見つけるのが難しいのがプログラミングです。そういったときに身近に質問できる人がいれば、すぐ解決できる場合もあるのでおすすめです。

⑷簡単なWebサイトをコピーしまくる

上記で基本を身につけたら、後はもう実践して力をつけていくだけです。だらだら概念だけを勉強し続けても実際に作れなければ意味がありません。なので簡単なサイトからコピーしていくのがいいと思います。

じゃあどうやってそういう参考サイトを見つけるのってことなのですが、いい感じのサイトが集まったwebサイトがあります。


HTML&CSSを1ヶ月で習得するための無料の勉強法とは

bookma!

このサイトは世界のイケてるサイトを集めたサイトです。色指定でサイトを選ぶことができます。下のイケサイよりもおしゃれなサイトが多いなと個人的に思います。

  

HTML&CSSを1ヶ月で習得するための無料の勉強法とは

イケサイ

イケサイは日本のサイトをメインに紹介しています。ここのいいところはサイトを種類別に見ることができること、コーポレートサイトや通販サイトなどといいうように、種類別にサイトを検索することができます。

  

スクリーンショット 2015-08-03 17.02.01

ランディングページ集めました。

ランディングページという1ページだけでできたサイトを集めたサイトです。真似するのが比較的簡単でハードルが低いので初心者さんにはおすすめのサイトです。

イケてるサイトを集めているので、構造が難しかったり動いたりするサイトがあります。できるだけ簡単なサイトから取り組んでいった方が達成感もあるし、途中で挫折しにくいと思います。自分でいいなと思ったサイトを選んで真似してみてください!

デベロッパーツールとリファレンスを使ってうまくいかないところの原因を探す

わからなくなったらデベロッパーツールとHTML&CSS辞典があればなんとか対処することもできます。

スクリーンショット 2015-08-03 17.06.47

デベロッパーツールとは

Googlechromeについてる、どんなCSSで書かれているか見ることができるものです。
反映がうまくされない部分をデベロッパーツールで押すと、そこがどんな風に書かれているのかを見ることができます。

HTML、CSSリファレンス

またこのタグなんだっけとか、行間を指定するタグなんだっけというのにはHTML、CSSリファレンスがオススメです。タグの説明やタグを探すことができる辞典みたいなものです。どういうCSSを書けばいいのかが一目でわかります。

最後にひとつだけ

上記の方法であれば独学で無料で勉強できるのですが、一つだけ注意点があります。プログラミング言語は時の流れが速かったりトレンドが急に変わったりします。実際にHTMLでも今はHTML5が主流ですが、昔はXHTMLといったものもありました。疑問点が出て探す時や本を買うときは、いつ発表されたものなのかというのも念頭に置いておいてください。今は違うなんてことがたまにあります。

上記の点をふまえて是非HTML&CSSの勉強を頑張ってみてください!


私自身数ヶ月前にプログラミングやコーディングを始めた初心者にすぎません。いろいろと間違いがあるかもしれないので、見つけた!って方はお問い合わせで一報下さると助かります。