コーディング勉強でこんなお悩みはありませんか？
コーディングの勉強をしたい！でも何からやればいいのかわからない、、
コーディングの勉強をするにはスクールに通うしかないの？
全くの初心者でも大丈夫？
この記事では、初めてのコーディング勉強におすすめのWebサービスなどを紹介します。
- まずはwebの全体像を知ろう！
- HTMLとCSSを勉強しよう！
- jQuery（JavaScript）も勉強しておこう！
コーディングの勉強方法はたくさんあるので、自分にあった方法を探すもよし、一つ一つ挑戦して徐々に理解を深めていくもよし！
コーディングを勉強して、素敵なwebサイトを作れるようになりましょう◎
コーディングの勉強は何から始める？
「コーディングの勉強」と言っても、何から勉強すればいいかわからないですよね。具体的に何を勉強するのか？をここで確認しておきましょう。
1. まずはwebの全体像を知ろう！
Web初心者の方は、コーディングの勉強を始める前にWeb全体の仕組みを理解するところから始めましょう！全体像を学んでから、コーディングの勉強を始めると理解も深まります◎
これから学ぶ人のベストな一冊！
Webの全体像から、HTTPでやりとりする仕組み、さまざまなデータ形式、Webアプリケーションの開発、セキュリティ、システムの構築・運用まで、これからWebにかかわる人が知っておきたい知識をこの一冊で丸ごと解説！
すべての項目の解説は、徹底的にイラスト図解化。
これから仕事に必要な知識を学ぶ方に、すばやく、たのしく知識を身につけていただけるよう、読みやすさ、わかりやすさにこだわって制作しています。・知識ゼロから全体像がつかめる！
・よく使われる用語の意味がわかる！
・技術の仕組みがスムーズに学べる！実務に生かせる知識が、確実に身につく、これから学ぶ人のベストな一冊です！
ポチップ
2. HTMLとCSSを勉強しよう！
そもそもコーディングとは、サイトをWeb上で見られるようにするためにHTMLやCSSを記述する作業のことです。と言われてもよくわからないですよね^^; 簡単にいうとHTMLやCSSと呼ばれる暗号を書いてWebサイトを作っていく作業ですw（コーディング勉強を始めた当初、私にはHTMLやCSSが暗号にしか見えなかった…笑）
Webサイトを作るために一番ベースとなる暗号（言語）がHTMLとCSSです。なのでまずはこのベースから勉強しましょう。HTMLは、簡単にいうとWebサイトに載せたいテキストや画像などを表示することができます。そしてCSSは、HTMLで表示したテキストの大きさを変えたり色を変えたりすることができます。HTMLとCSSを学んでコーディングできるようになると、自分でデザインしたWebサイトを実際に作れるようになります。
3. jQuery（JavaScript）も勉強しておこう
JavaScriptとは、HTMLとCSSで作ったWebサイトに動きをつけるためのプログラミング言語です。
例えば、
・横から「シュイン！」と画像がスライドしてくる動きを付けたり
・複数の画像が「ふわっふわっ」と切り替わるように動きを付けたり
こういった動きのあるWebサイトは普段よく見かけると思いますが、JavaScriptを勉強するとこういった動きのあるWebサイトを作れるようになります。JavaScriptには、より簡単な記述で動きをつけることができる「jQuery」というものが登場しました。JavaScriptは記述が複雑だったけど、jQueryが登場したことで記述がシンプルになり簡単になった！ということです。
動きのあるかっこいいサイトを作れるようになるために、jQueryは勉強しておきたいところですね。
HTMLとCSSの勉強方法
ここからは実際どのようにHTMLとCSSを勉強していくのかをご紹介したいと思います。全くの初心者がコーディングの勉強をして、一度で全てを理解するのは難しいです。何度も繰り返し勉強し、また、手を動かして実際に記述していくことで少しづつ身についていきます。
コーディング勉強の大まかな流れ
- コードの意味を学びながら実際に書いてみる
- 動画やテキストで繰り返し基礎を学ぶ
- 本を買って同じようにコーディングしてみる
- 挫折しそうになったらコーディング講座に参加してみる
- 模写コーディングに挑戦してみる
1. コードの意味を学びながら実際に書いてみる
初めてコーディングを勉強するとき、文章を読んでコーディングについて理解しようと思っても、コーディングを書いたことがないとなかなかイメージができず理解できません。なので、コードの意味を勉強しつつ、実際に手を動かして記述していくと身につきやすいかなと思います。
プロゲート
実際にコーディングしながら学べる教材で、おすすめなのがプロゲート！プロゲートは無料からプログラミングの基礎が学べるWebサービスです。HTML、CSSのコードの意味、基本的な知識などを学びながら、実際に手を動かしてコーディングしていけるのがポイント。無料で「HTML & CSS 初級編」などの基礎レッスンを学ぶことができます。
有料プランに入ると上級編などの全てのレッスンを受けることができるので、無料のレッスンを受けてから有料プランに切り替えて学習を進めていくのもおすすめします。
アプリ版もあるので、通勤時間などの隙間時間にもコーディングを勉強することができますよ！
無料：基礎レベルの16レッスン
有料（月/1,078円税込）：79レッスン全て
HTMLとCSS以外にも、色んな言語を学ぶことができます。
CODEPREP
CODEPREPは、プログラミングを書いて動かしながら学ぶ実践型のプログラミング学習サービスです。プロゲートと同様で、実際に記述しながらを勉強することができ、無料で利用することができるのが嬉しいサービスです。ただし、全くの初心者の方には少し解説に物足りなさを感じるかもしれません。まずはプロゲートで一通り勉強をしてから、他の学習サービスでも勉強したい方は挑戦してみるのもいいと思います。
動画や参考サイトで繰り返し基礎を学ぶ
プロゲートである程度HTML、CSSでできることがわかってきたら、さらに動画や参考サイトなどで繰り返し勉強して理解を深めていきましょう。
ドットインストール
3分動画で構成されたプログラミングレッスンが受けられる、学習サービスです。無料で公開されているレッスンも多いので、無料の動画だけでも視聴するといいでしょう。特におすすめのレッスンは「はじめてのWeb制作」です。動画を見ながら、実際に横で記述していくことができるので、初心者の方にはおすすめです。プレミアム会員（有料：月/1,080円税込）になると、見られるレッスン動画が増えるだけでなく、先生に質問することもできるので、わからないことがあった時に質問しながら勉強を進めていくことができます。
動画で勉強できるサイトは少ないので、ドットインストールはなかなかおすすめです。
chot.design
デザインからコーディングまで、Webデザインに関わる563本のレッスンが受けられる学習できるサイトです。無料で公開されているカリキュラムと、有料カリキュラムがあります。基本的にはテキストでの学習となり、解説を読み進めていく形で勉強します。
一からコーディングしてWebサイトを作るときには、エディターというツールが必要になります。そのエディターのダウンロードから設定方法まで解説してくれているのがchot.designです。
「はじめてのWebデザイン『HTML・CSS』入門」の中の、「1-2. Visual Studio Code のインストールと初期設定」でエディターのダウンロード方法が解説されているので、これを見ながらダウンロードされることをおすすめします。
エディターについてはVisual Studio Code以外にも色んな種類があるのですが、Visual Studio Codeは個人的にも使いやすくておすすめです。記述が間違っているときや何らかのエラーが発生しているときにわかりやすく教えてくれるので、勉強を始めたばかりでも使いやすいと思います◎
サルワカさんのサイト
サルワカのWebデザイン入門では、どの書籍よりも、またどのウェブページよりも分かりやすくオシャレなWebサイトを作るための知識を解説していきます。
HTML、CSSについて、更に理解を深めていきたい方はサルワカさんのサイトもわかりやすのでおすすめです。STEP1からSTEP32までの記事で解説されていて、テキストだけでなく、コーディングした際の動きなども見せてくれているので、初心者の方にもわかりやすいサイトになっています。記事は無料で読めます◎
YouTube
検索窓に「コーディング」と入力し検索すると、コーンディングに関する動画がたくさん出てきます。全くコーディングに触れたことない状態でYouTubeに上がっている動画を見ても理解するのが難しいと思いますが、プロゲートやドットインストールなどで一通り学習をした後であれば、さらに理解を深めていくという意味でもYouTube動画をみて勉強するのもありだと思います。YouTubeはスマホでも見れるので、移動中などの隙間時間の勉強方法としておすすめです。
Instagramで勉強
インスタでHTMLとCSSに関するTipsを紹介しているアカウントがあります。コーディングに関する豆知識が学べるので、インスタをよく見る方はフォローしておくといいですね！
おすすめアカウント＠html_css_webdesign
本を買って同じようにコーディングしてみる
ある程度Webサービスを使ってコーディングがどういったものが掴めてきてから、本を買って勉強するのもおすすめです。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
コーディングの本の中でも比較的新しく出た本です。本を読むだけでなく、本に書かれている内容を実際にコーディングしながら読み進めていくので、1冊読み終えるとサイトが出来上がるような内容になっています。
ポチップ
いちばんよくわかるHTML5&CSS3デザインきちんと入門
ポチップ
HTML＆CSSとWebデザインが 1冊できちんと身につく本
ポチップ
挫折しそうになったらコーディング講座に参加してみる
今までご紹介した勉強方法は基本的に独学という形になり、わからないことがあった時教えてくれる人がいません。（一部のサービスでは質問対応もしてくれます）
コーディングの勉強に躓き、挫折しそう…という方は、リアルタイムで開催されている講座に参加して先生に質問できたら嬉しいですよね！そこでおすすめしたいのが、ストアカです。
ストアカ
ストアカサイト内の検索窓で「html」などと検索していただくと、コーディングに関する講座が600件以上出てきます。初心者の方に向けた講座も多いです。講座に参加する前に、不安なことは先生に予め確認しておくことができますし、過去に講座に参加された方の口コミも見れるので、講座を選ぶ時の参考になります。先生に講座の開催日時を相談することもできたりするので、個人的には利用しやすいなと思っています。
色んなwebサービスでコーディングの勉強してきたけど、わからないところがある（ ; ; ）
難しくて挫折しそう…(;o;)
という方はぜひ利用して見てください！
他にも個人の方が講座を販売しているサービスもありますが、基本的には録画された動画での受講となるため、ドットインストールなどとあまり変わらないかなと思います。
JavaScript（jQuery）の勉強方法
HTMLとCSSの次に、サイトに動きをつけるための言語JavaScript（jQuery）も勉強しておきましょう。
Webサービスで勉強する
どちらも先ほどもご紹介したweb学習サービスです。HTMLやCSSだけでなく、JavaScriptやjQueryも勉強できます。プロゲートから勉強するのがおすすめです。
本で勉強する
動くWebデザインアイディア帳
この本は、最近のサイトでよく使うような「動き」をまとめた本です。jQueryで何ができるの？サイトに動きをつけるってどういうこと？という方にもおすすめの本になっています。
ポチップ
Web制作の現場で使うjQueryデザイン入門［改訂新版］
Web制作者の圧倒的な支持を集めたナンバーワン入門書がついに改訂！ HTML5や最新のjQuery 1.9に対応し、スマートフォン用サンプルも追加しました。基礎から実践的なUI制作まで身に付きます！
ポチップ
模写コーディングに挑戦してみる
模写コーディングとは、今まで勉強してきたコーディングの知識やスキルを使って、サンプルサイトと全く同じようにコーディングしていくことです。
Codestep
こちらのサイトでは、模写コーディングのためのサンプルサイトがいくつも用意されている他、模写コーディングの具体的な手順まで解説してくれています。解答のコードも見ることができるので、自分のコードと見比べるてわからない部分を調べながらコーディングしていくことが可能です。模写コーディングでは、コーディングの方法がわからず躓くことも多いと思います。躓いた時は、ストアカで先生を見つけてわからないところを質問しながら進めていくのもいいではないかなと思います。
まとめ：コーディングはひたすら書いて身につける！
いかがでしたでしょうか？
- まずはwebの全体像を知ろう！
- HTMLとCSSを勉強しよう！
- jQuery（JavaScript）も勉強しておこう！
この記事でまとめた勉強方法は、基本的に独学でコーディングを勉強したい方向けの方法です。独学で勉強するのが苦手な方は、スクールに通って勉強するという方法もあります。
人によって勉強方法の合う合わないもあると思うので、自分にとって一番進めやすいベストな勉強方法を探して見てくださいね。
