必見!!HTMLとCSS初心者におすすめの勉強法

これから学ぶ人、挫折した人必見!HTMLとCSS初心者におすすめの勉強法

HTMLを学びたい!!!と思っても、まず何からやれば良いのだろう?と悩んでいませんか?

私も始めはすごく悩みました。。。。

難しくてやめてしまう方も多いと思いますが、コツは学び方の順序の問題な気がします!

適切に順序よく学べば、きっと身につくはずです!

そこで!以前仕事でもHTML/CSSを扱っていた私がおすすめする勉強法をご紹介します!!

また、挫折したあなたでも、きっとできるようになります。

挫折した人に聞いてほしいです。

私が思うのは、一個の解説で理解できないというのは、あなたが悪いんじゃない!です。

「りんご」の説明を1人の人にに聞いたします。

その人は「赤い食べ物だよ」と言いました。

それだけじゃ理解できないですよね。

他の人にも聞いてみました、その人は「丸いフルーツだよ」って言いました。

うん。まだまだですよね。

簡単なものを理解するだけでも

いくつかの説明を聞かないと分からないんです。

なので、やり方で理解できなかったとしても、当たり前です!

何個もやってみて形になると思って勉強に励みましょう!



①まずはイメージをつかみましょう

HTMLの基本の操作を学ぶのであれば、「Progate」がおすすめです!

おすすめの勉強方法は以下です!

  1. 一通りやってみる!スマホでもOKです!
  2. パソコン版でももう一度復習してみる

 

!!!ここポイント!!!

2回目のパソコンで復習した際に必ずしてほしいことがあります!

それは、出来上がったものを確認する!ということです!

 

Progateをやっていると、コードを書けたことに喜んでどんどん次に進んでしまうのですが、

コードを書けるようになるためだけではなく、イメージ通りのものができているか。ということが重要になってきます。

本で一個のサイトを作成してみましょう!

読み進めていくと、一個のサイトを作成できる本があります!

おすすめの本はこちらです。

スラスラわかるHTML&CSSのきほん 第2版

読み進めていきながら、一個のサイトを完成させることができます。

一個一個、丁寧に分かりやすく説明が載っているので、コードを書きながら意味も理解ができます。

途中で終わらせるのがもったいなくなるので、

初めは気合いを入れて、学ぼうと思っていたのに続かない人にもおすすめです。

また、1日でできてしまうので成長が早いです!

作りたいサイトを作成してみましょう!

ここまで作成できれば、後はどれだけHTMLの類とCSSのプロパティを使いこなせるかとなります。

作りたいサイトを決めたら、以下で調べながら作成をしていきましょう。

HTMLとCSSのリファレンスおすすめサイトは以下です。

特に逆引きリファレンスが分かりやすくておすすめです。

HTML、CSSとJavaScriptなどのWebデザインで使用されるリファレンスも掲載されています。

また、とほほの説明とちょっと違うので、違う目線からなるほどと思うことも多いです。

タグの意味などを調べるとよく出てくるので、自然と見てしまいます。笑

初心者でも分かりやすい説明をしてくれるので、おすすめです!

 

また、どうしてもどう作成しているか分からなければF12を押し、

F12

このボタンを押して、分からない場所にカーソルを合わせてみましょう。

答えを見るみたいになってしまいますが、成長も早いです!

おすすめの本

そのほか私が読んだおすすめの本を紹介します。

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

大人気ブログ「クリエイターボックス」の管理人、Manaさんが書いてます。

分かりやすい説明でamazonランキングでは上位でした!

納得の一冊です!

Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉

わかりやすい図と丁寧な解説でまた、「背景」や「理由」も知ることで、深く理解できる本です。

ベテランでもへぇーとなれる本です。

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)

ホームページを作成したいのであれば、WordPressから作成するのもありだと思います。

自分のページでこうしたい!が出てくるとおのずとHTML、CSSを使う場面ができます。

自分の成長のために参考にしてみてくださいね!

エンジニアについての関連記事は、こちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です