HTML&CSS初心者へ！おすすめの勉強方法

公開日：2016年08月24日最終更新日：2021年12月27日

ホームページを作成したいけど、何から初めてよいのか分からない、HTMLやCSSを実際に記述してみたが、いまいちよく分からない、効率のよい勉強法がないか模索している初心者の方へおすすめの勉強法について説明します。

1. HTML&CSSの勉強に最低限必要なもの

HTMLとCSSを勉強するのに最低限必要なものは「パソコン」と「インターネットがつながる環境」です。
厳密に言えば「メモ帳とブラウザーがインストールされたパソコン」さえあれば、作成したホームページを自身のPC上で確認することは可能です。ただ、HTML&CSSでページを作ることの大きな目的は、「インターネットを通じて」様々な情報を世界中に配信（公開）することですので、やはり「インターネットのつながる環境」は必要でしょう。インターネットを閲覧できるPCで、このページを読んで頂いていると思います。モバイル媒体で本サイトを見ているという方もいるかもしれませんが、さすがにタブレットやスマホでのホームページ作成には多少無理がありますので、お使いのPCでHTML＆CSSの勉強に挑戦して下さい。

2. HTMLとCSS

HTMLとCSSの関係をざっくり説明すると、HTMLでホームページの構造を作成し、CSSでスタイルやデザインを調整します。では、初心者は初めに何を勉強したらよいのでしょうか？

ホームページ作成に関してまったく何も知らないという方は、比較的分かりやすいHTMLで十数個程度の基本のタグを覚えて、ブラウザーでどのように表示されるかを確認する事をおすすめします。HTMLの知識が多少付いてきた所で、CSSも一緒に勉強していくのがよいと思います。HTMLとCSSの知識はどちらも必要ですので、ごく簡単なHTMLのタグとCSSを同時に勉強するのもよいと思いますが、最初から凝ったデザインを作りたいと思って勉強していくよりは、デザイン性はそんなにないけど基本的な仕組みを学ぶという姿勢の方がよいでしょう。

初めはあせらずHTMLとCSSの仕組みをしっかりと理解してから、少しずつHTMLタグの種類やCSSの様々なプロパティを学習していくことをおすすめします。

▲ページトップへ戻る

3. 目標を決める(マイルストーンを設定する)

HTML&CSSの勉強をしていて、「特に何の問題もなく理解できるよ！」という人はここを読み飛ばして下さい。そうではなく、「勉強をしていてよく分からない事があり躓いてしまった」、「勉強したいけど、何から始めたらよいのか分からない」という人におすすめの方法を説明します。
HTML&CSSを勉強する目的は、色々あると思います。「なんとなく面白そうだから」、「学校の課題だから」、「自分のお店のページを作成したい！」、「手に職をつけて就職したい！」などなど。。。どんな目的にしろ、何か一つ目標を立ててみて下さい。あまり大きい目標ではなく「HTMLの概要を７日で把握する」、「HTMLのページを1ページ作ってみる」、「HTMLのページは作成したけどもう少しキレイなレイアウトにしたい」など、自分の出来そうな事よりも少しだけ難しい程度が丁度よいです。その目標に対して「マイルストーン※」を設定します。

マイルストーンとは、プロジェクトの工程を立てる際の大きな節目の事を指しますが、そこまで大げさに考える必要はありません。目標に対して区切りをつけ、何をどの位の期間をかけてするかをざっくりと決めます。「HTMLの概要を7日で理解するぞ！」ときめたら、一つ目のマイルストーンは「月曜日：インターネットでとりあえず検索する」、二つ目は「火曜～金曜日：少なくともHTML関連の５つのサイトを読んでみる」、３つ目「土日：理解できた内容をまとめてみる」と決めたら区切りの時点で振り返りを行います。自分で立てた目標の中間地点でそれが出来ているか出来ていないのか？　出来ていなくても構いません。ポイントは何がどうして出来なかったかを「知ること」と「その解決法を考える」ことです。

目標の最後に振り返りをするのではなくマイルストーンごとに一旦立ち止まって考えることが大切です。順調に進んでいればOK、進んでなければその解決策を持って次のマイルストーンへ向かって行動するという具合です。少し難しい課題を自分に与えて、小分けに振り返る事で、分からないの程度が大きくなる前に解決し易くなります。また、難しいと思ったけど意外に簡単だったというような発見もあるでしょう。そして目標を達成できたら、その過程を見直して次の目標を設定します。いきなり大きい目標を立てたり漠然と勉強を進めていくよりも、ストレスなく新しい技術の習得ができるようになるでしょう。

※マイルストーンとは、"マイル標石"、日本語では"里程標"、"道しるべ"の意味です。鉄道や道路の基点からの距離を表す標識（石）のことで、ローマ帝国の主要な街道に設置された、１ローマ・マイル（1000歩）ごとに石を設置したのが始まりとされています。

▲ページトップへ戻る

4. 効率のよい勉強方法は？

HTML&CSSの勉強方法はインターネットや、書籍で独学で勉強したり、学校で勉強したりと様々です。効率の良い勉強方法はというと、個人のやる気や性格、好み、使える時間・予算による所もあります。しかし、どんな条件であったとしても共通して言える事は「実践」と「有識者に聞く」事が一番効率のよい勉強法です。インターネットや書籍を見たり、学校の授業を聞いたりしたことを実際にやってみることがとても大事です。実際に手を動かす事で、早く覚えられます。

また、実際に作業をしてみると頭の中で考えた通りにいかないというのはよくある事です。実践でうまくいかなかった事を考えたり、調べて解決していく事を繰り返していくうちに自分で思うよりも多くの事を学べます。調べてもどうしても分からない事や躓きがあった場合は、「有識者に聞いてみる」のが一番の近道です。一から十まで聞くというのでは、身につくものも身につかないと思いますが、悩んだ末に「聞いてみる」と、「有識者」は喜んで教えてくれるでしょう。また一人で考えるのではなく誰でもよいので一緒に考えてみる、意見を聞いてみると、有識者に聞かなくても問題がすんなり解決できることもあります。
インターネットで検索できる様々な情報や、書籍、学校など自分にあった勉強方法を探してみてください。

▲ページトップへ戻る