ゆずハック

ゆずハックというブログです。プログラミングからデザイン、生活や恋愛のことまでつらつらと書いています!

HTML&CSSを最短で習得するための無料の学習方法とおすすめポイント!

スポンサーリンク

こんにちは、ユズです。今回は自分でWebサイトを作ってみたいけど、何から始めていいか分からない・・・って人にオススメの記事です。
私も実際にWebサイト制作で学生の頃は稼いだりしていました。簡単なサイトでも1サイト5万~10万稼ぐことはできます。(これでも破格なんですけどね、、、!)

Webサイトってどうやってできているの?

Webサイトというのは、文書構造を作るHTMLというものと、デザインや色形レイアウトを変えることができるCSSというマークアップ言語からできています。(JavaScirptというプログラミング言語を使っているサイトも多くあります。)どのサイトもほぼほぼこの言語を使ってできています。ちなみにWebサイト制作はプログラミングとはちょっと違ってくるのでここも要注意(うるさいおじさんたちに怒られます!笑)

どのぐらいで習得できるもの?

ゴリゴリアニメーションで動かしたい!というなら別ですが、HTMLとCSSは学ぶのにそんなハードルが高くないため、習得するだけであれば平日少しの時間と休日を使えば、1ヶ月ほどでできてしまうのではないかと思います。ですので、その勉強法をいくつか紹介したいなと思います!
以下みなさんのお力になれればと思います!

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

ブラウザ(GoogleChromeやSafari、IEなど)

このサイト見ている人は用意する特別に必要はないです。デベロッパーツールという便利なルールが使えるのでおすすめはChromeです。

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

 初心者の方にはSublime Text - Downloadというのがオススメです。サクラエディタやmi、Brackets、Atom、最悪メモ帳などでも大丈夫ですよ!これを使ってHTMLやCSSを書いていきます。

5つの勉強法を紹介

  1. ドットインストールを使う
  2. Progateを使う
  3. メンターとなる人(気軽に質問できる人)を見つける
  4. 簡単なWebサイトをコピーしまくる
  5. デベロッパーツールとリファレンスなどを使ってうまくいかないところの原因を探す

1,2は両方やって欲しいのが本音ですが、どちらかだけでも大丈夫です。
3,はできたら見つけて欲しいなと思います。勉強していく上でつまずいたときに役に立ってくれます。ドットインストールやProgateの有料プランでもOK、質問できる人が近くにいることが挫折しない重要ポイントです!

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

1.ドットインストールを使う

f:id:yuzuhooo:20170618182009p:plain

ドットインストールは、プログラミン言語やサイト作成、アプリ開発を勉強するための動画サイトで、とても有名です。私も新しい言語を習得するときなどによく活用しています。実際の画面での操作状況を動画で見ることができ、音声で解説もしてくれるのでとてもありがたいです。また、レッスンが細切れになっているため、一回一回が短いので飽きずに続けることができます。
  
ドットインストールを使ったおすすめの勉強法は、画面を2分割して左側でドットインストールを見ながら、右側のエディタで同じように打って、実際どう映るのか自分自身で試すことです。

2のProgateよりいいところは実際、自分でエディタなどを使って操作を覚えれるところ。Progateだと、画面内に打っていくため実際の環境で戸惑ったりすることがあるかもしれません。

2.Progateを使う

f:id:yuzuhooo:20170618182012p:plain

次におすすめしたいのが、Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]という学習用のwebサービスです。Progateというのは、単元を合格するごとにレベルが上がったりするためゲーム感覚で、HTMLやCSSといったプログラミング言語を身につけることができます。

HTML&CSS基礎編、応用編とあるのですが、どちらもクリアしていくにつれ徐々にサイトができあがってくのでとても満足感があります。あっ!いつのまにかwebサイトができていたなんてことになります。応用編のCSSの判定基準が微妙なところで合格にならなかったりするのが、ちょっとおすすめできないポイントでもあります。

3. メンターとなる人(気軽に質問できる人)を見つける

上記の二つや実際に本を読みながら勉強することも重要なのですが、もうすでにWebサイト制作ができてメンターとなる人が身近にいるとなおさらいいと思います。

なぜならつまずいたり、わからなくなったりした場合、原因を見つけるのが難しく、一番つまずくポイントだと思います。そういったときに身近に質問できる人がいれば、すぐ解決できる場合もあるのでおすすめです。最近ではProgateやドットインストールの有料プラン(どちらも月額1000円程度)で、講師に質問ができるのでそういったものを使うのもいいと思います。

4. 簡単なWebサイトをコピー(真似)しまくる

上記で基本を身につけたら、後はもういろいろなサイトを作って、力をつけていくだけです。だらだら概念だけを勉強し続けても実際に作れなければ意味がないので、な簡単なサイトからコピーしていくのがいいと思います。じゃあどうやってそういう参考サイトを見つけるのってことなのですが、いい感じのサイトが集まったwebサイトがあります。

bookma!

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

イケサイ

www.ikesai.com

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

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

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

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

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

次はもし実物通りに作ってわからなくなったり、解決策がわからない時にどうしたらいいかを教えたいと思います。HTMLとCSSでできたサイトであれば、ブラウザのデベロッパーツールとHTML&CSS辞典とググり力があればなんとか対処することもできます。

デベロッパーツールとは

f:id:yuzuhooo:20170618182015p:plain

GoogleChrome、Safari、Firefoxについてる、どんなHTMLが書かれていて、そこに対してどんなCSSが書かれているか見ることができる便利なものです。反映がうまくされない部分をデベロッパーツールで押すと、実際にCSSが適用されているのか、また書いて試すこともできます。

HTML、CSSリファレンス

www.htmq.com

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

上記ができたらJavaScriptを学んでいこう

ここまでできて、Webサイト制作にはまったら、次はおそらくアニメーションでサイトをゴリゴリ動かしたくなると思います。そうなったらJavaScirptやJQuery(JavaScriptのフレームワーク)を学んでいきましょう。

最後に

なかなかここまでやりきるのは大変だと思いますが、続ければきちんと力もつくし、最初わからなくても徐々にわかってくると思います。ですので、諦めないことを糧に頑張っていって下さい!