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

    • このページをはてなブックマークに追加

    公開日:2016年08月24日 最終更新日:2019年10月10日

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

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

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

    2. HTMLとCSS

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

    html_css

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

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

    ▲ページトップへ戻る

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

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

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

    milestone

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

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

    ▲ページトップへ戻る

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

    column_main3790

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

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

    ▲ページトップへ戻る

    5. おすすめの書籍

    書籍も、その人の好みによるところがあると思いますが、初心者用に噛み砕いて説明している本、公式テキスト、それからリファレンス的にも初心者用にも仕える辞書的な本を3つほどご紹介します。

    ●HTML&CSSの基本

    スラスラわかるHTML&CSSのきほん 狩野祐東著/SBクリエイティブ刊(2013/5/28)

    book1

    ●Webクリエイター能力認定試験公式テキスト

    Web クリエイター能力認定試験 HTML5 対応 スタンダード 公式テキスト」 狩野祐東/FOM出版(2015/1/29)

    book2

    ●辞典

    ホームページ辞典 第5版 HTML・CSS・JavaScript 株式会社アンク/翔泳社(2012/3/14)

    book3

    書籍は数多く出版されていますが、インターネット書籍などもおすすめです。またHTML&CSSの技術は年々変化してゆきますので、なるべく新しい書籍を選ぶことをおすすめします。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【HTML】Webデザイナー|デザイン提案などのアートディレクション業務

    年収 :300万円〜700万円

    受託の開発・制作から自社開発まで幅広い案件を持ちます。 制作の視点から「こうしたら効果が上がるの...

    株式会社クオリアシステムズ

    正社員

    【Javascript】WEBデザイナー|広告/カタログの企画・デザイン・制作

    年収 :250万円〜400万円

    広告、カタログ、Web等の企画・デザイン・制作をご担当いただきます

    ワイズマトリックス株式会社

    正社員

    【Javascript】WEBデザイナー|自社Webサイトの企画・制作・運営

    年収 :400万円〜500万円

    自社Webサイトの企画・制作・運営などをご担当いただきます。 <具体的な業務> ・自社コーポレート...

    株式会社ボルテージ

    フリーランス

    【Webデザイナー/コーダー】AdobeExperienceManager(AEM)を用いたWebサイト構築

    大手企業の採用HPから有名アニメの公式HP等のデザイン/ディレクションを行うクリエイティブ企業にて、W...