どーも!つーさん(@tu_san005)です!
今回は最短でHTML/CSSを学びたい人へということで
・HTMLCSSってちょっとやったことあるけどよくわからない、、
・でも時間をかけずにできるようになりたい!
そんな初心者の人に向けて記事を書いていきたいと思います。
目次
HTMLってそもそもなに?
HTMLとは、簡単にいうと、ウェブページの表示の仕方を書くための言語です。
例えば、この少し上の「HTML/CSSってそもそもなに?」というのは見出しになっていますが、これもHTMLで文字を大きくしています。
他にも、アンケートなどのサイトで、「次のうちから当てはまるものを一つ選択してください」というものがあったりします。

こういうやつですね。
また、以下に自由な感想を入力してくださいというようなテキスト入力欄とかありますね。
これらのものは全てHTMLを使って表現されています。
だから「表示の仕方」を書くためのものと言われるんですね。
じゃあCSSは?
CSSはHTMLの補助をするような役割を担っています。
例えばですが、文字の色を変更したり、「この部分の背景を黄色にしたい!」とかを表現するためのものです。
なのでHTMLとCSSはよく一緒になっていますが、HTMLは表示の仕方を、CSSはその補助をするという感じでセットになっているということですね!
HTML/CSSを学べるオススメサービス
HTML/CSSを学ぶのに僕がオススメしているのはProgateというサービスです。
Progateはプログラミングを学習するためのウェブサービスです。
HTML/CSSの他にも様々なプログラミング言語を学習することができますが、HTML/CSSはかなり豊富な量の学習ができるようになっています。
実際のプログラムを書くためのエディタなどの環境を一切用意することなく、実践的に手を動かして学ぶことができます。
Progateでの学習方法

Progateではまず、上記のようなスライドで基本的な事項を学びます。
一つ一つに図が入っているので、初心者でもかなり理解しやすいと思います。

次はスライドで理解してことを実際にコードを書いて理解を深めます。
左側にどのようにかけばいいかのヒントが書いているのであまり詰まることなく進めるでしょう。
わからなければスライドに戻って確認できますしね!
右側には答えの画面と、異聞が今作っている画面がどんな感じかを比べて表示しています。
HTMLの楽しいところは自分の書いたコードがすぐに画面の結果となって理解できるってことですね。
次が大事なステップ「道場コース」です。
僕はこのコースをやった時に愕然としました。
今までは、習った知識に対して指示に従いながらコードをちょこちょこ書くという感じでした。
道場コースではその習ったことの内容を一から自分でコードを書きます。
今まではサクサクと学習を進められていたのに、詰まる・・。
習ったことをすぐその場で書くだけだったので「理解したつもり」になっていたんですね。
あるいはその時は理解していてもすぐに忘れてしまっています。
なのでこの道場コースでは一からコードを書くということもあり、かなり頭を使っているという実感がありました。
しかし、プログラミングの学習でも他の学習でも言えることですが、この「何もない状態から答えを探す」というのは非常に有効な勉強方法だと言えます。
Progateでは、そのあたりをしっかり理解しているなあと実感できました。
それでProgateは無料のサービスなの・・?
Progateでは、最初のコースを無料で閲覧することができ、全てのサービスを閲覧するのには料金が発生します。
その料金は月額980円です。
書籍一冊文よりも安いにもかかわらず、その内容の充実度、また実践的に学習ができることを考えるとよっぽどコスパは高いかなと思います。
無料でやれる部分も結構あるので、とりあえずその部分をやって観てから「自分に合っているな」と思えば有料の方でがっつりやればいいかなと思います。
Progateで最速でHTML/CSSをマスターしよう
個人的には、「時間をかけてコツコツHTML/CSSをマスターしよう」とするのはしんどいかなと考えています。
基本的な文法を時間をかけてやっていても結局そんなものは忘れていきますし、つまらないです。
Progateでは手を動かしながらサイトを作る練習ができます。
それにサクサク進められて楽しいです!
プログラミングを全く知らないバイト先の友人に勧めてみたのですが、「楽しくて深夜3時くらいまでやっちゃった」というストーリーをあげていました(笑)
なので時間のある時に「ガッ」と集中してHTML/CSSをマスターしてみてはどうでしょうか??
Progateならきっとそれを達成できます。
ここまで読んでいただきありがとうございました!ではでは!