【HTML/CSS/JS】フロントエンド初心者の方にオススメの勉強法を紹介【未経験からでも始められる】
こんにちは、ちくたっく（@tictak_py）です。
今回は、HTMLやCSSなどのフロントエンドを学習していきたい方向けの勉強法について紹介していきたいと思います。
初めて勉強する方にとっては、
・ そもそもHTML、CSS、JS（JavaScript）って何？
・ フロントエンドって何？
といった疑問を持っている方もいるかと思います。
方向性を間違えないように、簡単にまとめておくと
- Webブラウザに文字を表示させるのがHTML(Hyper Text Markup Language)
- Webに表示される文字やスタイルを変更させるのがCSS(Cascading Style Sheet)
- Webにアニメーション効果をつけるのがJS(Java Scriptの略)
といったイメージになります。
そして、これらはすべてユーザー（Webをみる人）から見える部分になるので、「フロントエンド」と呼ばれることもあります。
以上の点を踏まえた上で、どのようにフロントエンド知識を身に付けていくべきか紹介していきます。
こんな方に読んで欲しい記事です
- これからHTML、CSS、JavaScriptを学んでいきたいと考えている方
- 将来的に、WEB系のエンジニアやWEBデザイナーを目指したい方
フロントエンドの勉強方針
まず最初に、基本的な勉強方針というか心構え的な内容をお伝えしておきます。
ここでお伝えしたいことは以下の2点です。
① ： 自分がフロントエンド知識を学習する目的をしっかりと設定する
② ： フロントエンド知識を100%理解することを目指さない
1つ目の内容は、「HTMLやCSSを学習する目的は何？」という質問に答えられるようにすることです。プログラミングに限った話ではありませんが、学習した先に何かしらの目標や夢があると思うので、（当たり前のようですが）自分のゴールを意識するようにしましょう。
Web系エンジニアやWebデザイナーになりたい、社内で興味のあるプロジェクトに参加するためにフロントエンド知識を極めたい、など何でもいいです。
2つ目の内容は、アウトプットをしながらフロントエンドの学習（インプット）を進めるようにしましょう。
上記では、「フロントエンド知識を100%理解することを目指さない」と書きましたが、インプットを中心にした学習にすると、（学習内容も多いので）いつまでたっても終わりは来ません。
例えば、すでに「Webデザイナーになりたい」という目標があるならば、これから紹介する方法で自分の知識を増やしつつ、実際に手を動かしてアウトプットするようにしましょう。
イメージとしては、アウトプットをしながら、わからない点は都度調べて乗り越える感じです。僕の場合、Webアプリケーションを作りながら、「見た目をこうしたいな～」って思った時にHTML/CSS/JSの必要知識をインプットしています。
次からは、実際にオススメする勉強法をいくつか紹介していきます。
自分の環境や好みに合わせて、「自分に合いそう」と思われる勉強法を選んでみてください。
オススメの勉強法①｜Progateで雰囲気を知る
最初の勉強方法は、「Progate」でHTML/CSS/JSの感覚を確かめてみる方法です。
Progateは初心者向けのサービスで、HTMLやCSS以外にも幅広いプログラミング言語を気軽に学べる点が特徴です。また、自分のPCで環境を構築する必要なく、Progate内でコードを入力して学習を進めていける点も初心者には優しい作りとなっています。
そのため、「そもそもHTMLやCSSがどんなものが知っておきたい」「自分に合っているのか確かめたい」という方であれば、Progateから始めてみるのが良いかもしれません。
一方で、すでにWeb系エンジニアやWebデザイナーを目指している方にとっては、物足りない点も補足しておきます。これはフロントエンド言語に限らずですが、実務で使えるようにするためには「自分でプログラミングできる環境を構築」して、色々とコードを書いていく必要があるためです。
無料会員でも基礎レッスンは受講できるので、興味のある方は試してみてください。
オススメの勉強法②｜自分にあった入門本をセレクト
続いては、フロントエンドの入門本をベースに学習していく方法です。
HTMLやCSS関連の書籍は溢れかえっている上に、「自分に合っているかどうか」は正直読み進めてみないとわからないことも多いと思います。
その点では、比較的最近の新しい本であり、辞書代わりに使える本がオススメです。
理由としては、先ほどお伝えしたように、基本を抑えたあとは都度細かい内容を見返すスタンスの方が効率的だからです。本の最初から最後まで全部読んで学習するのもアリですが、自分がやりたいことと関係ない論点も含まれていることもあります。そのため、
「フロントエンド言語の基本を学ぶ→アウトプットする→枝葉の論点は本で見返す」
という方法でステップアップしてみてください。個人的には以下の2冊がオススメなので、本で学習したい方は参考にしてください。
オススメの勉強法③｜Udemyの講座で効率的に学習
3つ目に紹介する方法は、Udemyのオンライン講座で効率的に学習する方法です。
先ほど、「フロントエンド言語の基本を学ぶ→アウトプットする→枝葉の論点は本で見返す」とお伝えしましたが、効率的に「基本部分+α」を学習したいという方にオススメの方法になります。
「基本部分」としては、HTMLやCSSに関する基本的なプログラミング知識が該当し、「 +α部分」としてはPhotoshopやアニメーション効果を付けるJava Scriptなどが該当することになるかと思います。
フロントエンド関連のコンテンツとしては、以下3つがオススメです。
- HTML5+CSS3 ｜手を動かしてマスターするWEBデザイン
- 未経験からプロのWebデザイナーになる！ 400レッスン以上マスターコース
- フロントエンドエンジニアになりたい人のWebプログラミング入門
簡単に特徴をまとめると、以下のようになります。
「+α」部分の違いや、自分の目的と照らしながら参考にしてみてください。
HTML5+CSS3｜手を動かしてマスターするWEBデザイン【特徴】
- 【特徴①】HTMLやCSSの基本を丁寧にわかりやすく解説している人気講座
- 【特徴②】コース内容は基本知識がほとんどない初心者にもわかりやすい構成
- 【特徴③】サイト制作の基本を学んだうえでオリジナルを作っていきたい人向け
この講座は、HTMLとCSSを基本から丁寧に解説している点が特徴です。初めてプログラミングをやる方には「HTML5+CSS3 手を動かしてマスターするWEBデザイン」が一番合ってるかもしれません。
未経験からプロのWebデザイナーになる！【特徴】
- 【特徴①】総レッスン数422、トータル約42時間のボリュームある人気講座
- 【特徴②】HTML/CSSに加えてグラフフィックツール「Photoshop」を学べる
- 【特徴③】ケーススタディを通じて、一人でWebサイトを作り上げたい人向け
こちらの講座は、HTMLとCSSに加えて「Photoshop」をプラスアルファとして学べる点が特徴です。HTMLやCSSといったフロントエンドの基礎を身に付けてWebデザイナーを目指したい方には「未経験からプロのWebデザイナーになる！」が合ってると言えるでしょう。
フロントエンジニアになりたい人のWebプログラミング入門【特徴】
- 【特徴①】HTML/CSSに加えて、JavaScriptの入門まで学べる人気講座
- 【特徴②】jQueryやVue.jsといったJavaScriptのフレームワークを学べる
- 【特徴③】CSSやJavaScriptのフレームワークを積極的に学んでいきたい人向け
3つ目の講座は、上記2つの講座同様にHTMLやCSSの基本が学べますが、プラスアルファとしてJavaScriptやフレームワークの勉強も出来る点が大きな特徴と言えます。
フロントエンドの基礎だけでは物足りず、アニメーション効果なども付けたWebを制作したい方には「フロントエンドエンジニアになりたい人のWebプログラミング入門」がおすすめですね。
オススメの勉強法④｜Bootstrapに触れる
4つ目に紹介するのは「Bootstrap」を学ぶ方法です。
Bootstrapというのは、Twitter社で開発されたCSSフレームワークのことです。
簡単に言ってしまえば、ゼロから作り上げるのではなく、既にある部品（コード）を活用して効率的にコーディングしていくツールです。
便利なツールではありますが、いきなりBootstrapを使うよりかは、基本をある程度抑えた方が「もっと効率的に見た目を良くしたいな～」といった時に使える方法になるかと思います。
僕も、Webアプリケーションを作るときにはBootstrapを活用しています。以下の本が辞書代わりに使えるので、いつも横に置いて色々試しています。
ちなみに、Bootstrapは先ほど紹介した、3つ目のUdemy講座（フロントエンドエンジニアになりたい人のWebプログラミング入門）でも解説されています。
僕がよく使うBootstrapのサイトとして「Bootstrapの公式サイト」や「チートシート」があるので、気になる方はチェックしてみてください。
オススメの勉強法①～③で基礎を抑えた上で、参考にしてみてくださいね。
オススメの勉強法⑤｜自分でサービスを開発してみる
最後にオススメする勉強法は、自分のプロダクト（サービス）を作ってみるです。
この方法も、Bootstrap同様、HTMLやCSSの基本をしっかりと学んでからのステップになりますが、アウトプットとしてこれほど最適な学習方法はないと思います。
サービスといっても、なんでもOKです。
・ 自分用のホームページをゼロから作ってみる
・ Webデザイナーらしく、人の目を惹くようなサイトを作ってみる
などなど、自分が勉強した内容をベースに、実際にコードを書いてアウトプットしてみてください。
途中で「こうしたい場合はどうするんだっけ？」とか、色々な疑問を抱くはずですが、それを解決するプロセスも非常に重要になります。
是非、自分なりのオリジナルコンテンツを作りながら、ステップアップしてみてください！ちなみに、記事内で何度か登場している「Webアプリケーション」については以下の記事で紹介しています。
ゼロからWebアプリケーションを作るための方法と全体像を紹介【プログラミング未経験可】
プログラミング未経験だけど、「Webアプリケーションを作ってみたい！」という方向けに、最低限知っておくべき内容や必要知識の全体像についてわかりやすく解説した記事です。僕自身も非エンジニア・未経験でWebアプリケーションを作れるようになったので、興味のある方は是非参考にしてみてください。
さいごに
今回は、HTMLやCSSなどのフロントエンドを中心とした勉強法について紹介してきました。
ユーザーの印象を大きく左右する「見た目」を担っている言語がフロントエンドですが、最初はキレイな「見た目（サイト）」を作るよりも、自分のプロダクトに少しずつ磨きをかけて成長していくプロセスを楽しんでみてください。
ではまた。