【無料】HTML/CSSを独学で学習する方法

プログラム学習法

HTML/CSSを勉強したいんだけど、学習方法が分からない。最近はスクールや学習用のWebサイトがあるからお金を払うべきかなあ。  完全プログラミング初心者だけど、どうやって学習を進めるべきだろう?

こんな疑問に答えていきたいと思います。なお、この記事の学習方法は僕が実際に勉強してきた方法を改良したものになりますのでご了承ください。

本記事の内容は以下の目次のようになります。

スポンサーリンク

HTML/CSSの基礎は無料で学べる

結論から言うとHTML/CSSの基礎は無料で学べます。最近はいろいろなプログラム学習用のWebサービスがあります。例えば、

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
ドットインストール
HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができるプログラミング学習サービスです。
Skillhub[スキルハブ]の講座 | Skillhub[スキルハブ]
テクノロジーを日本一わかりやすく解説するビデオ講座です。

などいろいろありますが、これらのサイトは1部が無料で使えます。無料と言っても基礎の学習は充実していますので、安心です。

これから学習しようと思って、いきなり入門書、技術書を買ったり、プログラミングスクールに入校するのも1つの手ですがお金を出してから「面白くなかった」「自分には向いてないからあきらめる」となるとお金が勿体無いですよね。なので最初はこの記事の流れに沿って学習して、その後もプログラムを続けようと思った時にまた考えれば良いと思います。

HTML/CSSの学習の流れと期間

HTML/CSS学習の環境構築

HTML/CSSに限らずプログラミングを学習するためにはプログラムを書いて実行できる環境を作る必要があります。学習する環境を準備するには主に以下の2つの方法があります。

  • オンライン実行環境を利用する
  • 自分でローカル環境を整える

ローカル環境を整えるのが面倒な方は以下のサイトを利用しましょう。ただ、今後のことも考えると自分で環境を整えることを個人的にはお勧めします。

ブラウザでプログラミング・実行ができる「オンライン実行環境」| paiza.IO
paiza.IOはオンラインですぐにプログラミングが始められる、オンライン実行環境です。Java,Ruby,Python,PHP,Perlなど主要24言語に対応。プログラミング学習にも。

HTML/CSSのローカル環境を構築する方法ですが、大まかな流れを書くと

  • テキストエディタをダウンロード
  • コードを保存するための作業フォルダを作成

の2つだけです。後は実際にコードを書いて、ブラウザに結果を表示させるだけです。
具体的な方法は以下のサイトに詳しく書かれていますので、参考にしてください。

ドットインストールでHTML/CSSの基礎学習1

まずはドットインストールで基礎学習をしていきます。僕がドットインストールをお勧めする理由は以下になります。

  • 無料で学べる量が多い
  • 動画であるため、学習で躓きにくい
  • 文字を読むのとは違う刺激のため、頭に残りやすい
  • 動画1本が3分程度のため集中して学習できる

まずは以下のリンクからHTMLとCSSの基礎学習を始めましょう。

【旧版】はじめてのHTML (全15回) - プログラミングならドットインストール
簡単なプロフィールサイトを作りながらHTMLについて学んでいきます。
【旧版】はじめてのCSS (全17回) - プログラミングならドットインストール
ウェブページの見た目を整えるための言語であるCSSについて学んでいきます。

HTML→CSSの順で勉強してください。この過程を2,3日で終わらせましょう。この時はまだ実際にコードを書かなくても良いです。もちろん気になる方は書いてもいいです。ただ、短い期間で終わらせることが大切です。

理解レベルとしては「あぁ、なんかこういう感じかぁ」ぐらいで大丈夫です。
この時に完璧に理解しようとしなくて良いです。むしろ完璧に理解しようとすると挫折するので、7割くらい分かる感覚でOKです。

W3SchoolsでHTML/CSSの基礎学習2

次はW3Schoolsというサイトを使って学習していきます。

このサイトはいろいろなプログラミング言語を無料で学べるサイトです。ただ英語サイトのため、あまり日本では知名度は高くないかもです。

英語サイトと思って敬遠する方もいるかもしれませんが、とても分かりやすい英語で書かれているのでスラスラ読めます。そのまま読めなくても、Google翻訳を使えば大丈夫です。

また、ドットインストールとは違い文章で書かれているため、動画とは違う刺激になるため頭に残りやすいと思います。

それでは以下のリンクからHTMLの学習を始めましょう。

HTML Tutorial
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML a...

この時から実際に手を動かしながら学習していきましょう。今まで分かったと思っていた所でエラーが出たり、勘違いをしていたことに気づけると思います。

ちなみにHTML Formsまで終わらせればOKです。出来れば1,2日で終わらせましょう。

次はCSSの学習です。以下のリンクから学習していきましょう。

CSS Tutorial
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML a...

量は多いですが、CSS TutorialとCSS Advancedの両方とも終わらせましょう。

ここでも実際に手を動かしながら学習していきます。ここでも自分が理解できたと思ったところでエラーが出たりすると思いますが、頑張って学習していきましょう。
目標は2日で終わらせましょう。

HTML/CSSを使ったWebサイトの作り方を学ぶ

さて、ここまで学んできた方はHTML/CSSの基礎知識を習得しました。 ここまでである程度細かい変更などは出来るようになっていると思います。ただ、Webサイト全体を0から作るとなると具体的な方法や手順がまだ分からないと思います。

ですので、ここでは実際にWebサイトを作るための橋渡しとしてドットインストールを使って学習していきます。

以下のリンクから学習していましょう。

【旧版】実践!ウェブサイトを作ろう (全16回) - プログラミングならドットインストール
アプリを紹介するサイトを制作しながら、HTML/CSSの実践的なテクニックを学んでいきます。

上記のサイトから実際の作成の流れが学べると思います。気になる点があれば実際に手を動かしながら学んでいきましょう。

目標は1日で終わらせましょう。

HTML/CSSを使ってWebサイトを実際に作る

ここまででHTML/CSSを使ったWebサイトの作り方の知識は手に入ったと思います。後は足りない経験値を補うだけです。経験値は実際にWebサイト作って積みましょう。

作成していくサイトは以下になります。

iSara[イサラ]|バンコクのノマドエンジニア育成講座
iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。今なら月15万円稼げるまで永久サポート付きです。

このサイトをお勧めする理由は以下の通りです。

  • 1カラムで作りやすい
  • 特定の条件でポートフォリオにしても良い

結構な量があるので、できるところまで頑張って作りましょう。
この段階では動的な動作は気にせず、見た目だけ模写していきましょう。

このパートは1週間くらいかけてじっくり作りましょう。分からないところは自分でググりながらやることで、新しい知識と今までの知識が定着していくと思います。

ここまででHTML/CSSの基礎知識と経験はついたはずです。早い人は2週間ほどでたどり着けるでしょう。

この後はJavaScriptなどのフロントエンドについて勉強しても良いですし、PHPやRubyなどのバックエンドを学習しても良いと思います。

ここまで頑張った方はお疲れ様です。初めてのことだらけで大変だったはずですが、ここまでやり遂げた中で培った経験は今後のプログラミング学習でも必ず生きていくはずです。

タイトルとURLをコピーしました