今回から定期的に投稿する「HTML&CSS完全攻略ロードマップ」は実際に、ゼロからHTML&CSS学習を始めて、今ではWebサイト作成の仕事を受けれるようにになった私が、最も効率よくHTML&CSSを習得するまでの道のりを皆さんに共有して、皆さんにもHTML&CSSをマスターしてもらおうというものです。
完全攻略とあるように、基礎中の基礎から、案件をもらえるレベルである応用といったところまで、一貫してHTML＆CSSを学習していただけるコンテンツを作りたいと考えているので、かなり長期的なシリーズとなると思います！そのため、自分のレベルに合った数字の記事から始めてもいいかもしれません！
しかし、HTML＆CSS初心者の方は是非最初から見てください！
今回は記念すべき第1弾です！
- プログラミングに初チャレンジ！
- HTML&CSSでサイトを作りたい！
- だいたいHTML&CSSは理解したけど、仕事はまだ
このように、プログラミングをまだ全くしたことのない初心者の方から中級者の方まで、幅広いHTML&CSSの学習者の層を対象としていますので、気になった方は是非読んでみてください！
HTMLとCSSって何？という方に関しても、次の第2弾でしっかり説明しますので、このまま読み進めてください。
また、じゃあこのHTML&CSS完全攻略ロードマップを見て勉強すれば、一体なにが作れるようになるの？と思われた方は、ちらっとコチラをご覧ください！
【近日公開】HTML&CSS完全攻略ロードマップで作れるようになるもの
まず、HTML&CSSのプログラミングを始めていく前に、この「第1弾」では、「プログラミングができるようになるための思考法」を皆さんに共有しようと思います。
このように思った方もいるかもしれません笑
しかし・・・
プログラミングに対する思考法がきちんとしていないと、とても効率の悪いプログラミング学習となってしまう傾向にあるので、是非一度この記事を読んで、「プログラミング学習に対する思考法」をしっかりと身につけてください。
ちなみに、私の周りでもだいたい8割の人が、プログラミングができるようになる考え方をせずに、プログラミングに挑戦して挫折しています…
Contents
一般的なプログラミング学習の問題点
プログラミングができるようになる思考法を知ってもらう前に、現在プログラミングを始める人の一般的なプログラミング学習の問題点について説明したいと思います。ここで説明する問題点に一致した方は、HTML&CSSを勉強し始める前に直しておきましょう。そうでないと、仕事をもらうくらいにスキルアップするまでに2倍～3倍くらいの時間がかかってしまいますよ？
目的の手段化
最近本当にプログラミング学習がブーム化し、Twitterなどでも本当にたくさんの方が、プログラミングを勉強している姿を目にします。日本のエンジニア不足が嘆かれる現代の日本にとっては、とても素晴らしいことだと思います。特に、HTML&CSSは多様化するプログラミング言語の中でも最も扱いやすい言語のひとつで、本当に多くの方がチャレンジしています。このプログラミング学習を始めようと思う人には、大きく分けて2パターンの動機があって、それを目標として、プログラミング学習を始めているのではないかなと考えています。その目標というのはこの２つです。
・プログラミングを使って稼ぎたいから
・作りたいモノにプログラミングが必要だから
ここで、モノと言うのは、ロボットや車などの物理的な物だけでなく、TwitterやYouTubeなどのWebアプリ・サービスも含まれます。
私自身は後者のタイプでした。みなさんはどちらのタイプでしょうか？
私は、元々作りたいWebサービスがあって、そのサービスを自分で作成したプログラムで実現したいなあと考えて、プログラミングを勉強し始めましたが、実際はこの後者のパターンは圧倒的に少数派で、前者の「プログラミングを使って稼ぎたいから」という動機でプログラミングを始められる方のほうが、圧倒的に多数派だと思います。もちろん、お金は大切な要素で僕も稼げなければ、プログラミングしているかどうか定かではありませんが笑
しかし、この「プログラミングを使って稼ぎたいから」という動機には大きな問題点があります。このHTML&CSS完全攻略ロードマップはその問題点も踏まえたうえで、「プログラミングを使って稼ぎたい」という動機の人でもしっかり上達できるようにサポートしますので、諦めないでくださいね！
先に述べた問題点とは、手段の目的化が起こっていると言う点です。プログラミングを勉強したい！という人の中には、ネット記事や広告などで「プログラミングを勉強すれば、稼げるし求人がいっぱい！」というような甘い誘いを聞いて、HTML&CSSといったプログラミングを勉強しようという方も多いのではないでしょうか？
ぎくっとした方いませんか？
もちろん、この「稼げる」という点もまた事実である部分ですし、否定はしません！
が、しかし、もし本当にプログラミングを通して稼ぎたいなら、これから説明する考えを知っておくことは非常に重要だと思います。
プログラミングはあくまで言語であり手段です。みなさんが小学校・中学校・高校と習ってきた英語と同じなのです。英語を実際に使うことを目的とせずに英語を勉強して、仕事をもらえそうですか？英語を使って翻訳の仕事をしたいとか、商社マンになって世界を転々とするなかで英語を使う必要があるだとか、そういう場面で英語を使える人材だからこそ仕事が豊富にあるんですよね。どういった場合でも、英語はあくまでも使うという手段には変わりありません。
もちろんです。その通りでプログラミングに関しても同じことです。みなさんもプログラミングの言語学者並みの仕事をする予定なら、プログラミングを勉強するというモチベーションで良いと思います。しかし、それは可能でしょうか？少なくとも私には無理です。プログラミングにおける言語学者とは具体的にどういうレベルかと言うと、プログラミング言語を自分で開発できたり、日本でもトップレベルに効率のいいプログラムを書けたりといったことです。もしこれができるなら、年収1億は下らないと思うので、是非目指してください！
ということで、手段の目的化について分かって頂けたでしょうか。
もし、みなさんの中にただただ、HTML&CSSってプログラミングの中では簡単な方だし、案件も多くて、プログラミングを勉強したら稼げるから勉強したいという思いがあるのであれば、少なくとも、実際にプログラミングを言語として使用したいと思って勉強している人と同じような方法で勉強をしなかったら、方向性を見失って、なかなかプログラミング学習が効率的に進まなくなりそうではありませんか？
もちろんだからと言ってプログラミングを諦めろとは言いませんし、諦めないでくださいね？
実は、そういう方のために「HTML＆CSS完全攻略ロードマップ」を作りました。
「HTML＆CSS完全攻略ロードマップ」を利用してプログラミングを勉強してもらうと、自然とプログラミングをただの手段として、使用する人が歩む道のりと同じ道を歩いていける、そんな内容となっています。
そのため、上記の「注意が必要な人」に一致したみなさんも安心して、HTML＆CSS完全攻略ロードマップを使って勉強していきましょう！正しく勉強すれば、必ず仕事をもらえて稼げます。
学習ツールの利用方法の誤解
最近では、ドットインストールやProgate などの、プログラミング学習ツールが、次々と提供されていますね。特にHTML&CSSはプログラミング初心者が最も取組みやすい言語で、このようなプログラミング学習サービスを使用する人も多いのではないかと思います。このようなサービスが増えることについては、誰もがプログラミングをより身近に感じられる存在となることに繋がるので、とても良いことだなと思います。しかし、先ほど説明した手段の目的化から派生してくる問題点でもあるのですが、これらの学習ツールの使い方を間違えてしまうと、とても大きな問題点となってしまう可能性があります。というか、ほとんどの使用者は使い方を間違っているように思います。以下の３点がそのポイントなのですが、もし当てはまった方は、この記事を読んでいて本当にラッキーです。今日から、直しましょう！
・それぞれの文法を一言一句覚える
・初級編・中級編レベルの題材を何周もする
・そのサービスをやり終えたらHTML＆CSSの勉強は終了
もし、こんな感じのイメージや考え方を持っていたとしたら、すぐに舵を切って方向転換ですよ！
ではそれぞれのポイントについて、説明していきますね。
それぞれの文法を一言一句覚える
HTML＆CSSだけでなく、どの言語でもいろんな文法ってありますよね！文末にセミコロンをつけなければならなかったり、インデント(空白)で処理の流れが決まったり。if文やfor文なども文法の一つです（HTML＆CSSとは違う言語の例なので分からなくても全然心配いりませんよ！）。HTML＆CSSで言えば、最初に<html>と書いて、次に<head>があってのようなものです。これらの文法やルールは本当に無数にあって、プログラミング初心者は覚えるのが大変ですよね。こんなん覚えるなんて、プログラミング挫折しそう。って思いますよね。
そうなんです。だから挫折するんです。
文法や、基本的なルールなんて覚えるものではありません。実際に私も文法なんて覚えようとはしてません。仕事をもらう現在になってもその都度調べています。つい先日にも、「あれ？HTMLの『<html><head><body>』ってこうやって書くので良かったかな？」みたいに疑問に思い調べたところです（←HTMLを勉強するとき一番初めに習う内容です笑）。
先程、プログラミング言語も英語も同じ言語だと言いましたが、この点だけは大きく違います。英語は会話の中で使用することが多いため、瞬発力がなければキャッチボーが成り立ちません。しかし、プログラミング言語の場合、会話をすることはないため、瞬発力は必要ではありません。むしろ、うる覚えでささっと書くよりも、調べまくって良いものを見つけてそれを書く方が評価されるのです。もちろん、プログラミングを勉強していく中で、勝手に文法を覚えることは多々あって、そういう場合は次から調べることはなくなりますが、覚えるといってもその程度ですし、3ヶ月経てば忘れます。
それにも関わらず、「画像を挿入するには、<imgと打って、その後に〇〇を打って、その後に・・・。これを絶対に覚えなきゃ！」といった勉強法の認識で、プログラミング言語を習得しようと考えているプログラミング学習者の方は非常に多く、これが原因で挫折してしまうこともかなり多いので、注意が必要です。
またプログラミング学習を挫折してしまう原因について気になるという方は、こちらをご覧ください。
初級編・中級編レベルの題材を何周もする
次に出てくる問題点として、初級編・中級編レベルの題材を何周もするという問題点が挙げられます。これはどういうことかと言うと、「〇〇を作ってみよう！」というテーマが与えられたとして、一から自分で全部コードが書けるようになるまで、何回もその題材を使った演習を繰り返すといったものです。受験勉強において復習はなによりも大事かもしれませんが、プログラミングにおいては優先度はめちゃくちゃ低いです…。文法を一言一句覚えるのはやめたほうがいいという理由と同じで、これらの「○○の作り方」に関してもいちいち全部覚えません。なんとなく、「こんな感じで作るんだあ」くらいです。そして、その時作ったソースコードだけは大事に保存しておいてください。頭の片隅に残っておけば、また次調べられますし、自分が理解して書いたソースコードなら、次に見返したときにすぐに理解し直すことが可能です。
プログラミングができるといっても、結局は半分以上、Webサイトや参考書から、食材と調理器具と調味料を持ってきて、それを事前に考えておいたレシピ通りに料理していく。それがプログラミングというものです。
この認識をしっかりと持ってHTML＆CSSの学習を進めていきましょう！
そのサービスをやり終えたらHTML＆CSSの勉強は終了
これは、ドットインストールやProgate といったプログラミングサービスを利用している方に本当に多いと思います。最初に述べた通り、目的が手段となってしまっている場合、上級編といったレベルの題材をクリアできたら、「あ、自分はプログラミングをある程度マスターできたんだ！」と思って、そのプログラミング言語の学習をそこで終了し、「次は別のあの言語だ！」となってしまうといったことが起こりがちです。もちろん、いろいろな言語をマスターしているのは素晴らしいことですし、私も複数のプログラミング言語を習得していますが、上級編が終わったから、次のプログラミング言語というのはちょっとオススメしません…。
何度も言っていてしつこいかもしれませんが、プログラミングはあくまで言語であり手段なので、自分自身で大規模な開発をしたり、仕事をもらいたいと思っているなら、もっともっと深くまでその言語を勉強しなければなりませんし、自分が提供したいWebサービスの中に少しだけ使う程度であれば、上級編のような段階で終了すれば良いと思います。つまり、自分が達成したいレベルに合わせた勉強をするということです。
HTML＆CSS完全攻略ロードマップの特長
HTML＆CSS完全攻略ロードマップの特長として、実際にプログラミングをただの手段として勉強している人(＝効率が良い傾向)と同じようなステップでHTML＆CSSを学習していくことができるという点が一番の特長です。
その特長の効果を最大化するために、HTML＆CSS完全攻略ロードマップを利用するにあたって、この点に注意しながらプログラミングを行ってください！
ここで作ったものを活用してオリジナルを作る！
この先「HTML＆CSS完全攻略ロードマップ」では、様々な実践的な例題を一緒に作っていってもらうことが多くなってきます！そのときに、一緒に作った制作物を作って、そこで満足するのではなく、例題の作成が終わったら、カスタマイズしてもっと有用なモノにしよう！と例題に取り組んでください。
実際のプログラミングでも、元々自分が作っていた元となるソースコードをカスタマイズして、それぞれの案件に合う仕様にしていくことが非常に多く、その力を養うためにも「カスタマイズ」は大切にしてください！
全然そんなことはありません！
第2弾で紹介するのですが、HTML＆CSS完全攻略ロードマップでは、簡単なものから複雑なものまで、様々な一緒に作っていく例題を用意しています。それぞれの例題において、背景色を「白」から「緑」に変えるだけでも立派なカスタマイズです！慣れてくるにつれてカスタマイズの幅を広げていきましょう！
そのため、以下のような手順でHTML＆CSS完全攻略ロードマップを使ってみてください！
・まずは一緒に各テーマの課題を作ってみる
・そのプログラムのソースコードを書き替えて、オリジナルの何かを作ってみる
ここまで、できたら十分にHTML＆CSSを使えると言っていいと思います。
実際に仕事を受けるときも、これと同じ流れです。これまでに作ったプログラムのソースコードの中から使えそうなものを、オリジナル化して、それを積み木のように組み合わせる。
意外と、ハードルもそこまで高くないとは思いませんか？
HTML＆CSS学習を進める最も効率の良い流れ
プログラミングはただただ勉強するのではなく、どのように勉強していくかという流れが非常に大切です。ここを疎かにしてしまうと、後々行き詰まりますので、必ず考えるようにしてください。
HTML＆CSSに限らず全てのプログラミング言語において、同じことが言えますが、このような手順でプログラミング学習を始めていきます。
1. HTML＆CSSとは何か
2. どこに使われているものかを知る
3. なにが作れるのかを知る
4. 最終的になにを作りたいかを設定する
5. 基本事項を勉強する
6. 難易度が低めのものの中でなにを作るか決める
7. 作るもののレベルをどんどん上げていく
しかし、最終的に作りたいものがないという方もある程度いらっしゃると思いますし、作るものの難易度についてもなかなか分かりづらいと思います。
HTML＆CSS完全攻略ロードマップでは、その点もしっかり考えられるように学習を進めていきますので安心してください。一緒に二人三脚で学習を進めていきましょう！
HTML＆CSS完全攻略ロードマップ各パートごとの概要
HTML＆CSS完全攻略ロードマップは、 HTML＆CSSに触れたことのないレベルの人から、実際に仕事をもらえたり、自分でなにかWebサイトの仕事を受けるレベルまでになれるように、記事を書いていきます。それに従って今後どのような内容で、記事を作っていくかを以下にまとめました。基本的には全て読んでもらいたいですが、その最初の方の記事のレベルは余裕だよって方は飛ばしてもらっても構いません。
第1弾：プログラミングができるようになる思考法
第1弾は今見てもらっているこの記事のことです。第1弾では、HTML＆CSS学習を始める前に、プログラミングを挫折する人が多いのはなぜか、プログラミングを勉強しても仕事をもらえるレベルまで成長する人がなかなかいないのはなぜかといったところを中心に説明しています。もし、HTML＆CSSを勉強するのが初めてであったり、まだなにかの言語をマスターしたことがないという方は、絶対にこの第1弾を読んでから勉強を始めることをおすすめします。
第2弾：HTML＆CSSってなに？どこで使われている？
HTML&CSS完全攻略ロードマップ第2弾はこの第1弾の次の記事です！HTML&CSSって一体なんなの？どこで使われているの？といったことについて説明します。この後で説明するプログラミング学習の流れでも説明する通り、はじめにこの言語で何が作れて、自分は何が作りたいのかを知っておくことは非常に需要なことなので、HTML＆CSSがどこで使われているのか分からないという方は絶対に見ることをオススメします！
第3弾：何が作れるようになるの？
HTML＆CSS完全攻略ロードマップ第3弾では、HTML＆CSSの環境構築といったところや文法など、基本的なところはどうやって勉強すればいいの？という疑問にお答えしています。この基本事項に関しては、プログラミング学習者全体を通して、間違って勉強している人が多いのでしっかり読むことをオススメします！
第4弾以降もお楽しみに！！
案件をもらうためには事前に会員登録をしておく
また、完全攻略ロードマップを見ているみなさんは、フリーランスとして案件をもらったことのない人が多いのではないでしょうか。まだ、案件獲得をしたことのないプログラミング学習者のみなさんは、以下のような登録していると案件をもらえるサイトに会員登録を事前に済ませておくことをオススメします！と言いますのも、フリーランスエンジニアとして活動する際に、スムーズに案件がもらえるようになると思うので、会員登録だけでも先にしておくと良いと思います！
私自身も、プログラミングの勉強を始めるとほぼ同時に、案件を獲得するための活動を行っていた結果、スムーズに案件獲得ができました。
まとめ
今回は、HTML＆CSS完全攻略ロードマップの第1弾として、プログラミング学習に関する考え方はであったりといったところを、知って頂きました。
次の第2弾は、では実際にHTML＆CSSはなにが作れるのかといったところを、しっかりと説明していきます。楽しみにしていてください！
今回は、以上になります！質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください！Twitterも是非フォローよろしくお願いします！
その他、勉強法や就活、プログラミングに関する相談なども受け付けています！
