「HTMLとCSSを勉強したい。これからHTMLとCSSの学習を始めたいけど、何をしたらいいだろう…。勉強はしたいけどどうしていいか分からない…。具体的な手順を教えてください。」
その疑問、お答えします。
【初心者向け】HTML&CSSの学習方法【2カ月で達成できる】
①目標設定：WEBサイトを作れるようになる
②基礎理解：そもそもHTMLとCSSってなに？
③学習手順：基礎学習→簡単なサイトを作る
④実務練習：就職
記事を書いている僕は、未経験からHTMLとCSS、JavaScriptを学習し2カ月で転職に成功。
現在はWEBエンジニア、WEBデザイナーとして生活ができるようになりました。
①目標設定：WEBサイトを作れるようになる
目標設定は、「WEBサイトを作れるようになる」でOKです。
すでに目標があればOKですが、「WEBサイトを作れるようになる」とざっくりした目標でいいと思います。
WEBサイトを作れるようになれば、その技術で転職も可能ですし、副業をして収入を得ることもできます。
とりあえず「サイトを作る」を目標に一緒に頑張りましょう。
②基礎理解：そもそもHTMLとCSSってなに？
HTMLとCSSはWEBサイトを作るための基本的な技術です。
簡単にいうと、「HTMLは骨組み」「CSSは装飾」です。
役割：WEBサイトの「構造」を作る言語。
何をするか：WEBサイトに載せるテキストや画像、リンクなどの要素を定義します。
例えば、見出しや段落、リストなどをHTMLで作ります。
html
<h1>タイトル</h1>
<p>これは段落です。</p>
<a href="https://example.com">リンク</a>
役割: ウェブページの「デザイン」を整えるための言語。。
何をするか: HTMLで作った構造に色、フォント、レイアウトなどのスタイルを適用します。
例えば、文字の色を変えたり、ボタンの形を整えたりします。
CSS
h1 {
color: blue;
font-size: 24px;
}
p {
line-height: 1.6;
}
このようにHTMLでは「タグ」、CSSでは「プロパティ」というモノを使って記述します。
タグには見出し、画像、リンクなど目的に合わせたタグが存在し、タグの種類は100種類以上あります。
プロパティも色、背景色、余白など目的に合わせてプロパティが存在し、その数はタグよりも多いです。
ここで大切なのはタグもプロパティも「すべてを覚える必要はない」ということ。
すべて暗記をしたくなりますが、サイトを作るのに必要なタグは限られてきます。
必要なモノだけ覚え、頻繁に使わないモノはその都度ググる癖をつけましょう。
③学習手順：基礎学習→簡単なサイトを作る
学習方法の基本は以下のとおり。
・基礎を学ぶ
・サンプルサイトを作ってみる
これだけなんです。参考書を買っても、スクールに通っても、学習の流れは上記になります。
大切なので繰り返しますが、基礎を学ぶ→サンプルサイトを作るです。
何度も繰り返しますが、本当にこれだけです。
参考書や学習サイトのとおりに学習進め「ある程度理解したな」と感じたら、自分なりに簡単なサイトを作ってみましょう。
この「簡単なサイトを作る」というアプトプットの工程がとても大切です。
サイトを作ると「何のタグを使えばいいんだ？」「どうやって横並びにするんだ？」という疑問が必ず出てきます。
この疑問が今の自分にない知識ですので、疑問に思ったらググりインプットをしましょう。
これを繰り返すことで疑問がだんだん減り、よく使うタグなどが見え隠れしてきます。
さらに深堀します。
基本手には次の手順です。
・まずは参考書を1周読んでみる。理解度は20％でOKです。
・２週目はサンプルコードを書きつつ、参考書内で疑問に残る点はググってみましょう。参考書とは違う角度の意見があ り解消への近道になります。理解度は50%ぐらいでOKです。
・2週したら参考書にある課題にチャレンジしてみましょう。
この感じです。基本的に課題はついてますが、ない場合は2週目の学習で終了でOKです。
さらに具体例をつけて深堀します。
動画学習は「ドットインストール」がおすすめです。学習方法は下記のような感じでOKです。
・動画を見ながら実際にコードを書いてみる。
・動画のようにコードが動作するのか検証する。
・エラーが出て動かなければ、動画を繰り返し間違いを探す
動画学習のポイントは実際に動画の例に沿って実際に手を動かすことです。どういった順序で進めていくのか、参考書などより頭に入りやすく理解もしやすいです。
おすすめは「Progate」です。学習方法は下記のような感じでOKです。
・HTMLコースを選択し、内容の通りに進める
・わからなくても、とりあえず進める
・課題があるので、自力で解いてみる、わからなければググる
・それでも不明な時は解答をみる(なんとなく理解できればOK)
大切なのは「暗記しない」こと。なぜなら、すべてを暗記しようとすると学習が進まないですし、ググれば必ず答えが出てくるからですね。暗記をすることより、「分からない問題の答えを見つけるためのググる力」が大切です。問題を理解できなくて不安になりますが、「なんとなく理解できた」ぐらいの感覚でOKです。
プログラミングスクールとは、オンラインでプログラミングを学ぶことができる学校のようなものです。
結論、「挫折してしまいそうなら、通うこともあり」です。
HTML・CSSの学習は継続することが大切です。
もし、モチベーションが維持できなくて、学習をすることが難しい場合は検討してみましょう。
しっかりとしたカリキュラムで効率よく学ぶことができます。
またメンター制度もあるスクールもあり、現役エンジニアなどに質問することができます。
④実務練習：オリジナルサイトを作ろう
HTML・CSSを学習したら、実践することが大切です。
これまでは参考書や学習サイトを使って学習しましたが、最後は今ある自分の知識だけでサイトを作りましょう。
これができればゴールです。
どんなサイトでもいいです、「架空のカフェのサイト」「自分のホームページ」など。
作っていると、学習した内容が点と点でつながる時が来ます。「あ、あれを使えないかな？ググってみよう」みたいな。
自分の知識でサイトを作り、分からなければググって正解を導き出す。それができれば他の言語も難しくはないです。
学習するコツはなんでも一緒だと思っています。
いろんなサイトを作ってスキルアップをしましょう。