プログラミング学習法

初心者がHTML/CSSを勉強するベストプロセス【2020年更新版】

Awesome Ars Academia(旧 フランジアのIT留学)では、多くのベンチャー・スタートアッププロダクト開発で使われる2大巨塔とも呼べる「Ruby/Ruby on Rails」や「PHP/Laravel」などを実践的に学べる海外プログラミングスクールを提供しています。

ですが、それ以前にWeb系のプログラミングを学び始める多くの方はまず、「HTML/CSS」の学習から始めることになるでしょう。

厳密にはこれら「HTML/CSS」は、プログラミング言語ではありませんが、文法構造を持った言語の記述によってウェブページの見た目を制御するという直感性の高さから、「プログラミング学習の一段手前」として、プログラマーとなるための準備学習として必須です。

弊社Awesome Ars Academiaの学習でも、1週間ほど、HTML/CSSについて学ぶ(おさらいする)期間は設けておりますが、このあたりの知識は独学でも簡単に身につけられるものであるため、プログラミングスクールを検討する前に学習しておく方が良いでしょう。

今回の記事では、そんなプログラミング学習開始の一歩手前、「HTML/CSSを独学するベストプロセス」として、弊社の方でおすすめする独学プロセスをご紹介いたします。


プログラミング学習をするにあたって大切な3つのステップ

以前公開させていただいた『初心者がPHPを勉強するベストプロセス【2020年更新版】』『初心者がRuby on Railsを勉強するベストプロセス【2020年更新版】』などでも紹介させて頂いたのですが、大切な学習への考え方なので、こちらでも再度紹介させて頂ければと思います。
私たちは、プログラミングの学習の特に初期段階においては、下記の3つのステップが非常に大切だと考えています。
それは、
  1. 見よう見まねでとりあえず動かしてみるハンズオン学習
  2. 理論や概念などの理解を深める概念学習
  3. 理解した内容をベースに作りたいものを作り上げようとする実践・演習学習
という3段階のステップです。
以下、次の具体的な学習サポート内容の中では、この3つのステップに対応する形で、各おすすめ学習方法を紹介させて頂ければと思います。

初心者がHTML/CSSを勉強するベストプロセス 2020年更新版

さて、ではここからが本題の「初心者がHTML/CSSを勉強するベストプロセス 2020年更新版」です。

HTML/CSS学習の第一段階 - ハンズオン学習編

 

毎度の登場で大変恐縮なのですが、ここでもまず初心者の第一ステップとして弊社がおすすめするのはProgateです。
どこに行っても、最初の一歩としてのProgateのパワーは圧倒的です。まずはProgateからやりましょう。実際弊社のマネージャーは、Progateの海外支社長や役員と友人ですが、本当に彼らは「初心者が楽しく・躓かずに学習を開始できるために質の高いコンテンツを作ること」に対する思い入れが強いですし、実際にわかりやすいです。
「まずはProgateから始めてみる」は、鉄板として考えて良いでしょう。

ただ、こちらも毎度付言する注意点なのですが、Progateだけをやっても「現場での戦力には全くならない」というのも理解しておきましょう。
Progateさんの素晴らしいところは、まず最初の一歩を楽しみながらスタートできる、というところの価値だと思います。
そのため「第一歩としてのみ」Progateを認識し、Progateだけをやって満足しては、次のステップにいけない、ということも理解しておいてください。

上記注意点を認識していただいた上で、まず第一歩としてやるべきProgateのコンテンツは下記となります。
下記のコンテンツは、有料箇所もあるかと思いますが、必ず1周やりきりましょう。
実際、初めての方が1周やっただけだとなんとなく終わってしまうので、2周やってみるのがおすすめです。

・HTML&CSS: https://prog-8.com/languages/html

また、HTML/CSSだけに絞ると、Progateだけだと基礎学習が充分な分量がありません。
そのため、Progate終了後は、ドットインストールで下記の4つを、お使いのマシンに合わせてやってみてください。

・HTML/CSSの学習環境を整えよう [Windows編]
https://dotinstall.com/lessons/basic_pcsetup_win

・HTML/CSSの学習環境を整えよう [macOS編]
https://dotinstall.com/lessons/basic_pcsetup_mac

