今回のHTML＆CSS完全攻略ロードマップ第3弾では、第1弾や第2弾で、HTML＆CSSを勉強していくことについての思考法や、HTML＆CSSがどこで使われているのだろうかといったことを勉強してきましたが、では、一体HTML＆CSSの勉強をどうやって始めればいいの？と思われている方も多いのではないでしょうか？
というわけで、今回は、HTML＆CSSの基礎をどうやって勉強していけばいいのかについて紹介しようと思います。
まだ、第1弾や第2弾を読んでいないよって方は、是非、先にそちらを読むことをオススメします。これから行っていくHTML＆CSSのプログラミング学習効率が格段に変わってきます！
- HTML＆CSSをどう勉強していいか分からない
- HTML＆CSSを勉強してたけど挫折してしまった
- 第1弾と第2弾を読んだ人！
ここからはそれぞれのHTML＆CSSの学習者のレベルに合った勉強の仕方を書いていきます。自分の学習レベルに合わせて読み進めていってください！
ちなみに迷ったら一番簡単なレベルからステップアップしていくことをオススメします。
また、勉強法について説明していく前に一点だけ注意点なのですが、あくまで「HTML＆CSS完全攻略ロードマップ」は、HTMLやCSSにおける各文法を、網羅的に例を挙げて説明していくといったものではありません。
なぜなら、そういう各文法の解説や、具体例の適切さは、絶対専門家には勝てませんし、間違いなく専門家が挙げる例を参考にするべきです。しかし、プログラミング学習で大事になってくるのは、そのような例よりも勉強法・学習法です。そのため「HTML＆CSS完全攻略ロードマップ」では、勉強法・学習法にフォーカスを当てて解説していきます。完全攻略ロードマップ通りにHTML＆CSSの学習を進めていけば、最短距離で挫折することなく、HTML＆CSSが習得できると思います。
Contents
プログラミング学習サービスの利用について
Katemangostar – jp.freepik.com によって作成された business ベクトル
どのツールや手段を使ってHTML＆CSSの基本事項の学習を進めていけばいいのかについて解説していく前に、みなさんがHTML＆CSSの勉強を始める手段として考えたことがあるのではないのかという手段やツールを何点か例に挙げ、それらが本当にプログラミングの学習に適しているのかということについて考えていきましょう。
有料のプログラミングスクールに通うべきか
結論から言います。
基本的に「HTML&CSSの学習を進めるにあたって、有料のプログラミングスクールには通うべきではない」というのが私の考えです。
もし、このページを見ているあなたが、生まれて今までほとんどパソコンに触ったことがなく、ワードやエクセルもまったく触ったことがないんです。というような方である場合は、プログラミングスクールも良い選択肢かもしれません。しかし、ほとんどの方は基本的なパソコンの扱いはできると思います。そういう方に関しては絶対にオススメしません。
その理由は、いたってシンプルです。
「通わなくてもできるようになるから」
です。
たしかにその通りです。というか、そうなんです。
比較的簡単なHTML＆CSSだけでなく、難易度が高いと言われるプログラミング言語でも、プログラミングを勉強するのにプログラミングスクールに通う必要はありません。実際に私自身も「HTML＆CSS」から勉強を始め、コツコツと勉強を重ねてきた結果「C言語」、「PHP」・・・と言うように多言語をマスターできました。元々得意な人ならできたかもしれないけど、自分は得意じゃないし。と思われた方も多いと思います。
が、しかし、実は、みなさんのプログラミングが上達しない原因は勉強法とプログラミング学ぶ流れにあるので、完全攻略ロードマップを使ってそこさえ身に付けてしまえば、自然と効率的な鍛錬ができるようになっているため、あとは勝手に上達していきます。
特に、様々なプログラミング言語の中でもHTML&CSSに関しては本当に理解しやすく、プログラミング未経験者でもすぐに上達することができますので、安心してください。というか、自身で身を持って体験しながら（調べながら）プログラミング学習を進めたほうが、成長も早く、応用力もつきます。それにも関わらず、高いお金を払ってプログラミングスクールに通うのはもったいなくありませんか？
もちろん、それでも行きたい方は、Googleにアクセスして「HTML CSS プログラミングスクール」と調べてみましょう。それ以外の方はその間に先に進みましょう。
プログラミング学習サービスの利用はオススメ？
次に、Progateやドットインストールといったプログラミング学習サービスの利用について考えましょう。あくまで私の感想ではありますが、もちろん私自身もこれまでに、どのようなものかを確かめるために使用したことがありますので、参考程度にお聞きください。
プログラミング学習サービスのメリット
プログラミング学習サービスのメリットは何と言っても、馴染みやすさでしょう。全くプログラミングに触れたことのない方でも、ゲーム感覚でプログラミングに馴染めるということに関しては、プログラミングというハードルの高さを下げてくれる良いツールだと思います。
ただ、その反面デメリットももちろん存在します。
プログラミング学習サービスのデメリット
やはり、これまでに述べたメリットがある一方で、プログラミング学習サービスのデメリットは存在します。もちろん、そういったプログラミング学習サービスを利用してもらっても構わないのですが、私はあまりオススメしません。その理由がコチラです！
- 時間効率が悪い
- 後々になって確認しづらい
では、それぞれの理由について少し説明しておきます。
時間効率が悪い
たしかに、それぞれのプログラミング学習サービスは初心者にも丁寧でわかりやすいという一面もありますが、時間がかかりすぎです。時間をかけてじっくりHTML＆CSSを勉強していくのもいいと思いますが、プログラミングが最も上達するのは、実際に何かを作っていくステップです（自分で考えて）。そのため、このシリーズ「HTML＆CSS完全攻略ロードマップ」もカスタマイズの余地が多くある状態まで一緒にソースコードを書いていき、その後は各自でカスタマイズして勉強してもらうという形をとっています。
プログラミング学習サービスを使う場合は、できるだけ時間をかけずにどんどんと進むことを意識すれば、学習効率が上がるかもしれません！
後々になって確認しづらい
後々述べるのですが、プログラミングは基本的を勉強して、開発段階に入ったとしても、何かを作っているときに、「あ、忘れた！調べよう！」というのを日常的に行っていきます。そのことを考えると、基本的なことを学んだ教材を再度確認することが多くなってきます。そのときに、プログラミング学習サービスを使っていては、確認するのにその内容がどこにあるのかが分からなくなり、確認に時間を取られませんか？それは非常にもったいないことです。
何を使って基本事項を習得すればいいのか
Macrovector – jp.freepik.com によって作成された business ベクトル
結論から言います。
プログラミング学習で基本事項を押さえて、もっとも早く次のステップに進む方法は、「書籍」の利用です。
確かに誰しもが考えたことのある古典的な手段には変わりないのですが、結局なんでも、原点に戻るのが1番よかったりします！
プログラミング学習において、書籍が最も効率の良い勉強法である理由がコチラです！
- 時間的なコスパが最強
- 開発段階に入ってもずっと使う
1000円や2000円を出して参考書を買うことも勉強効率を上げるためだと思えば安いものです。私自身も、「勉強法」自体はこの「完全攻略ロードマップ」で紹介する方法で行っていますが、各言語につき1冊以上は信頼できる書籍を持つようにしています！
それぞれの理由について、「時間的コスパ」などよく分からない単語もあると思うので解説していこうと思います。
時間のコスパが最強
突然ですが、みなさんはTwitterなどでプログラミング学習の過程を共有したりしてますか？
話はずれますが、みんなの周りのプログラミング学習者の学習ペースなども知れて、励みになるので非常にオススメですよ！私もこのアカウント(@yuu_yoshi12)で日々の学習やこのHTML＆CSS完全攻略ロードマップの新着情報などを共有しています！
みなさんの中にも、私と同じように学習過程や記録を共有している人も多いのではないでしょうか。このようにTwitterをしている人ならなんとなく気付いていたかもしれませんが、プログラミング学習サービスを利用している人で、そこから抜け出して初案件獲得しました！という方は何人ほど見たことあるでしょうか？ちなみに僕はほとんどありません。もちろん、Twitterをやめてしまったとか、案件獲得のツイートをしていないだけとか理由はまちまちでしょうが、プログラミング学習サービスを利用していて、案件獲得前にプログラミング学習に挫折してしまうという理由が一番多いように思います。私はこのことがプログラミング学習サービスを利用することの「時間的コスパの悪さ」を象徴する現象になっていると思います。
ただでさえ、プログラミング学習は仕事をもらうまでの時間が長くかかってしまうにも関わらず、ずっとプログラミング学習サービスを使っていては、初案件獲得に1年とかかかっちゃいますよ！あくまで個人的な意見です。
私自身も以前に、プログラミング学習サービスを使っていたことがあるのですが、覚える必要のない基本事項の確認をしつこくしつこく繰り返して、全然先に進めてる感じがしなかったので止めました。ちなみに書籍での学習に移ってからは、夜の空き時間に読み進めるだけで、2ヶ月かからずに基本事項の学習は終了しました。
開発段階に入ってもずっと使う
実は、先ほど基本事項の学習が終了したと言いましたが、みなさんはこうは思いませんでしたか？
こう思った方！さては第1弾を読んでいませんね？？
第1弾でここで「基本事項の学習は終了した」と言うのがどういう状態なのかということを説明してありますので、是非見てみてください！ここの認識の違いが原因で、ほとんどプログラミング学習者はプログラミング学習を挫折してしまうのです。
さて、私は開発段階になってもずっと使うと書きましたが、その通りで、仕事をもらって開発する段階になった今でも、いつでもあとで説明する「ある書籍」だけはいつも隣に置いて、キーボードをカタカタ打っています。
いや、終わってるんです。
何度も言いますが基本事項は覚えなくていいんです。存在だけ認識していれば、使うときに調べるだけです。使うときになって調べるのに書籍は最適です。なんせ、使いたい表現を索引で調べてページを引くだけですからね。
この作業を結構な頻度で行うため、確認のしやすさは最優先事項と言ってもいいくらい重要だと思っています。
このような観点からも「書籍」を使った基本事項の勉強をオススメします！
HTML＆CSSの基本の勉強手順
Pikisuperstar – jp.freepik.com によって作成された technology ベクトル
さて、ここからは本題である「HTML＆CSS基本事項の勉強法」に触れていこうと思います。みなさんのそれぞれのレベルに合わせた勉強法を紹介していくので、そのレベルに合ったところを読み進めてください！
プログラミング自体が初めての方
初めてのプログラミング言語として「HTML＆CSS」を選んだのは良い選択だと思います！ただ、プログラミングが初めての方にとっては、急に画面にカラフルなソースコードが無限に並んでいるような光景に抵抗を覚える人も多いと思います。そこで、プログラミングに初めて取り組むという方は、まずなんとなくプログラミングというものを理解するという段階が必要になってきます。
その「なんとなく理解する」という段階を飛ばしてしまうと、ただその後で今どんなことをしてるんだろうかということが、イメージできなくなり、ただただソースコード(プログラム)を書くという状況になり、プログラミングが、嫌になり、挫折してしまいます。
なんとなくプログラミングを理解するというのは、「プログラミングをできるようになったらどのようなことができるようになるんだろう」であったり、「プログラミングってそもそもワードでカタカタコード打っても急にそれがプログラムにはならないだろうし、どうなってるの？」といった漠然としたイメージを捉えるということです。
でも、この段階に長い時間をかけるのはもったいない！できるだけイメージが膨らみ、時間がかからないPHPの勉強手段が必要となってきます。
その板挟みになってしまいそうな欲求を上手く満たしてくれるのが、この書籍です。
デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]
いつも、他のプログラミング言語の基本事項の学び方の「プログラミング自体が初めての方」向けの書籍は「「いちばんやさしい教本」シリーズ」を勧めているのですが、HTML＆CSSに関しては、この本は少しレベルが高く、全くプログラミングに触れたことのない方への最初の一冊としてはハードルが高いかなと感じました。そのため、今回は「デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]
」をオススメします！「「いちばんやさしい教本」シリーズ
」も良書だったんですけどね。
オススメポイントと使い方
この「デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]」は、ページ数が192ページと本格的なHTML＆CSSの参考書と比べると、そこまで内容の多いものではなく、集中すれば１週間で読み終わるくらいの内容といえるでしょう。「内容が薄いってこと？」と思った方もいるかもしれませんがそうではありません。プログラミングが初めての方にとって、必要なことだけを簡潔にわかりやすく体系的にまとめてくれているということです。じっくりとHTML＆CSSの勉強を始める前にさらっとイメージの部分を理解するのに最適だと思います！（ちなみにこの過程は初めてプログラミングを勉強する人にとっては必須だと思います）
プログラミング自体が初めてのHTML＆CSS学習者の方はまず、こちらの本を1週間くらいで、ぱぱっと読んでください！もちろん、それぞれのペースで構いませんが、この学習段階はあくまでこれから始まる長い長い試合の準備運動の時間と捉えてください。イメージさえ掴むことができれば、内容を完璧に覚えるといった必要性は全くありません。
このとき、実際にそれぞれの例題についてプログラムは書かなくても大丈夫です！とにかくここでは、イメージを持つことが目的です。
この本は、正直なところ良い意味で広く浅くという内容の本で、この本だけで基本事項を終了とするのは次の開発ステップで行き詰まる可能性が高いです。
せっかく本を買ったのに、やり込まなきゃもったいないと思ったり、基本事項が完璧にならないなら、次の「他の言語を経験したことがある方」レベルに進んじゃおうかなと思ったりした方がいたら、一旦踏みとどまって頂きたいです！この段階は、ないがしろにされがちですが、本1冊でプログラミング学習効率が格段に上がり、挫折率もグッと下がるのでコスパ最強なくらいです！
また、この本はWindowsにもMacOSにも対応してくれているのが、高評価できるポイントだと思います。みなさんの中には、「プログラミング」って難しそうと思っている方が多いと思いますが、実際一番難しいのは「環境構築」と言っても言い程、環境構築は難しいです。HTML＆CSS完全攻略ロードマップでも、質問をされることがありますが、「環境構築」についてのご要望が多ければ、記事作成しようと思います。しかし、基本的には書籍に書いてある方法と、自身でググる力を駆使して、環境構築を行って頂くことをオススメします。この先どのプログラミング言語を勉強するにあたっても「環境構築」という部分は必要になってきますので。
手順のまとめ
ここでは、「デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]」を使うときの、勉強手順についてご紹介したいと思います。
- HTML＆CSSのイメージを膨らませることを目的に読む
- プログラムは書かずに読み進める
- 1週間程度で本を読み終えるペースで読む
この手順を踏んで、「デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]」を読み終えたら、次の「他の言語を経験したことがある方」レベルに移りましょう！ここからが本番です！
他の言語を経験したことがある方
このレベルを読んでいる方には2パターンの人がいると思います。一つめのパターンは「プログラミング自体が初めての方」レベルの勉強法を終了させて、ステップアップしている人。もうひとつのパターンはタイトル通り、他の言語をすでに経験したことがある方というパターン。
前者の「プログラミング自体が初めての方」レベルの勉強法を終了させて、ステップアップしている人は、「プログラミング自体が初めての方」レベルで、HTML＆CSSのイメージを膨らますことができているので、このままドンドン進めていきましょう！
既に他のプログラミング言語を経験してこのレベルからスタートしている人は、PHPやPythonなどのプログラミング言語でもいいのですが、他のプログラミング言語を経験したことがあるということなので、このレベルからスタートしてもらって大丈夫です！
その理由は、HTML&CSSは他のプログラミング言語とは少し違い、関数や変数といった考えが基本的にはなく、他の言語を少しでも経験したことのある方であれば、だいたい命令を書いてそのあとに内容となる変数や文字列が来るというだいたいのプログラミング言語に共通する構造など、もっとも基本的な部分はある程度理解できているのではないでしょうか？
このような、流れを理解できているみなさんにとって、HTML＆CSSを理解するのはそう難しいことではありません。というか、簡単でしょう。
基本的な部分の勉強は必要ですが、長い時間をかけるのは非常にもったいないですよね！そこで、そのバランスを上手く兼ね備えている私自身も信頼している参考書がこの書籍です！
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
オススメポイント
この「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は、HTML＆CSSを書いていくためのテキストエディタについてなど本当に基本的なところから、実際に仕事を受けたときに、「あれ？こういう機能を追加したかったら、どういうふうにソースコードを書いたらいいんだっけ？」という、実践的なところまで幅広く使用できます。HTML＆CSSは複雑で難しい言語ではないですが、この参考書のように、レイアウトも見やすくまとめられていると、実際に調べるときも効率が良く、ストレスに感じません。（参考書の中には痒い所に手が届かないような物もあるので、そういうものに当たるとストレスがたまるんですよね笑）
もちろん、私自身HTML＆CSSの文法などを忘れてしまうと、インターネットを使って調べることも多々あります。が、最初はこの本で索引を見てみるようにしています。
なぜかというと、プログラミングには書き方が何通りもあるからです。同じ実行結果が導かれるソースコードの書き方が何パターンもあったとき、調べる度に違う文法や書き方があったら、その度に書き方を勉強することになって効率が落ちますよね？それに対して本で見返すとページを開いた瞬間に、以前に勉強していたところなら、「あ、わかったわかった！」と3秒くらいで、理解できることも多々。しかも、専門家が書いているので、ソースコードの効率といった部分もある程度担保されている。
例えば、Webサイトの横幅を決めたいってなったときに、ネットで検索すると「横幅を指定するには”width:〇〇px;”と書く」と書いてあるとしても、実際は、スマホにも対応したWebサイトを作ろうとすると、「width:〇〇%;」と書く方が良かったりします。現時点では、「？？？」と言った感じで構いませんが、後々そういうところが大事になってきたりするので、1冊信頼できる参考書を持っておくと便利です。
また、結論ですが、素人が書いたWebサイトより、これまで多くの方に読まれてきて、改編などを繰り返しているプロが書いた参考書のほうが、プログラミングのコードの説明などは分かりやすいです。この完全攻略ロードマップも、そのスタンスで作られており、その書籍で足りない部分を補い、案件を受注できるレベルに成長させようという狙いで作られています。
この参考書の使い方
この参考書は以下のようなステップで学習を進めてください。
- それぞれのページを読む
- 本に書かれているソースコードを自分でも打ってみる
- プログラムの内容を理解する(※1)
- こういうこともできるのかな？とか思ったら試してみる
- できなかっても気にせず次へ
- 文法などを覚えようとはしない
(※1)こう書いたらこういう実行結果が出るんだなくらいで大丈夫です。
写真では②と③が同じところを指していると思いますが、意味合いとしては、まず①を読んでから、②に進み、次に③でプログラムの内容と、①で読んだ説明文を理解して、④に進むというようなイメージです。
ここまでのステップをできるだけ時間をかけずに繰り返しながらどんどん進めてください。
私もこのステップを実際行って学習を進めましたが、だいたい目安として1ヶ月くらいで、参考書を終えました！もちろん各項目の文法とかほとんど覚えてない状態です。「画像を挿入するならたしか”img”という文字列を使ったなあ」くらいです。でも、それで大丈夫なので安心してください！
複数の言語で開発経験がある方
複数の言語で開発経験がある方については、基本事項の学習はお手の物でしょう！特にHTML＆CSSは他の言語と比べても学習コストが引くいため、基本事項の学習はできるだけ短縮しましょう！
しかし、もし少しでもプログラミングの基礎学習に苦手意識があるのなら、このレベルの一つ前の「他の言語を経験したことある方」のレベルから始めても良いかもしれません。私自身もひとつ前のレベルの学習法から始めました。
このレベルの方に使ってほしい参考書は、コチラです。
この参考書は開発をするようになっても、辞書のような使い方で、頻繁に使用するため、どのレベルの方にもオススメしています。しかし、1つだけ注意点があります。その注意点とは、
初心者にはハードルが高い
という点です。もちろんこのレベルに達するまで順序を追ってステップアップしてきた方にとってはなんの問題もありません。しかし、プログラミングが初めての方がこの本を読むと、少し難しく感じてしまう可能性が高いのでそこだけには注意しましょう。
学習ステップ
このレベルの方は以下のような手順で学習を進めてください。
- 読む
以上です！
え、それだけ！？と思われるかもしれませんが、複数の言語で開発経験のある場合、それぞれの方々に合った、基本事項の学習法を持っていると思います。その方法で良いので、できるだけ早く基本事項の学習を終了させて次のステップに進んでいきましょう。
必ずこの3冊全てを順番に勉強すべきなの？
[pz-linkcard-auto-replace url="https://jp.freepik.com/free-photos-vectors/business"]
今回の第3弾では、それぞれの学習者のレベルに合わせた参考書を3冊紹介しました。ここでこう思われた方はいませんでしょうか。
たしかに、3冊を読み込んでがっつり勉強しようと思えば、相当な時間が必要になってくるので止めておくことをオススメします。
具体的にどういう状態になったら、基本事項の学習を終了して次のステップに進めばいいのかという話ですが、それは、「第5弾」以降を見て判断してください！第5弾からは、実際にHTML＆CSSを使って、様々なモノを作っていきます。そこに書かれている内容が理解できるようになっていれば、もう基本事項の学習は終了です！
あなたが信頼できる書籍をお供にして、次のステップに進みましょう！
案件をもらうためには事前に会員登録をしておく
以下のようにフリーランスエンジニアとして活動する際に、登録していると案件をもらえるサイトに会員登録を事前に済ませておくと、プログラミング学習が終わるころにスムーズに案件がもらえるようになると思うので、会員登録とかは先にしておくことをオススメします！
まとめ
HTML＆CSS完全攻略ロードマップではこの先はいろいろなモノを作っていくことになりますが、できるだけ初心者の方にも分かるように詳しく説明していきます！しかし、ここで紹介した参考書に書かれている内容については、説明を省略させてもらうことも多くなってきます。全部説明してたら10万字とかになってしまうので許してください。ただ、この記事中に書いた勉強法をしっかりとしていれば、つまづくことはないと思うので安心してください！
今回は、「HTML＆CSSの基本事項の学習法」について説明しました。どのレベルの方でもここに書いてある方法で、学習を進めていけば必ず次のステージへと進むことができますので、頑張りましょう！
挫折しそうと思った方はこのページも読んでみてください！
この記事の通りに、HTML＆CSSの基本事項の勉強ができたら、次は実際にいろいろなモノを作って自分のプログラミングレベルを上げていくステップに入ります。次の第4弾では、HTML＆CSS完全攻略ロードマップで何が作れるようになるのかと言ったところに焦点を当てて、説明していきます。
HTML＆CSSの基本を勉強する前に、実際に何が作れるようになるの？と気になる方は第4弾を先に読んでおいてもいいかと思います！でも、ここで学んだ学習法をきちんと実践してから次のステップに行くことをオススメします。(半強制的なオススメです笑)
今回は、以上になります！質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください！
その他、勉強法や就活、プログラミングに関する相談なども受け付けています！
