takato（@n8takato）です！
- HTMLとCSSの勉強方法を知りたい
- 勉強のポイントとやってはいけない勉強方法を知りたい
- HTMLとCSSは独学が可能かを知りたい
この記事では上記の課題を解決します。
web制作に興味を持った方の中には、本格的に勉強を始めようとしている方もいると思います。そんな方は、HTMLとCSSの勉強方法を知りたいと思いますよね。
この記事では、未経験でwebデザイナーになった僕が、HTMLとCSSの勉強方法や勉強のコツなどを紹介します。
web制作の勉強をしたい方や未経験からwebデザイナーを目指したい方の参考になれば幸いです。
この記事を書いた人
- 26歳
- 男性
- 都内制作会社に勤めるwebデザイナー
- 法人営業職→未経験でwebデザイナーに転職
cssに関する内容の記事はこちら
HTMLとCSSの勉強方法
僕が実際に行ったHTMLとCSSの勉強は、下記の方法です。
- webアプリや参考書で勉強
- 参考サイトを模写して勉強
webアプリや参考書で勉強
コーディングについて全く知らなかった頃は、webアプリや参考書を用いて勉強しました。
webアプリ
僕が実際に使用したwebアプリは下記の2つです。
簡易的な内容であれば、どちらも無料で勉強することが出来ます。また、難易度の高いHTMLとCSSを学ぶ際は課金する必要がありますが、月額1,000円くらいなので勉強代として考えればそこまで大きな支出ではありません。
webアプリでは、そもそもHTML・CSSは何か、webとは何かなどの概念的部分から学びます。そして、コーディングの学習に進みます。
webアプリを使用して勉強するメリット
- 参考書などの持ち物が無い
- webアプリ上でコーディング出来る
- パソコンとWi-Fi環境があればどこでも勉強出来る
参考書
webアプリと同時に参考書を用いて勉強していました。僕が勉強で実際に使用していたのは下記の参考書です。
上記の参考書を使用するメリット
- コーディングの説明がわかりやすい
- 装飾のコーディング（CSS）の説明が多い
- 写真やロゴなどの素材を元に実際にサイトを作成できる
コーディングの説明がわかりやすい
上記の参考書は、コーディングの説明を細かくしてくれます。コードの一部分を抜粋して説明してくれるので、細かい説明がわかりやすく、理解しやすいのが特徴です。
装飾のコーディング（CSS）の説明が多い
上記の参考書は、特にCSSの説明が豊富です。要素を横並びにする方法や重ねる順番の変更方法などをわかりやすく説明してくれます。
写真やロゴなどの素材を元に実際にサイトを作成できる
上記の参考書を購入すると、架空のカフェサイトを作成することが出来ます。また、カフェサイトの作成にあたって、必要な素材（カフェの写真やロゴなど）をダウンロードすることが出来ます。
実際に素材を使ってカフェサイトを作成することが出来るので、初心者向けでありながら実践的な参考書になります。
参考サイトを模写して勉強
webアプリと参考書である程度勉強を行ったら、サイトの模写を行います。
模写とは？
既存のものと同じものを作成すること
既に誰かが作成したwebサイトと全く同じものを作成します。どのサイトを模写するかは、下記のサイト集から見つけます。
これらの参考サイトから模写したいサイトを決めて、模写に取り掛かります。
サイト上にある画像などは、右クリックでダウンロードすることが出来るので、模写する時は素材を全てダウンロードしてから行ってください。
HTMLとCSSの勉強のポイント
HTMLとCSSの勉強のポイントは下記の3つです。
- 繰り返し勉強する
- わからなければすぐにググる
- 実際にコードを書いて勉強する
繰り返し勉強する
プログラミング全般に言えることですが、繰り返し勉強することが大切です。
英単語の勉強と同じように、1つの教材を繰り返し勉強することで段々とスキルが身に付きます。複数の参考書を用いて勉強するのではなく、1つの参考書を繰り返し勉強しましょう。
わからなければすぐにググる
HTMLとCSSの勉強は、思ったように装飾できない場合が多々あります。これらのエラーに遭遇した時はすぐにググりましょう。
今は多くのブロガーがコーディングに関する内容の記事を作成しています。HTMLとCSSのエラーの多くはググれば解決できます。わからなければググりましょう。
実際にコードを書いて勉強する
HTMLとCSSの勉強をする際、参考書を見るだけの方がたまにいます。インプットは非常に大事ですが、インプットのみの学習はプログラミングではおすすめしません。
プログラミングの学習はアウトプットとインプットの繰り返しです。アウトプットしてわからない部分をインプットするのがポイントです。
そのため、まずは手を動かしてアウトプットしてください。そこからわからない部分は参考書を見るなりググるなりしてインプットしてください。
これを繰り返せば、HTMLとCSSのスキルが身に付きます。
HTMLとCSSの勉強でやってはいけないこと
HTMLとCSSの勉強でやってはいけないことは下記の3つです。
- 1回で覚えようとする
- コードを暗記しようとする
- 完璧になるまで作成し続ける
1回で覚えようとする
プログラミングの勉強は、1回で覚えることは不可能に近いです。覚える必要のあるコードがたくさんあるので、1回で覚えようとしても必ず忘れます。
1回で覚えようとするのではなく、繰り返し勉強することを意識しましょう。繰り返し同じコードを書くことで、自然と覚えられるようになります。
コードを暗記しようとする
プログラミング学習初心者にありがちですが、コードを暗記しようとする勉強方法はあまりおすすめしません。
中にはノートにコードを書きまとめている人もいるかもしれませんが、プログラミングの勉強にはこの方法はおすすめしません。
プログラミングの勉強で大切なのは、繰り返し行うことです。そのため、コードを忘れてしまっても問題ありません。忘れたと思ったらググれば良いのです。
ググってコード書くを繰り返すと、自然とコードを覚えるようになります。大切なのは、暗記することを目標にしないことです。
完璧になるまで作成し続ける
細かい部分までこだわり、作り上げるまでに多くの時間をかける勉強の仕方はあまりおすすめしません。
繰り返しになりますが、プログラミングの学習は何度の繰り返すことが大切です。そのため、勉強1週目で細かい部分までこだわるのではなく、7割できたら次に進み、何度も繰り返す勉強方法が重要です。
多くの回数を勉強することをこだわりましょう。
HTMLとCSSは独学が可能？
HTMLとCSSの勉強は、ぶっちゃけ独学でもスキルが身に付きます。
HTMLとCSSが独学可能な理由
HTMLとCSSが独学可能な理由
HTMLとCSSが独学可能な理由3つあります。
- HTMLとCSSはそこまで難しくない
- わからないこともググれば大体わかる
- 多くの参考書やwebアプリが存在している
HTMLとCSSはそこまで難しくない
HTMLとCSSは、web系のプログラミングでは基本的な言語になります。そのため、他の言語と比べてそこまで難しくない内容となっています。
webアプリや参考書などを何度も繰り返せばスキルが身に付きます。
わからないこともググれば大体わかる
HTMLとCSSの内容は、ググると色々出てきます。僕も含めプログラマー兼ブロガーの方が多くの記事を作成しているので、ググると多くの情報にヒットします。
そのため、独学中に不明点が出てもググることで先に進めるのです。
多くの参考書やwebアプリが存在している
今はHMLとCSSの勉強に必要な環境が整っています。多くの参考書がありますし、HTMLとCSSならwebアプリで無料で学ぶことも出来ます。
独学する環境が整っているので、スクールに通わなくても勉強することが出来ます。
僕もHTMLとCSSは独学で身につけた
僕自身もHTMLとCSSは独学で学びました。僕の独学材料は参考書とプロゲートです。この2つを繰り返し勉強することで、HTMLとCSSのスキルを身につけました。
その後プログラミングスクールに通ったのですが、最初のHTML・CSS講座はすぐに終わりました。笑
僕自身もHTMLとCSSは独学で身につけることが出来たので、読者さんも独学で学べるはずです。
元々webに詳しい人じゃないとムリ？※そんなことないです
ここまで読んだ方の中で、元々webに詳しくないと独学はムリなんじゃないの？と疑問に思った方がいるかと思います。
確かにある程度webの知識がある方だと、HTMLとCSSの学習はスムーズかと思います。しかし、webの知識が無い方でも勉強すれば身に付きます。
webの知識がある方も、元々は何も知らない状態で勉強を始めたので、今知識が無くても問題ありません。
繰り返し勉強することで、スキルが身についていきます。
HTMLとCSSの独学で大変なこと
HTMLとCSSの独学で僕が大変に感じたことを3つ紹介します。
HTMLとCSSで大変だったこと
- エラー解決に時間がかかること
- すぐに質問できる人がいないこと
- HTMLとCSSの勉強を習慣づけること
エラー解決に時間がかかること
HTMLとCSSの勉強は、エラーが生じてもググれば解決することが出来ます。しかし、ググって解決するには、仮説思考が大切になります。
プログラミング学習の仮説思考は、エラーの原因はおそらくこれだと仮定して、それが正しいかググって答え合わせすること
そのため、エラーを早く解決するにはある程度質の高い仮説を立てる必要があります。しかし、HTMLとCSSの勉強を始めたばかりの頃はプログラミングの知識があまり無いため、質の高い仮説を立てることが出来ませんでした。
結果、エラーを解決するのに時間がかかってしまいました。
すぐに質問できる人がいないこと
ググる時間を短縮するためには、プログラミングに詳しい人に聞くのが良いですよね。しかし、当時の僕の周りにはプログラミングに詳しい人がいなかったため、すぐに質問できる人がいませんでした。
身近にプログラマーがいたら、勉強スピードが格段に向上します。
HTMLとCSSの勉強を習慣づけること
仕事をしながら勉強するのはそこそこ大変なので、習慣づける必要があります。毎日勉強するために、決まった時間に勉強するようにしていました。
最初の1週間がとても大変でした。
習慣化については他の記事で説明しています。興味のある方は、「社会人こそ勉強の習慣を身につけて、人生のグレードをアップしよう」の記事を読んでください。
(補足)プログラミングスクールならもっと簡単に勉強できる
僕はHTMLとCSSを独学で学びましたが、その後プログラミングスクールに通いました。理由はwebデザイナーとして働きたく、JavaScriptやRubyなどの言語を学びたかったからです。
プログラミングスクールでも始めはHTMLとCSSの勉強をしました。そこで実感したのは、プログラミングスクールだと早くスキルを身につけることが出来るということです。
プログラミングスクールだと早くスキルが身に付く理由3つ
- 講師が現役のプログラマー
- いつでもオンラインで質問出来る
- お金を払っているので勉強意欲がさらに増す
もう少し早くスクールに通っていればよかったなと感じました。
この記事を読んできる方の中でプログラミングスクールに興味のある方は、通ってみるのもありです。
無料でカウンセルや体験レッスンなどもやっているので、興味のある方は申し込んでみてください。
僕がお勧めするプログラミングスクールについては、「プログラミングスクールのおすすめは？現役webデザイナーが紹介！」という記事を読んでください。
最後に
この記事では、HTMLとCSSの勉強について説明しました。
web制作に興味のある方や勉強を始めてみようと思っている方の参考になれば幸いです。