・はじめてのHTML
https://dotinstall.com/lessons/basic_html_v4

・はじめてのCSS
https://dotinstall.com/lessons/basic_css_v4

 

HTML/CSS学習の第二段階 - 概念学習・理解深化編

次に、第1段階を通じてなんとなくHTML/CSSを理解した方は、より理解を深めていくために、書籍を利用して、より細かな概念を拾いながら、学習を深めていくことが重要です。
Awesome Ars Academiaでは、この段階の1冊目の書籍として、『よくわかるHTML5+CSS3の教科書【第三版】』をおすすめしています。
本書籍では、現在主流のHTML5, CSS3とは何か、というのを、HTML4などの旧バージョンとの比較などにも触れながら解説があり、その上で各種タグなどの意味を一つ一つきちんと押さえながら理解を深めていくことができるようになっています。
また、今回紹介している第三版では、きちんと最新のトレンドを押さえた書き方なども紹介しているので、基礎知識・基礎理解としてうまく全体像を掴むことができる書籍になっています。

 

また、こちらもより理解度を深めるために、ドットインストールから下記の2つのコースを平行で学習されるのもおすすめです!

・HTML基礎文法入門
https://dotinstall.com/lessons/basic_html_tags
・CSS基礎文法入門
https://dotinstall.com/lessons/basic_css_styles

 

HTML/CSS学習の第三段階 - 実践・演習編

そして、第三段階としては、第一・第二段階を経て、基礎的な理解を身に付けて頂いたため、より多くの実践的なアウトプットをすることによって、知識の定着と応用力を身に付けて行きます。その際、HTML/CSSにおいて、Awesome Ars Academiaがおすすめするのは下記の2つのプロセスになります。

1つ目は、さらなるアウトプットとしてドットインストールから下記の2つのコースをやってみるのがおすすめです。
・実践!ウェブサイトを作ろう
https://dotinstall.com/lessons/website_html_v3
・実践!スマートフォンサイトを作ろう
https://dotinstall.com/lessons/spsite_html

上記2つのコースを通じて、実際に基本的なレイアウトをもったウェブページを作ってみる経験を、パソコン・スマートフォン双方に向けて経験することができます。

2つ目は、上記簡単な演習をやった上で、さらに本格的な3つのパターンのレイアウトを実際にコーディングして、より演習的に学ぶことができる『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』という書籍をやってみるのがおすすめです。
本書を見ながら3パターンのレイアウトのコーディングを実現できるのですが、この3パターンのコーディングができれば、簡単なウェブサイトのコーディングスキルは充分に身につきます。

特に、ちょっとした小銭を稼ぎたい、というときによくあるのが「縦に長いランディングページのコーディング」というようなお仕事なのですが、まさにそんなランディングページをスマホ対応したレスポンシブでコーディングする、という題材もあったりするので、アウトプット・演習型の学習コンテンツとしてのこの書籍は非常に良い題材となるかと思います。
おそらく、ここまで学習した内容を「使いこなせる」という風になれば、月に5万円ほどの収入をちょっとしたコーディングのお仕事を引き受けることで得られる、というスキルも実現可能になってきているかもしれません。

これであなたもフリーランスのコーダー?

上記ちょっとしたお金も稼げるスキルを身につけられるかも?というお話を書かせていただいたのですが、実際にHTML/CSSを利用した簡単なコーディング仕事はここまでのスキルで少しはできるようになっているかもしれません。ですが、これはIT業界からすると、本当に雑務で誰にやってもらっても良い、というちょい仕事ができるようになった、という本当に初歩の初歩のスキルだと言えるでしょう。

HTML/CSSという観点でさらなるスキルアップをするためには、Bootstrap4などに代表される、より簡単にキレイなレイアウトやデザインを実現できるCSSフレームワークを使いこなせるようになっていく必要があります。

(たとえば、おすすめ書籍だと『Bootstrap 4 フロントエンド開発の教科書』などはオススメです)

また、そのあたりが使いこなせるようになったとしても、まだまだお仕事としては「コーダー」というレベルですし、個人としてちょっとしたWebページ作成ができる、というところまでのスキルが身に付けられる、というところが限界となってしまいます。

