「Webサイトを作れるようになりたいのでプログラミングを勉強したい。まずはHTMLとCSSから勉強を始めようと思っているが、どういった手順で勉強を始めたら良いのだろう？HTMLとCSSを独学で習得する方法を教えて欲しい。
また、勉強するときに注意することがあれば合わせて知りたい。」
今回はそういった悩みを解決します。
本記事の内容
- HTMLとCSSを独学する３ステップ【初心者でもOK】
- 【コツ】HTMLとCSSのスキルを爆上げする方法
記事の信頼性
この記事を書いている私はエンジニア歴８年で、業務系のWebサイトを開発した経験があります。
その際に必要となったHTMLとCSSの知識は独学で習得しました。
ですので、私がHTMLとCSSを独学した方法やノウハウ、スキルを上げるコツなどを紹介できます。
この記事ではWebサイトを作成するために必要なHTMLとCSSを独学で習得する３ステップを紹介します。
合わせて、HTMLとCSSのスキルを爆上げする方法について、現役エンジニアがコツを紹介します。
この記事のとおりに独学することで、プログラミング初心者でもWebサイトが一通り作れるようになります。
HTMLとCSSを独学する３ステップ【初心者でもOK】
HTMLとCSSを独学するには次の３ステップに従って勉強を進めるのがオススメです。
- Progateで基本を学ぶ
- 本を使って「実際のWebページの作り方」を学ぶ
- Udemyを使って実践的なスキルを学ぶ
Progateで基本を学ぶ
まずはProgateを使ってHTMLとCSSの基礎を身につけます。
Progateとは、インターネット上で様々なプログラミング言語の基本を勉強することができるサービスです。
スライドを使って知識をインプットし、その後の演習で実際にコードを書くことでスキルを定着することができる学習スタイルです。
１回のレッスンはスライド５枚程度のボリュームなので、短い時間でサクサクと学習を進めることができます。
また、インターネットに接続したブラウザだけで学習が全て完結するので、Webサイトを作るための初期設定などが不要であり、プログラミング初心者でもつまづくことなく学習を開始できます。
HTML&CSSコースは全部で６レッスン
ProgateのHTML&CSSコースは全部で６レッスンです。
ゼロから学べる学習コースが３つと、学習コースで学んだ内容を実践する道場コースの３つです。
ProgateのHTML&CSSコース
- 学習コース：初級編・中級編・上級編
- 道場コース：初級編・中級編・上級編
学習の進め方は、Progate公式がオススメしている通り、次の流れでOKです。
HTML&CSSコースの進め方
学習コースの初級・中級⇒道場コースの初級・中級⇒学習コースの上級⇒道場コースの上級
１周だと全然わからないと思うので、２，３週すると良い感じです。
月額９８０円の定額制
Progaeレッスンの最初は無料で、途中から月額９８０円の定額制になります。
HTML&CSSコースの場合は、学習コースの初級コースは無料で学べて、残りは月額会員に申し込んでから学びます。
ぶっちゃけ、月９８０円で学べるのは控えめに言ってめちゃくちゃお得です。
専門書は１冊３０００円ぐらいするので、それと比べると1/3の値段です。
それでいて勉強ボリュームも十分あり、契約中は何回でも復習できるので、使わない手はないです。
「勉強しようかな・・・」と考えている人は、悩んでいるくらいならさっさと申し込んで勉強を始めてしまいましょう。
Progateでできるようになること
Progateを使ってHTML&CSSを学習すると次のことが分かります。
Progateでできるようになること
- プログラミングの雰囲気がどんな感じかわかる
- Webページの構造がなんとなくわかる
Progateの段階では、「なんとなくプログラミングってこんな感じか～」と思えるだけでOKです。
あまり最初から理解しようとしすぎると普通に挫折するので、とりあえずやってみるのが一番大事ですね。
本を使って「実際のWebページの作り方」を学ぶ
Progateで基礎を身につけた次は、本を使って実際のWebサイトの作り方を学びます。
Progateで基礎を身につけたことによって自分が作りたいWebページをある程度作ることができるようになりました。
ただ、実際のWebサイトを作るためには複数のページを組み合わせて作るのですが、一連の作る流れはやってみないとわからないことが多いです。
また、Progateはブラウザでコードが書けるのですが、実際にはブラウザでコードを書くことなんてないので、テキストエディタでコードを書くのに慣れることが必要です。
そういった課題を克服するために、本を使って実際のWebページ作成の流れを学習します。
私が実際に学習に使った本の中でオススメできるのは次の２つです。
本を使った学習でできるようになること
- 複数ページからなるWebサイトの作り方が分かる
- 実践的なWebデザインが分かる
- 自分の開発環境を作ってコードが書けるようになる
Udemyを使って実践的なスキルを学ぶ
最後の仕上げに、Udemy
を使って開発現場で使えるより実践的なスキルを学びます。
Udemyは実際のエンジニアが講師の動画を購入し、学習を進めることができる学習サイトです。
プログラミング言語の情報は常に進化していて、学習サイトや書籍だけでは最新の情報がキャッチアップできないケースがあります。
その点、Udemyは現役エンジニアが講師を務めているため、現場で使われている最新の情報を習得することができるので、即戦力クラスのスキルを身につけることが出来ます。
例えば以下のコースでは、より実践的なHTMLとCSSを学ぶことができ、モダンなWebデザインを作成することができるようになります。
フロントエンドエンジニアになりたい人の Webプログラミング入門
【コツ】HTMLとCSSのスキルを爆上げする方法
Progateや本で一通りスキルを身につけたら、次はスキルを磨き上げる作業を行います。
ここでは、HTMLとCSSのスキルを爆上げする方法やコツについて、現役エンジニアがこっそりと紹介します。
具体的には次の２つの方法を使ってみてください。
- 模写する
- わからないことがあってもどんどん作ってみる
模写する
まずは既にあるサイトを真似して作ってみる、すなわち模写するのがおすすめです。
実際にWebページやWebサイトをゼロから作ってみましょう！とはいっても、いきなりゼロからは作れないと思います。
そこで、すでに世の中にあるWebページを１ページだけ真似して作ってみましょう。
例えば、Webデザインギャラリーというページに色んなデザインのページがまとめられています。
この中から自分が作れそうなページや魅力的に感じたページをピックアップして模写してみると良いでしょう。
わからないことがあってもどんどん作ってみる
「まだ知識が不足しているから全然作れないよ・・・」
という不安は全て捨て去って、わからないことがあってもどんどん作ってみてください。
というのも、世の中のWebページを作成している人がHTMLとCSSの知識を全て理解しているかというと、そんなことはありません。
ではどうしているかというと、分からないことは都度調べながら作成しています。
実際に自分でページを作ってみるとわからないことがたくさん出てくるはずです。
「このレイアウトってどうやって作るの？」とか「思い通りに作れないんだけど…」という感じです。
その都度調べていくことで着実にスキルアップしていきます。
プログラミングの世界で大切なことは、コードの書き方を暗記することではなく、調べ方がわかっていることです。むしろ、コードを書いている時間より調べている時間の方が長いと思います。
プログラミングでは、この「自分で解決する力」がすごく大事です。
どんどんチャレンジしてみてください。
参考
HTMLとCSSを書く上でわからないことは、次のサイトを見ればなんとなくわかります。
- HTMLクイックリファレンス ：専門的
- サルワカ ：初心者向け
まとめ：HTMLとCSSは意外と簡単
ということでHTMLとCSSを独学する手順を紹介しました。
HTMLとCSSは比較的簡単で独学しやすいので、初めてプログラミングを学習しようとする人でも習得しやすいです。
なによりHTMLとCSSはわかりやすいし、見た目を作る言語なので触ってて楽しいです。
この記事で紹介した内容を参考に、プログラミングによるものづくりの楽しさを味わってみてください！
あとは行動あるのみ。すぐにHTML&CSSの学習を始めよう
とは言いながらも、実際に行動に移す人は１００人いたら５人ぐらいだと思います。
何かを始める時には「やってみようかなぁ…」と悩んでる時間が多くなりがちです。
残念ですが、悩んでいるだけでは何のスキルもみにつきません。
Web製作のスキルは身に着けておいて損はないので、気になったらすぐ学習を始めてみましょう。