プログラミング

【プログラミング】HTMLとCSSを独学する3ステップ

【プログラミング】HTMLとCSSを独学する3ステップ
Webページを作ってみたい人
「Webサイトを作れるようになりたいのでプログラミングを勉強したい。まずはHTMLとCSSから勉強を始めようと思っているが、どういった手順で勉強を始めたら良いのだろう?HTMLとCSSを独学で習得する方法を教えて欲しい。
また、勉強するときに注意することがあれば合わせて知りたい。」

 

今回はそういった悩みを解決します。

 

本記事の内容

  • HTMLとCSSを独学する3ステップ【初心者でもOK】
  • 【コツ】HTMLとCSSのスキルを爆上げする方法

 

記事の信頼性

この記事を書いている私はエンジニア歴8年で、業務系のWebサイトを開発した経験があります。

その際に必要となったHTMLとCSSの知識は独学で習得しました。

ですので、私がHTMLとCSSを独学した方法やノウハウ、スキルを上げるコツなどを紹介できます。

 

この記事ではWebサイトを作成するために必要なHTMLとCSSを独学で習得する3ステップを紹介します。

合わせて、HTMLとCSSのスキルを爆上げする方法について、現役エンジニアがコツを紹介します。

この記事のとおりに独学することで、プログラミング初心者でもWebサイトが一通り作れるようになります。

 

HTMLとCSSを独学する3ステップ【初心者でもOK】

HTMLとCSSを独学する3ステップ【初心者でもOK】

HTMLとCSSを独学するには次の3ステップに従って勉強を進めるのがオススメです。

  1. Progateで基本を学ぶ
  2. 本を使って「実際のWebページの作り方」を学ぶ
  3. Udemyを使って実践的なスキルを学ぶ

Progateで基本を学ぶ

まずはProgateを使ってHTMLとCSSの基礎を身につけます。

Progateとは、インターネット上で様々なプログラミング言語の基本を勉強することができるサービスです。

スライドを使って知識をインプットし、その後の演習で実際にコードを書くことでスキルを定着することができる学習スタイルです。

html&css独学-progate-1

html&css独学-progate-2

1回のレッスンはスライド5枚程度のボリュームなので、短い時間でサクサクと学習を進めることができます。

また、インターネットに接続したブラウザだけで学習が全て完結するので、Webサイトを作るための初期設定などが不要であり、プログラミング初心者でもつまづくことなく学習を開始できます。

レッスンを繰り返すとレベルが上がっていく要素があり、ゲーム感覚で楽しく続けられます
ドナ

HTML&CSSコースは全部で6レッスン

ProgateのHTML&CSSコースは全部で6レッスンです。

ゼロから学べる学習コースが3つと、学習コースで学んだ内容を実践する道場コースの3つです。

ProgateのHTML&CSSコース

  • 学習コース:初級編・中級編・上級編
  • 道場コース:初級編・中級編・上級編

学習の進め方は、Progate公式がオススメしている通り、次の流れでOKです。

HTML&CSSコースの進め方

学習コースの初級・中級⇒道場コースの初級・中級⇒学習コースの上級⇒道場コースの上級

1周だと全然わからないと思うので、2,3週すると良い感じです。

月額980円の定額制

Progaeレッスンの最初は無料で、途中から月額980円の定額制になります。

HTML&CSSコースの場合は、学習コースの初級コースは無料で学べて、残りは月額会員に申し込んでから学びます。

ぶっちゃけ、月980円で学べるのは控えめに言ってめちゃくちゃお得です。

専門書は1冊3000円ぐらいするので、それと比べると1/3の値段です。

それでいて勉強ボリュームも十分あり、契約中は何回でも復習できるので、使わない手はないです。

「勉強しようかな・・・」と考えている人は、悩んでいるくらいならさっさと申し込んで勉強を始めてしまいましょう。

Progateでできるようになること

Progateを使ってHTML&CSSを学習すると次のことが分かります。

Progateでできるようになること

  • プログラミングの雰囲気がどんな感じかわかる
  • Webページの構造がなんとなくわかる

Progateの段階では、「なんとなくプログラミングってこんな感じか~」と思えるだけでOKです。

あまり最初から理解しようとしすぎると普通に挫折するので、とりあえずやってみるのが一番大事ですね。

本を使って「実際のWebページの作り方」を学ぶ

Progateで基礎を身につけた次は、本を使って実際のWebサイトの作り方を学びます。

Progateで基礎を身につけたことによって自分が作りたいWebページをある程度作ることができるようになりました。

ただ、実際のWebサイトを作るためには複数のページを組み合わせて作るのですが、一連の作る流れはやってみないとわからないことが多いです。

