HTML/CSS 独学学習法【ゼロ知識〜初級者卒業まで】

プログラミング

私はスクールでプログラミングを学習していますが、HTML/CSSに関しては独学で勉強しています。

Twitterでのフォロワーさんにもたくさん独学で学習されていらっしゃる方がいます。

私も、独学で勉強していると、心が折れかけたこともありました

本記事では、そうした自分の経験も交えつつ、HTML/CSSの知識ゼロから中級者入門までの学習法についてお伝えするとともに、挫折しないステップについてもお伝えしたいと思います。

これからHTML/CSSをゼロから学習していこうとしている方の参考になればと思います。

教材についてですが、フォロワーさんの多くは、#デイトラ #くりnote #ドットインストールと呼ばれるオンラインのテキストで学習されている方が多いです。

しかし、私はそのどの教材も手を出していません。

教材として使用しているのは、市販の参考書ネットの情報だけです。

勉強法に効率さはあるかもしれませんが、人にあう勉強法というのもあります。

周りに惑わされず、自分の勉強法で進めてみてください。

誤解のないようにお断りしておきますが、決してオンライン教材の批判をしているわけではありません。これだけたくさんの人がやっているわけで、きっといい教材だと思いますよ。

レベル0(知識ゼロ)〜

Progate

#デイトラ #くりnote #ドットインストールと言った教材に手を出していない私でも、Progateはやりました

とはいえ、Progateも有料版には手を出していません。あくまで無料。そして、あくまでMobile版。

Progateのいいところは、多くのプログラミング言語の把握ができます。

HTMLってどういう言語なんだろう?CSSって何で必要なんだろう?

そうした、言語の特徴を掴むのに、非常に優秀なアプリです。

私は、HTML/CSSだけでなく、Ruby、PHP、JavaScriptと一通りやりました

まずは、Progate。これは間違いないです。

レベル0〜15:知識ゼロ〜初心者

1冊目:『HTML&CSSとWebデザインが1冊できちんと身につく本』

私がProgate後に使用した初めての参考書はこちらです。

『HTML&CSSとWebデザインが 1冊できちんと身につく本』

この書籍では4種類のレイアウトのサイト制作が学べます。

ホームページで使用する素材はダウンロードできます。

こちらのサイトからサンプルページがダウンロードできます。

いいところ

  • 本当の初心者を想定した説明が分かりやすい。
  • 1つのホームページ作りを通して、4つのデザインを学べる。
  • カラーで見やすい

本当の初心者向けに、Googole Chromeの使い方JPGファイルとPNGファイルの違い、HTML/CSS入力用のテキストエディタ「Brackets」のインストール方法まで説明してくれます!

悪いところ

  • 旧版を買うと、正誤表が出ており、Flexboxについての理解があやふやになります。

私はメルカリで購入し、手元に届いたのは初版でした。

正誤表があるのですが、Flexboxのデザインを整えるClearfixについて根本的な修正をしているんですよね…。

しかも、テキスト通りにやっても、正誤表通りにやっても、表示される結果は同じなんですよ。

私がFlexboxについて、混乱する元でした。

3版以降は正誤表でていませんので解消されています。(要チェックです!)

上記を踏まえた上で最初の1冊目としておすすめする参考書

上記を踏まえて、私がおすすめする最初の参考書はこちらです。

『1冊ですべて身につくCSSとWebデザイン入門講座』

私はこの本を持っていませんが、もし私が最初から始めるならこの本を購入します。

理由として、

  1. 発行年が2019年と最新のコーディングが学べる
  2. 初心者が必ず頭を悩ませるFlexboxについてわかりやすく説明されている
  3. 全国の書店員がオススメする本(CPU大賞)第1位! を受賞している。

1冊目の学習法

私がやった失敗

まず、本を一通り終えたのち、『できる!』と思ってしまいました(笑)

なんて安直な…と思われるかと思いますが、きっと上記にあげたオンラインの教材を1回やっても、同じように『できる!』と思う人多いと思うんです。

だって、「できる!」と思わせることができるのがいい教材なんですから。

その結果、『模写』と言われる作業に入ってしまいました。

模写とは・・・既存のサイトをそのまま真似て、自分でサイトを作成することです。

結果は、お分かりのとおり出来ませんでした

出来てヘッダーだけです。

このとき、一度HTMLとCSSの学習から遠ざかりました。

幸いにも、私はスクールでRubyとRailsを学習しており、プログラミングから遠ざかるということにはなりませんでしたが…。

結果、私がしたのは復習

一度HTML/CSSの学習から遠ざかった私がしたのは、もう一度最初の1冊目をやり直すことでした。

シンプルなようで、大事なことを怠ってしまいました。

2周を終えてから、『模写』に入りました。

2周してから、模写

参考書を2回やり終えて、模写に取り組んだわけですが、ここでの模写は企業のサイトではなく、自分がこれまで2回繰り返して作ったサイトの模写です。

つまり、テキストの内容が習得できているかの再確認です。