実際に「エンジニア」という仕事を「チームとして実施できる」という風になっていくためには、

  • HTML, CSSのより正しい設計とは何かという観点はまだまだ身についていない
  • チームで開発するために必須となる周辺知識、ツールの理解は全く身についていない
  • 現場の仕事で必要とされる「美しいコード」「他のエンジニアが読みやすいコード」というような作法はまだ学べていない
  • チーム開発を実際にするための開発プロセス論の知識もない(アジャイル開発など)
  • 個人でやっていくにしてもWordPressなどの知識くらいはさらに身につける必要がある

など、まだまだ身につけるべきスキルが沢山ある形になります。

 

個人でちょっとしたフリーランスで稼いでいくことを目的とされる方は、ここで学んだスキルにCSSフレームワークなどの知識を身に付けながらWordPressの運用方法などを学び、ウェブマーケティングの手法などを学んでいけば、ちょっとしたフリーランスの仕事を受けていく、ということはできるようになるかもしれません。

他方で、自身の開発したプロダクトや、「エンジニアとして」より本格的なスキルを身に付けていきたい、という方は、

  • 「JavaScriptのスキルを身に付けて、フロントエンドエンジニアと呼ばれる、よりレベルの高いスキルセットを持った人材を目指していく」
  • 「PHP/Laravelや、Ruby/Ruby on Railsなどのフレームワークなどのスキルを身に付けて、バックエンドエンジニアとしてエンジニアスキルを高めていく」

など、よりハイレベルなスキルアップを図っていく必要があります。

ではどうすれば良いのか?

このさきは、目指す方向によってやるべきことが変わってくるのではないか、というのがAwesome Ars Academiaでは考えています。既に上述したとおり、「ちょっとしたフリーランスの仕事をしていく」ということをゴールとして目指されるのであれば、ここから先をさらに独学で、WordPressの使い方、ウェブマーケティングの手法(特にSEO)、よりレベルの高いコーディングスキル・CSSフレームワークスキル、などを身につけることで、低額フリーランス領域の仕事を取っていくことはできるかと考えています。

他方で、イケてるITベンチャーなどで働ける「エンジニア」を目指していくのであれば、PHP, Ruby, JavaScript, Pythonなどのような「プログラミング言語の学習」へさらに学習の幅を広げていき、Webサイトを作れるだけのスキルセットから「プログラマー・エンジニア」と呼ばれる領域に学習を広げていく必要があるでしょう。

 

そして、そんな「プログラミング・エンジニアリング」の学習の第一歩も、もちろん独学からスタートした方が費用対効果が良いでしょう。

才能があり、楽しめる方であればスクールに入る必要はありませんし、才能がない方であれば「どういう目的を達成するためにどういうことをスクールに求めるか」を明確にするためにも、一定独学でチャレンジしておく方が、より良いスクール選択をできるようになることは間違いありません。

Awesome Ars Academiaとしては、多くの初学者の方により良い選択をしてもらえればと思っています。

まず独学でWeb制作・プログラミングを始めよう、と思ってこのサイトにたどり着かれた方がいらっしゃいましたら、まずはお気軽にキャリア相談のつもりでも大丈夫ですので、

無料の個別カウセリング

まで、お問い合わせ頂ければ嬉しく思います。

 

実際のカウンセリングや説明会は、弊社の教育事業マネージャーが直接対応させていただきます。

25歳文系出身からエンジニアとしてキャリアを積み、起業家とのネットワークも広く、今や海外ブランチ運営を任せられているマネージャーです。

また、多くの上場IT企業の新人研修を日本語・英語双方で委託されるなど、エンジニア育成・研修のプロでもあります。

留学の詳細やセブ島での生活について、実際にエンジニアとして働いていたからこそのアドバイスなど多岐にわたるお話ができると思います。

今後プログラミング学習を開始されるみなさまの一助になれますと幸いです。

LINEからの簡単問合せはこちら ⇒ LINEでのお問い合わせはこちら
無料カウンセリング予約はこちら ⇒ https://awesome-ars-academia.net/online-counseling/
Awesome Ars Academiaへのお問い合わせはこちら ⇒ https://awesome-ars-academia.net/contact/
Awesome Ars Academiaの資料請求はこちら ⇒ https://awesome-ars-academia.net/material/