また、Progateはブラウザでコードが書けるのですが、実際にはブラウザでコードを書くことなんてないので、テキストエディタでコードを書くのに慣れることが必要です。

学習サイトだけだと1つのサイト作成まで全て学ぶことは難しいんですよね。
ドナ

そういった課題を克服するために、本を使って実際のWebページ作成の流れを学習します。

私が実際に学習に使った本の中でオススメできるのは次の2つです。

 

本を使った学習でできるようになること

  • 複数ページからなるWebサイトの作り方が分かる
  • 実践的なWebデザインが分かる
  • 自分の開発環境を作ってコードが書けるようになる

Udemyを使って実践的なスキルを学ぶ



最後の仕上げに、Udemyを使って開発現場で使えるより実践的なスキルを学びます。

Udemyは実際のエンジニアが講師の動画を購入し、学習を進めることができる学習サイトです。

プログラミング言語の情報は常に進化していて、学習サイトや書籍だけでは最新の情報がキャッチアップできないケースがあります。

その点、Udemyは現役エンジニアが講師を務めているため、現場で使われている最新の情報を習得することができるので、即戦力クラスのスキルを身につけることが出来ます。

Udemyを使って実践的なスキルを学ぶ

例えば以下のコースでは、より実践的なHTMLとCSSを学ぶことができ、モダンなWebデザインを作成することができるようになります。

フロントエンドエンジニアになりたい人の Webプログラミング入門

もし動画の内容が合わなかった場合、30日間の返金保証もあるので、試してみると良いですね。
ドナ

【コツ】HTMLとCSSのスキルを爆上げする方法

【コツ】HTMLとCSSのスキルを爆上げする方法

Progateや本で一通りスキルを身につけたら、次はスキルを磨き上げる作業を行います。

ここでは、HTMLとCSSのスキルを爆上げする方法やコツについて、現役エンジニアがこっそりと紹介します。

具体的には次の2つの方法を使ってみてください。

  1. 模写する
  2. わからないことがあってもどんどん作ってみる

模写する

まずは既にあるサイトを真似して作ってみる、すなわち模写するのがおすすめです。

実際にWebページやWebサイトをゼロから作ってみましょう!とはいっても、いきなりゼロからは作れないと思います。

そこで、すでに世の中にあるWebページを1ページだけ真似して作ってみましょう。

例えば、Webデザインギャラリーというページに色んなデザインのページがまとめられています。

この中から自分が作れそうなページや魅力的に感じたページをピックアップして模写してみると良いでしょう。

 

あまり複雑なものにしすぎると途中で挫折するので、なるべくシンプルで自分でも作れそうなサイトの模写から始めてくださいね
ドナ

わからないことがあってもどんどん作ってみる

「まだ知識が不足しているから全然作れないよ・・・」

という不安は全て捨て去って、わからないことがあってもどんどん作ってみてください。

というのも、世の中のWebページを作成している人がHTMLとCSSの知識を全て理解しているかというと、そんなことはありません。

私も知りません(笑)
ドナ

ではどうしているかというと、分からないことは都度調べながら作成しています。

実際に自分でページを作ってみるとわからないことがたくさん出てくるはずです。

「このレイアウトってどうやって作るの?」とか「思い通りに作れないんだけど…」という感じです。

その都度調べていくことで着実にスキルアップしていきます。

プログラミングの世界で大切なことは、コードの書き方を暗記することではなく、調べ方がわかっていることです。むしろ、コードを書いている時間より調べている時間の方が長いと思います。

プログラミングでは、この「自分で解決する力」がすごく大事です。

どんどんチャレンジしてみてください。

参考

HTMLとCSSを書く上でわからないことは、次のサイトを見ればなんとなくわかります。

まとめ:HTMLとCSSは意外と簡単

まとめ:HTMLとCSSは意外と簡単

ということでHTMLとCSSを独学する手順を紹介しました。

HTMLとCSSは比較的簡単で独学しやすいので、初めてプログラミングを学習しようとする人でも習得しやすいです。

なによりHTMLとCSSはわかりやすいし、見た目を作る言語なので触ってて楽しいです。

この記事で紹介した内容を参考に、プログラミングによるものづくりの楽しさを味わってみてください!

 

あとは行動あるのみ。すぐにHTML&CSSの学習を始めよう

とは言いながらも、実際に行動に移す人は100人いたら5人ぐらいだと思います。

何かを始める時には「やってみようかなぁ…」と悩んでる時間が多くなりがちです。

残念ですが、悩んでいるだけでは何のスキルもみにつきません。

Web製作のスキルは身に着けておいて損はないので、気になったらすぐ学習を始めてみましょう。

-プログラミング