再度失敗する。

2周テキストをやり終えた私は、ここでも「できる!」と思ってしまいました。

だって、テキスト2回やったんですもん。

まさに、しくじり先生です。

それはなぜか。

まだ初心者向けの1冊しかやっていないからです。

経験値が足りていません。

(それに、正誤表のせいでclearfixについて混乱しているので…)

ご存知の通り、HTML/CSSの世界は奥が深いんですよ。

1冊やり終えただけで出来るわけないじゃないですか。

でも、やる価値はあります

レベル15〜30:初心者〜中級者入門

初心者までは、どんな教材でもいいと思います。

しかし、レベルアップするためには、この本がとても良かったのでオススメさせていただきます。

2冊目:『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』

『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』

こちらのサイトで、サンプルページが見られます。

サンプルページを見て、どうやって作るんだろう?と思った方は、一度本書籍で勉強するのがいいと思います。

いいところ

  • レベルがちょうどいい。
  • デザインがオシャレ。
  • 3つのデザインレイアウトが学べ、シングルレイアウトページは自分のポートフォリオにも活用できる。

入門書では書かれていなかった、SEO対策(<h>タグなのに非表示にする方法)や、Javascriptの知識がなくてもJSを使ったデザインレイアウト、reset.sccなどが書かれています。

さらに、チャレンジとして演習問題があり、テキストを見ながら作ったサイトをさらにカッコよくできます。

悪いところ

  • レスポンシブ対応が不十分。

最初の発行年2015年と古く、レスポンシブにうまく対応できていません。

レスポンシブのところでは、スマートフォンではこのように表示されますとあるけれども、そのレイアウトが違っている…。

むしろ、現代のテクノロジーの進化のおかげで、うまく表示されています(笑)

そのため、書籍通りに加筆、修正していくと、レイアウトが崩れてしまいます。

正誤表も出ていませんので、お手上げですね(笑)

こういうところは、本のデメリットが出てしまいますよね…。

2冊目の学習法

この辺になると、自分で画像を変えたり、アレンジしながら制作できると思います。

そうした遊び心でアウトプットしながら、2回、3回と繰り返し行いたいところです。

模写も、このレベルになってようやく出来てきます。

表示が崩れても、ここをこうすればいいのかな?とわかってくるようになります。

初心者:オススメの模写サイト

ペライチ(Peraichi)

peraichi, ペライチ

同じように、上記で自分で作ったサイトでもいいのですが、全く初めてのサイトにチャレンジするのもいいと思います。

私がチャレンジしたのは、『ペライチ』でした。

ペライチとは、テンプレートで誰でもホームページが作成できる

しかも、料金は無料プランからあります。

ペライチ模写オススメの理由1

なぜ、ペライチかというと、もし今後、自分がWeb制作で営業することを想像してみてください。

お客さんは、無料でホームページを作れるサービスと、自分のWebを比較してきます。

その場合、ペライチではこれが出来るけど、自分ではこれが出来ると差別化をしなくてはいけません。

はっきり言って、自分で作るよりはるかに早くサイトが作れ、レスポンシブにも対応。しかも、無料。

勝てますか?

ペライチを模写することによって、Javascript学習しなくちゃいけないな、Wordpressも覚えないといけないななど、自分の目標を見つめ直し、モチベーションを維持する意味でも、いい取り組みだと思います。

ペライチ模写オススメの理由2

無料版は、デザインがシンプルで簡単です。

シングルレイアウトページがほとんどで、無料で作れるサイトにはJavascriptを使用しているサイトはありません。

初心者でも十分に模写できるレベルです。

ペライチ模写オススメの理由3

模写する場合、フォントやフォントサイズをGoogleの拡張ツールなどで調べる手間がありますが、ペライチなら指定できるので、簡単に把握できます。

そうした、手間を省くことも出来るので、作成がスムーズです。

模写するときの注意点

模写をすると、どうしても細部までこだわり、クローンサイトを作らないといけない気持ちになってしまいます。

けど、模写の目的は、CSSのコーディングスキルがちゃんと習得できているかの確認であり、Marginのpxの数値、色など気にすることではありません。

そこを忘れてしまうと、制作に丸一日以上かかってしまい、ドツボにハマってしまいます。

あくまでも、模写をする目的は、自分の学習していることがちゃんとインプットできているかの確認であることを忘れないでください。

まとめ

⒈ まずは参考書1冊、あるいはオンライン教材を2回〜3回(模写)を繰り返す。

⒉ 2冊目でレベルアップする。

⒊ 模写で、学習内容の確認。

⒋ 足りないところを学習する。

次のレベルアップまで

私もまだまだ学習の身です。

これからも、レスポンシブ、JavaScriptとレベルアップするための課題は多く残されています。

それでも、まるっきりの初心者は卒業できたかなと思っております。

今後、ゼロから勉強される方のロードマップに少しでもなればと思います。

一緒に頑張って勉強していきましょう!

タイトルとURLをコピーしました