HTML/CSSを勉強したいんだけど、学習方法が分からない。最近はスクールや学習用のWebサイトがあるからお金を払うべきかなあ。 完全プログラミング初心者だけど、どうやって学習を進めるべきだろう？
こんな疑問に答えていきたいと思います。なお、この記事の学習方法は僕が実際に勉強してきた方法を改良したものになりますのでご了承ください。
本記事の内容は以下の目次のようになります。
HTML/CSSの基礎は無料で学べる
結論から言うとHTML/CSSの基礎は無料で学べます。最近はいろいろなプログラム学習用のWebサービスがあります。例えば、
などいろいろありますが、これらのサイトは1部が無料で使えます。無料と言っても基礎の学習は充実していますので、安心です。
これから学習しようと思って、いきなり入門書、技術書を買ったり、プログラミングスクールに入校するのも1つの手ですがお金を出してから「面白くなかった」、「自分には向いてないからあきらめる」となるとお金が勿体無いですよね。なので最初はこの記事の流れに沿って学習して、その後もプログラムを続けようと思った時にまた考えれば良いと思います。
HTML/CSSの学習の流れと期間
HTML/CSS学習の環境構築
HTML/CSSに限らずプログラミングを学習するためにはプログラムを書いて実行できる環境を作る必要があります。学習する環境を準備するには主に以下の2つの方法があります。
- オンライン実行環境を利用する
- 自分でローカル環境を整える
ローカル環境を整えるのが面倒な方は以下のサイトを利用しましょう。ただ、今後のことも考えると自分で環境を整えることを個人的にはお勧めします。
HTML/CSSのローカル環境を構築する方法ですが、大まかな流れを書くと
- テキストエディタをダウンロード
- コードを保存するための作業フォルダを作成
の２つだけです。後は実際にコードを書いて、ブラウザに結果を表示させるだけです。
具体的な方法は以下のサイトに詳しく書かれていますので、参考にしてください。
ドットインストールでHTML/CSSの基礎学習1
まずはドットインストールで基礎学習をしていきます。僕がドットインストールをお勧めする理由は以下になります。
- 無料で学べる量が多い
- 動画であるため、学習で躓きにくい
- 文字を読むのとは違う刺激のため、頭に残りやすい
- 動画1本が3分程度のため集中して学習できる
まずは以下のリンクからHTMLとCSSの基礎学習を始めましょう。
HTML→CSSの順で勉強してください。この過程を2，3日で終わらせましょう。この時はまだ実際にコードを書かなくても良いです。もちろん気になる方は書いてもいいです。ただ、短い期間で終わらせることが大切です。
理解レベルとしては「あぁ、なんかこういう感じかぁ」ぐらいで大丈夫です。
この時に完璧に理解しようとしなくて良いです。むしろ完璧に理解しようとすると挫折するので、7割くらい分かる感覚でOKです。
W3SchoolsでHTML/CSSの基礎学習2
次はW3Schoolsというサイトを使って学習していきます。
このサイトはいろいろなプログラミング言語を無料で学べるサイトです。ただ英語サイトのため、あまり日本では知名度は高くないかもです。
英語サイトと思って敬遠する方もいるかもしれませんが、とても分かりやすい英語で書かれているのでスラスラ読めます。そのまま読めなくても、Google翻訳を使えば大丈夫です。
また、ドットインストールとは違い文章で書かれているため、動画とは違う刺激になるため頭に残りやすいと思います。
それでは以下のリンクからHTMLの学習を始めましょう。
この時から実際に手を動かしながら学習していきましょう。今まで分かったと思っていた所でエラーが出たり、勘違いをしていたことに気づけると思います。
ちなみにHTML Formsまで終わらせればOKです。出来れば1，2日で終わらせましょう。
次はCSSの学習です。以下のリンクから学習していきましょう。
量は多いですが、CSS TutorialとCSS Advancedの両方とも終わらせましょう。
ここでも実際に手を動かしながら学習していきます。ここでも自分が理解できたと思ったところでエラーが出たりすると思いますが、頑張って学習していきましょう。
目標は2日で終わらせましょう。
HTML/CSSを使ったWebサイトの作り方を学ぶ
さて、ここまで学んできた方はHTML/CSSの基礎知識を習得しました。 ここまでである程度細かい変更などは出来るようになっていると思います。ただ、Webサイト全体を0から作るとなると具体的な方法や手順がまだ分からないと思います。
ですので、ここでは実際にWebサイトを作るための橋渡しとしてドットインストールを使って学習していきます。
以下のリンクから学習していましょう。
上記のサイトから実際の作成の流れが学べると思います。気になる点があれば実際に手を動かしながら学んでいきましょう。
目標は１日で終わらせましょう。
HTML/CSSを使ってWebサイトを実際に作る
ここまででHTML/CSSを使ったWebサイトの作り方の知識は手に入ったと思います。後は足りない経験値を補うだけです。経験値は実際にWebサイト作って積みましょう。
作成していくサイトは以下になります。
このサイトをお勧めする理由は以下の通りです。
- １カラムで作りやすい
- 特定の条件でポートフォリオにしても良い
結構な量があるので、できるところまで頑張って作りましょう。
この段階では動的な動作は気にせず、見た目だけ模写していきましょう。
このパートは１週間くらいかけてじっくり作りましょう。分からないところは自分でググりながらやることで、新しい知識と今までの知識が定着していくと思います。
ここまででHTML/CSSの基礎知識と経験はついたはずです。早い人は２週間ほどでたどり着けるでしょう。
この後はJavaScriptなどのフロントエンドについて勉強しても良いですし、PHPやRubyなどのバックエンドを学習しても良いと思います。
ここまで頑張った方はお疲れ様です。初めてのことだらけで大変だったはずですが、ここまでやり遂げた中で培った経験は今後のプログラミング学習でも必ず生きていくはずです。
