結論、HTMLとCSSは独学でも習得可能です。
一方で独学によってHTMLとCSSを学び始めた結果、挫折してプログラミングの学習をやめてしまった人も多くいます。
私自身、始めたばかりの時、間違った勉強方法で学習を続けていました。そして、挫折しそうになっていたので、気持ちはわかるつもりです。
せっかく時間をかけてHTMLとCSSを学んだのにも関わらず、結局何も身につかない事態になりかねません。
今回の記事では、プログラミングを初めて学ぶ人が、HTMLとCSSを効果的に独学で学ぶための方法について書きました。
記事を読んで欲しい人
- 独学でHTMLとCSSを勉強したい人
- まずはお金をかけずにプログラミングを学びたい人
この記事を最後まで読むことで、HTMLとCSSを独学で学ぶときのコツについて詳しく知ることができます。
まずはじめにHTMLとCSSとはどのような言語なのか解説していきます。
Contents
HTMLとCSSはどのような言語なのか？
HTMLとCSSの特徴
簡単にHTMLとCSSの特徴をまとめると以下のようになります。
HTML:ブロック、構成
CSS:装飾
HTMLは全体の骨組み、CSSは単なる色をつけたり動かすだけではなく、アニメーションをつける機能も加えることが可能です。
ほとんどのWebサイトはHTMLとCSSを使って作られていて、これらの言語なしには成り立ちません。
一見、簡単だと思われがちなHTMLとCSS。ですが、動きがあって、デザイン性のあるリッチなサイトは、コーダー達が日夜磨いた知識と経験の結晶とも言えます。
HTMLとCSSは簡単だと言うエンジニアが多くいますが、きちんと理解して使いこなすためには、それ相応の修練が必要で、とても奥が非常に深い言語です。
例えば、このサイトをみてみると、
任天堂の創業家・山内家一族の会社「Yamauchi No.10 Family Office」のウェブサイト
https://y-n10.com/
とてつもない動きをしています。
しっかりと知識を深めていけば、見る側を引き込ませるサイト制作も可能となるでしょう。
CSS設計はチーム開発で効率よく構築するノウハウの塊
CSSにはCSS設計と言って効率よくCSSを書くための方法が確立されています。
代表的なCSS設計手法
- BEM
- FLOOCS
1人ではなく組織で行う開発の場合、設計手法を知っていなければ、足手まといになりかねません。
HTMLとCSSは簡単だと思われがちです。また、エンジニアの中には「HTMLとCSSは言語ではない」とまで言う人もいるそう。
しかし、HTMLとCSSで表現できる自由度や汎用性を考えると、世の中に必要とされる立派な言語ですし、難易度も低くはありません。
HTMLとCSSを身につければお金を稼げる
クラウドソーシングを見ると、HTMLとCSSを使用したコーディング案件は数多く募集されています。案件依頼の量を見ると、仕事を獲得できるチャンスはとても高く、副業としては最適です。
その中でもオススメなのは、HTMLとCSSを使ってこなせるLP(ランディングページ)です。
制作会社で依頼する際の相場は、デザイン込みで２０万円〜となっています。
インターネットビジネスで売り上げを上げるためには、ランディングページはとても重要です。
インターネットでビジネスをすることが主流の現代では、LPのニーズが高く、コーディングだけではなくデザインスキルやライティングスキルを磨けば、どんどんと単価を上げることが可能です。
以上の理由から、HTMLとCSSだけでも副業は可能と言うこと、またニーズに高い大切な言語ということは理解できたのではないでしょうか。
次のセクションでは独学での具体的な勉強方法についてご紹介していきます。
HTMLとCSSを独学する方法
独学で習得する具体的なステップはこちらです。
- プロゲートで概要の理解
- デザイン込みも学べる書籍で学習
- 動画教材「Udemy」で応用を理解
- 模写で実践
このステップに従って詳しくご説明していきます。
Step1.「プロゲート」で概要の理解
プログラミングを始めたばかりの人が、まず初めにやっておくべきは、プロゲートです。
プロゲート→https://prog-8.com/
プロゲートがオススメな理由
- 完全初心者向け
- 動画で見ることができるので、わかりやすい
- ゲーム感覚で進めることができる
また、他の学習サービスと比較すると、初心者が陥りやすいポイントをきちんと抑えているのが特徴です。
全くプログラミングをやったことがない初心者でも、プロゲートをやっていれば、自ずと理解できるようになっていきます。
なので、Twitterや他サイトで言われているように、「とりあえず、プロゲートをやろう！」は間違っていません。
Step2.デザイン込みで学べる「書籍」で応用を理解
プロゲートでプログラミングの基礎を学んだら、次は実践を学べる学習方法を選びましょう。
実際にサイトを作るプロセスをまとめている書籍は多くあります。エンジニア向け、趣味で学んでいる人向けと様々な側面で書かれているので、自分に合ったものを選ぶことが大切です。
書店で立ち読みしたり、メルカリなどで試しに買ってみた結果個人的におすすめなのはこの本。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
この本では、実際に現場でよく使われているCSSだけではなく、デザインの考え方がまとめられています。
デザインについての知識は今後役に立つので、基礎を学んだ後に最適な一冊です。
Step3. 「Udemy」でしっかりと体系を理解。
ここまで来れば、コーディングの基礎知識だけではなくて、Web制作に必要なデザインについても身につけているでしょう。
まだ仕事を受けるには、知識や実践が足りていないので、応用スキルを身に付ける教材をやっていくのがオススメです。
今まで得た知識の発展形を学ぶのに、オススメなのは「Udemy」で購入できる動画教材。
Udemyとは、動画を通じて自分の学びたいものを学ぶことができるプラットフォームのことです。Udemyにはプログラミングスキルだけではなく、マーケティングのようなビジネススキルを学ぶコースもあるので、時間がある時興味のあることを学んでいます。
「Udemy」でHTMLとCSSを学ぶのであれば、おすすめの動画教材はこちらです。
→[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
この教材では、現役エンジニアの講師が実際に現場で使用しているコーディング手法を元に、「HTML/CSS」とプログラミング言語「JavaScript」の知識を初心者にも分かりやすく解説しています。
また、基礎だけではなく、jQuery/Vue.jsまで学ぶことができます。
頻繁にセールをやっていますので、その時に狙って購入してみてくださいね。
Step4.「模写」で実践。
最後に「サイト模写」をやってみてください。
模写とは、すでにインターネット上に掲載されているホームページを真似して、コーディングしてみることです。
簡単な手順としては、こちらです。
- 真似したいWebサイト探す。（ランディングページがおすすめ）
- index.htmlとstyle.cssのファイルを作成
- WebサイトをGoogle cromeで開き、デベロッパーツール でコードを読み解く。
- コードをみながら、自分で作成したindex.htmlとstyle.cssに記述。
この模写によって得られるのは、案件の肌感です。
まだ、なぜこうなっているのか？まで理解できる段階ではないかもしれません。しかし、今の段階では理解できていなくてもとりあえず手を動かしてみるという行為によって、自分の実力は上がっていくでしょう。
以上、独学で勉強する方法についてご紹介しました。
HTMLとCSSは初心者が唯一独学ができる言語です。
独学は大変ですが、なぜ独学をすると良いのかのメリットについてご紹介します。
HTMLとCSSを独学するメリット
自ら学べる自走力がつく
HTMLとCSSは独学で実務レベルまで身に付けることができる唯一の言語です。
独学で効率よく身につけるために必要なのは検索力で、わからない部分に対する答えをどうやって見つけるかが重要になってきます。
また、検索をして情報を見つけるだけではなく自分が欲しい情報なのかを見極めることが必要で、初心者でもそれができるのが、HTMLとCSSなのです。
自分で答えを探して見つける力は、次のステップでWordpressやJavaScriptを詳しく学んでいくためには必要な力となってきます。なので、今のうちに身につけておくことをお勧めします。
自分に自信を持つことができる
プログラミングスクールではなく、独学でプログラミングを理解できたと言う自信は何にも変えがたいものです。
本業の会社で嫌なことがあり自信を喪失したとしても、自分を支える土台になり得ます。
何か一つでもやり切ったと言う自信は、今後新しいことを始めるときにも大切な原動力となりますので、ぜひ独学で学びきってみましょう。
考える力が身につく
プログラミングを身につけ、仕事で使っていくためには、考えることは大切な要素です。
考えることで、学んだことの定着率が高くなりますし、実際に現場で使える技術として身に付けることができるのです。
独学で身に付けることで「なぜこうなるの？」というのを深く考えることができます。
学び始めた最初の頃は、divタグとsectionタグの違いであったり、なぜclassが必要なのかすら、理解できませんでした。
学習をするプロセスとして、
わからないことを自分で検索。答えを見つけて理解。そして、わからないところがあれば、また調べる。
を、繰り返すことになります。
繰り返すことでだんだんとスピードが速くなり、自分がつまずきやすいポイントを振り返ことができます。
このプロセスを繰り返すことによるメリットは非常に大きく、自分で学ぶことでしかこの力を得ることができません。
- わからない部分→何がわからなかったのかを考えるようになる
- 理解できない→理解するために何が必要なのかを考えるようになる
プログラミングをこれから学んでいく上で、この「考える」というプロセスは大事です。
自分で学べるというスキルを、早い段階で得ているかどうかが今後の学習効率に関わっていくように感じます。
考える力を養っていけるのが、独学のメリットでもあり、やるべき理由と言えるでしょう。
一方で、プログラミングスクールは効率よく学ぶことを前提にカリキュラムを組んでいるため、考える力を養うことができません。
受け身で学ぶことは悪いことではありませんし、効率が良いのも事実です。
しかし、考える力が身についていないので、スクール卒業生は現場でも言われたことしかできないようになっていると言います。
独学で学ぶメリットについてご紹介しましたが、注意する点もあります。
次のセクションでは、注意点について説明していきます。
HTMLとCSSを独学する時の注意点
勉強ばかりではなくサイトを作ってみる
HTMLとCSSで基礎練習ばかりをするだけではなく、自分でサイトを構築するのがおすすめです。
例えば、display:flex;の挙動が確認できても、使わなければ意味がありません。
なので、自分で自作サイトを作って、一つずつサイトに落とし込んでいきましょう。
それによって、自分のサイトに愛着が持てますし、学んだプログラミングの定着にもつながります。
わからなかったら悩み過ぎない。
自走力や考える力について書きましたが、どうしてもわからない時は、悩み過ぎは禁物。
独学がきっかけで、挫折しそうなら無理はダメです。
プログラミングを独学して挫折する理由として、上げられるのはエラーが解決できないことなので、エラーにハマりすぎて挫折しそうなら、スクールを検討してみてもいいかもしれません。
スクールであれば、すぐに質問できるメンターがいるので、「わからない時はすぐに聞く」ことができます。
これはプログラミングをスクールで学んでいくための大きなメリットなので、存分に活用しましょう。
以上、注意点について、ご紹介しました。
まとめ：HTMLとCSSを独学して得られたこと
- 今までわからなかったことが、わかるようになっている楽しみを味わえたこと
- 学習するコツを身につけられたこと
独学力は今後、いろんな場面で応用が効くスキルです。
プログラミング学習を通して、自分がどのように学習したらスキルを身につけることができるのかを知ることができました。
独学力を身につけられた大きな理由は、本当に調べて、悩んだからです。
これを味わえたのは、大きな財産となっています。ぜひ、HTMLとCSSの独学にチャレンジしてみてください。