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

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

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

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

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

以前公開させていただいた『初心者がPHPを勉強するベストプロセス』『初心者がRuby on Railsを勉強するベストプロセス』などでも紹介させて頂いたのですが、大切な学習への考え方なので、こちらでも再度紹介させて頂ければと思います。

私たちは、プログラミングの学習の特に初期段階においては、下記の３つのステップが非常に大切だと考えています。
それは、

1. 見よう見まねでとりあえず動かしてみるハンズオン学習
2. 理論や概念などの理解を深める概念学習
3. 理解した内容をベースに作りたいものを作り上げようとする実践・演習学習

という３段階のステップです。

以下、次の具体的な学習サポート内容の中では、この３つのステップに対応する形で、各おすすめ学習方法を紹介させて頂ければと思います。

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

 

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

毎度の登場で大変恐縮なのですが、ここでもまず初心者の第一ステップとして弊社がおすすめするのはProgateです。

どこに行っても、最初の一歩としてのProgateのパワーは圧倒的です。まずはProgateからやりましょう。

実際弊社のマネージャーは、Progateの海外支社長や役員と友人ですが、本当に彼らは「初心者が楽しく・躓かずに学習を開始できるために質の高いコンテンツを作ること」に対する思い入れが強いですし、実際にわかりやすいです。

「まずはProgateから始めてみる」は、鉄板として考えて良いでしょう。

ただ、こちらも毎度付言する注意点なのですが、Progateだけをやっても「現場での戦力には全くならない」というのも理解しておきましょう。

Progateさんの素晴らしいところは、まず最初の一歩を楽しみながらスタートできる、というところの価値だと思います。

そのため「第一歩としてのみ」Progateを認識し、Progateだけをやって満足しては、次のステップにいけない、ということも理解しておいてください。

上記注意点を認識していただいた上で、まず第一歩としてやるべきProgateのコンテンツは下記となります。

下記のコンテンツは、有料箇所もあるかと思いますが、必ず１周やりきりましょう。

実際、初めての方が１周やっただけだとなんとなく終わってしまうので、２周やってみるのがおすすめです。

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

また、HTML/CSSだけに絞ると、Progateだけだと基礎学習が充分な分量がありません。

そのため、Progate終了後は、ドットインストールで下記の４つを、お使いのマシンに合わせてやってみてください。

・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学習の第二段階 - 概念学習・理解深化編

次に、第１段階を通じてなんとなくHTML/CSSを理解した方は、より理解を深めていくために、書籍を利用して、より細かな概念を拾いながら、学習を深めていくことが重要です。

Awesome Ars Academiaでは、この段階の１冊目の書籍として、『よくわかるHTML5+CSS3の教科書【第三版】』をおすすめしています。

本書籍では、現在主流のHTML5, CSS3とは何か、というのを、HTML4などの旧バージョンとの比較などにも触れながら解説があり、その上で各種タグなどの意味を一つ一つきちんと押さえながら理解を深めていくことができるようになっています。

また、今回紹介している第三版では、きちんと最新のトレンドを押さえた書き方なども紹介しているので、基礎知識・基礎理解としてうまく全体像を掴むことができる書籍になっています。

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

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

 

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

そして、第三段階としては、第一・第二段階を経て、基礎的な理解を身に付けて頂いたため、より多くの実践的なアウトプットをすることによって、知識の定着と応用力を身に付けて行きます。

その際、HTML/CSSにおいて、Awesome Ars Academiaがおすすめするのは下記の２つのプロセスになります。

１つ目は、さらなるアウトプットとしてドットインストールから下記の２つのコースをやってみるのがおすすめです。

・実践！ウェブサイトを作ろう
https://dotinstall.com/lessons/website_html_v3
・実践！スマートフォンサイトを作ろう
https://dotinstall.com/lessons/spsite_html

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

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

本書を見ながら３パターンのレイアウトのコーディングを実現できるのですが、この３パターンのコーディングができれば、簡単なウェブサイトのコーディングスキルは充分に身につきます。

特に、ちょっとした小銭を稼ぎたい、というときによくあるのが「縦に長いランディングページのコーディング」というようなお仕事なのですが、まさにそんなランディングページをスマホ対応したレスポンシブでコーディングする、という題材もあったりするので、アウトプット・演習型の学習コンテンツとしてのこの書籍は非常に良い題材となるかと思います。

おそらく、ここまで学習した内容を「使いこなせる」という風になれば、月に５万円ほどの収入をちょっとしたコーディングのお仕事を引き受けることで得られる、というスキルも実現可能になってきているかもしれません。

関連：プログラミングと英語を学ぶ価値とは？学習法までご紹介！

上記ちょっとしたお金も稼げるスキルを身につけられるかも？というお話を書かせていただいたのですが、実際に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制作・プログラミングを始めよう、と思ってこのサイトにたどり着かれた方がいらっしゃいましたら、まずはスクール資料をダウンロードしていただけますと嬉しく思います。