この記事はHTML/CSSが理解できない人へ向けて書いています。
- HTML/CSSが苦手な人
- HTML/CSSが、いまいち分からない人
プログラミングを副業にしたい！
在宅ワークができるようにプログラミングを学びたい！
しかし、学び始めると最初の壁であるHTML/CSSが登場。
はじめの一歩であるHTML/CSSが理解できないと、センスなしかも・・。
と、ガッカリしてしまいますよね。
でも安心してください。HTML/CSSが苦手という人は沢山います。
HTML/CSSが苦手という場合の多くは、独学でマスターしようとしています。
過去のボクも独学で頑張っていました。
もっと早くお金を払って学習しておけば良かったと思っています。
なぜならHTML/CSSの独学は、理解できないことが起きると詰むからです。
スクールやオンライン講座を受けていれば、分からないことを聞くことができます。
１週間、理解に苦しんで悩んでいたことでも先生に聞くと一瞬で解決。
なので本気で稼ぎたいなら独学よりも、お金を払って教えてもらうことを強くオススメします。
デイトラというオンラインのプログラミングスクールで３ヶ月学べばWebサイト制作の副業で５万円くらいは稼げるようになります。
気になる方はデイトラから、Web制作コースの詳細を覗いてみてください。
とはいえ、HTML/CSSが理解できないのには、原因があります。
先に記事の内容をお伝えしておきますね。
- HTML/CSSが理解できない理由
- HTML/CSSを理解するために必要なこと
- 自分の学習方法をチェックしてみよう
- デイトラで学習したら悩みが解決した話
この記事を読んでから学習を進めると、「このままで平気なのか？」という不安がなくなります。
不安やモヤモヤがなくなれば、脳みそが吸収モードに変わります。
脳が吸収モードになれば、あとはひたすら学習に打ち込むだけなのでシンプル！
では、理解できない理由を解き明かしていきましょう。
HTML/CSSが理解できない理由５つ
「HTML/CSSを理解できない」といっても、学習段階によってレベルが違います。
まずは自分がどのレベルなのか当てはめて考えてみましょう。
| お悩みレベル初級 | ・プログラミングに慣れていない ・勉強の仕方が違う |
| お悩みレベル中級 | ・どう書けばデザインが再現できるかという視点がない ・プロパティの種類を知らない |
| お悩みレベル上級 | ・書き方が色々あり、正解が分からない |
どんな状態なのか解説します。
レベル初級：プログラミングに慣れていない
プログラミングに興味を持った段階、もしくは少しだけやってみた状態。
この段階では、HTML/CSSが理解できないのは当たり前です。
そもそもHTML/CSSはプログラミングではなく、コーディングと呼ばれる作業です。
このコーディングは、初心者の登竜門のように考えられがちですが
コーダーという専門職もあるくらいの技術。
エンジニアの中には「コーディングは奥が深くて難しい」と言っている人もいるくらいです。
なので、少し触ったくらいではHTML/CSSの理解はできなくて当たり前です。
レベル初級：勉強の仕方が違う
勉強方法は大きく分けると、独学かスクールの２つです。
独学は、費用が抑えられるメリットがありますが、
時間が掛かるのと相談する人がいないのがデメリット。
スクールは、費用を掛かってしまうデメリットがありますが、
最小限の時間とコツを教えてもらえるメリットがあります。
理解できない場合は、独学で頑張っている人がほとんどなはず。
レベル中級：どう書けばデザインが再現できるかという視点がない
HTML/CSSを理解するには、完成させたいデザインを明確にすることが重要です。
なぜなら、Webサイトは完成したデザインをHTML/CSSで再現していく作業だからです。
プラモデルの部品だけ渡されて「はい、作って」と言われているようなもの。
これだけ見ると、あたり前のことですが、
勉強重視で暗記から始める人も多いのです。
なので、まずは完成させたいデザインを決めて、どんな要素で作られているのかを考えるクセをつけましょう。
文字の大きさは？文字の色は？背景の色は？影はあるか？という具合に。
レベル中級：プロパティの種類を知らない
プロパティの種類を知らないと、再現できません。
文字を太くするには？文字の色を変えるには？背景色を変えるには？
どんなプロパティがあるのかを知っておくと、デザインを再現できるようになります。
膨大な数のプロパティを覚えるのは大変なので、
コツを後ほど紹介します。
レベル上級：書き方が色々あり、正解が分からない
この悩みが生じるということは、そうとうHTML/CSSをいじっている証拠です。
どっちが正しいのか分からないということは、それだけの種類を見ているということなので。
いい悩みです！
解決できると脳汁がでますよ！
たとえば、こっちの解説ではfloatだけど、こっちの解説ではcontainerに入れて動かしている。
こんな状況って、あるあるですよね。
迷ったすえに、どうすべきか？は後ほど解説します。
HTML/CSSを理解するために必要なこと
解決方法を紹介いたします。
HTML/CSSが理解できないのは、下記のような５パターンでしたね。
| お悩みレベル初級 | ・プログラミングに慣れていない ・勉強の仕方が違う |
| お悩みレベル中級 | ・どう書けばデザインが再現できるかという視点がない ・プロパティの種類を知らない |
| お悩みレベル上級 | ・書き方が色々あり、正解が分からない |
解決策：プログラミングに慣れていない
Progeteやドットインストールの無料部分を３周やってみる
３周やってもHTML/CSSを理解することはできないと思います。
そんなに単純ではありません。
目的は、慣れるためです。
とにかくコーディングに慣れることで、強引に次のステップに進ませます。
解決策：勉強の仕方が違う
費用と上達のバランスがいいのは、安価なオンラインスクールでの受講です。
独学だけだと、情報収集を自分でしないといけません。
自分で情報を集めると、無料の情報へアクセスしがちではないですか？
無料の情報には責任がないのが問題。
「解説動画の続きがアップされていない」なんてこともありますし、
理解できない時に相談できる人もいなければ、何をどの順番で学ぶべきかも自分で考える必要があります。
かといって、スクールにガッツリ通うにはお金も時間も必要。
なので、安価なオンラインスクールの中でもフリーランスを育てるためのデイトラがオススメです。
詳しくはデイトラの公式サイトを確認してみてください。
次は、中級者の悩みです。
解決策：どう書けばデザインが再現できるかという視点がない
どう書けばデザインを再現できるか？
これは、数をこなすことで解決できます。
「実現したいデザイン→どうしたら再現できる？→やり方を調べる→やってみる」
これの繰り返しで、一歩ずつ身に着けていくしかありません。
プログラミンもコーディングもコンピューターとの会話です。
とにかく語りかけて、相手の反応を見て、伝わったか？伝わらなかったのか？
どうしたら伝わるのか？
何回も語りかけましょう。
繰り返していくと、プロパティの種類も分かってくるんです。
解決策：プロパティの種類を知らない
プロパティの全てを暗記する必要はありません。
大切なのは、作っている要素一つ一つを分解して考えること。
背景色はグレーで、文字サイズは12px程度、文字の色は#333くらいかな？
みたいな感じで、どんな要素で作られているかが分かれば、
「CSS 背景色 プロパティ」「CSS 文字サイズ プロパティ」でググればOK
ググれる状態にできれば、全てを暗記していなくても問題なしです。
Google Chromeの「検証」機能を使えば、どんなプロパティを組み合わせているのかが分かります。
実際に確認して、作ってみましょう。
次はこんな悩みでしたね。
レベル上級：書き方が色々あり、正解が分からない
デザイン通りに再現できれば、どんな書き方でも正解！
人によって書き方が違います。
人によってまとめ方が違います。
人によってアプローチが違うんですが、ゴールは一緒です。
それがHTML/CSSの奥深いところ。
とにかく「再現したいデザイン」が「できること」に変わればOK。
表現方法やアプローチが複数あることを理解しましょう。
そして「できること」が積み重なって、
自分にあった方法や一般のトレンドを取り入れて、
自分の型を作っていけばいいと思います。
昔書いたコードが、少しうまく書けたりしてきます。
成長を感じれて、うれしいものです。
これで少しでもHTML/CSSが理解できるようになるとうれしいです。
あなたに向いている学習方法の見つけ方
自分に向いている学習方法は独学？スクール？
自分に向いている学習方法を見つけるのは簡単です。
- 何サイトか回遊して、分からない単語をさらに検索
- ちょっと自分でコードを書いてみた人
- プロゲートやドットインストールの無料講座をすでに受講済み
こんな行動力がある人なら独学でもいけると思います。
- よく分からないと進められない
- ちょっと誰か教えてー
- 正確な答えが欲しい
この２つは良い悪いではありません。
どちらにも良い部分と悪い部分があります。
HTML/CSSが理解できない場合は、スクールに通うべきです。
独学は、分からないことがあっても自分で解決するしかありません。
スクールは、分からないことをお金で解決できる。
もう少し深堀していきますね。
独学か？スクールか？
情報はネットの中に無料であるので、時間に余裕があるなら独学でもなんとかなります。
しかし、無駄に時間を使いたくない人や、大量の無料情報の中から自分に必要な知識を探すのが面倒な人は、スクールで学習した方がいいです。
ここからは、おすすめスクールを少しだけ紹介していきますので、独学でいける！と思えた人はここでページを閉じてＯＫですよ。
スクールに通うならデイトラがオススメ
デイトラという教材がおすすめです。
ボクがデイトラで学習して良かったことは２つです
- 「答えはコレ」と教えてくれる
- 目標まで最短で走れる
HTML/CSSくらいの疑問だと答えはググれば９９％は出てきます。
でも問題なのは「目の前に出ている答えに気が付けない」ことです。
スクールで学習してからググると「なんだ！やっぱり、このサイトが答えじゃん！」という場面は沢山ありました。
なによりググって迷う時間が減るので、ストレスも減ります。
スクールのメリットって、ゴールまでの地図をくれることですからね。
とはいえ、プログラミングスクールって30万～50万とかなり高額ですよね。
こんなに高いんじゃ、おこずかいで学習するのは無理です。
ボクは運よくデイトラというオンラインスクールに出会うことができました。
当時のデイトラは、無料で学習手順を教えてくれるTwitterの個人アカウントでした。
どんな手順だったかというと「Progateで○○まで学習して、つぎはドットインストールで○○まで、つぎは・・。」と手順だけを教えてくれるTwitterアカウントです。
つまり、HTML/CSSはProgateやドットインストールで学習し、それでも分からないことはググって調べていく独学色が強い学習方法です。
今現在のデイトラは、HTML/CSの基礎からJavascriptやPHPといったWebサイト構築に必要な知識を教えてくれます。
しかも分からないことはメンターさんに聞いて解決することができます。
HTML/CSSの基礎から現場での応用編まで、独学とスクールの良いとこどりの教材だと思います。
金額は89,800円ですが、知識ゼロからWebサイトを作れるようになり、個人で稼げるようになるまでのフォロー体制ができています。
オリジナル教材は分かりやすいですし、現役バリバリのプログラマーに１年間も質問し放題。
しかも、買い切り教材。１回買ってしまえば一生見ることができます。
このサービスで10万円を切る価格設定、これからスクールで学習するならデイトラ一択です。
まとめ
HTML/CSSはそんなに難しいものではありません。
理解できないのは、本気で理解しようとしていないからだと思います。
ボクも本気で取り組んだら覚えることができました。
独学だと回り道になるので、教材を買ってしまったほうが早いです。
では、また！
[…] →HTML/CSSが理解できないのは自分だけ？克服する学習方法 […]