WEBデザイン プログラミング

【超初心者向け】ゼロからのHTML/CSS勉強法【独学】

2020/11/24

HTML/CSSの勉強をしたいけど何から始めたら良いのかわからない!
・どうやってHTML/CSSの勉強を進めたていいのか分からない!
・前にもHTML/CSSの勉強したけど挫折した!

そんな人向けに記事を書きたいと思います。

私自身WEB制作に15年以上係わっており、その自分の経験と、友人知人のフロントエンドエンジニアの話を参考に、自分なりにたどり着いた効果的だと思うHTML/CSSの学習方法について書いていきます。

初心者が挫折する理由

学習の一番最初は多分多くの人にとって退屈です。

例えば、英語を話せるようになるためには、最初に基本的な単語そして文法を学ばなければなりません。単語、文法をある程度記憶、理解して初めて英会話の勉強に進めます。

HTML/CSSの学習も同じで、まずは基本的なタグやその使い方を理解しなければなりません。

学習の初期段階は、動画学習サイトを利用するにしても、書籍で勉強するにせよ、どうしてもHTMLタグやCSSプロパティの仕様を覚えたり、せいぜい動画や書籍のサンプルのコードをそのまま写すだけになりがちです。はっきり言って退屈です。少なくとも私は大嫌いです。

ちなみに、サンプルのコードをまるまる写す行為を、プログラミング業界では「写経」などと言います。「写経」学習自体かなりポピュラーな学習方法で、「写経」自体は決して悪い学習方法ではありません。

HTML/CSSの学習で挫折した人は、「自分には向いていなかった」などと言う人がいます。そういう人は多分、この学習の初期段階の「つまらなさ」に耐えられなくなって、モチベーションを維持できなくなったんじゃないかな、と思います。

HTML/CSSを学習する際、意識すること

まずはザっとHTML/CSSの基本的な使い方やタグなどを確認してから、実際にページを作っていく、というのが全体的な大きな学習の流れになります。実際に作った(コーディングした)ページの数、種類の分だけ習熟度が上がると考えてよいでしょう。

とりあえず初心者は、Javascript、jQueryの学習はHTML/CSSである程度サイトが作れようになるまで、置いておきましょう。

初心者の人は特に

・細かいタグの仕様などあまり深堀しない
・実際に手を動かしてコーディングしてみる
・コーディングしたらそれを改造してみる

を意識して学習を進めましょう。

「簡単なWEBサイトが作れるようになる」が初心者の最初の目標です。

細かいタグの仕様などあまり深堀しない

真面目な人でありがちですが、「HTMLタグやCSSプロパティの仕様を完全に理解、記憶しなければならない」と思っている人がいます。

ベテランのHTML/CSSコーダーでも、HTMLタグやCSSプロパティの仕様を完全に覚えている人は、ほぼいないと思います。仕事としてコーディングしていると、1年に1回使うかどうかぐらいのHTMLタグなんて結構あります。たとえ使う必要が出た場合でも、その都度ネットで調べて仕様を確認して使っています。

HTMLタグやCSSプロパティの細かい仕様を、完全に覚えようとしなくても、よく使うHTMLタグやCSSプロパティは嫌でも、コーディングの数をこなしている内に勝手に覚えます。あまり使わないモノであれば、その都度ネットで調べて確認で問題ありません。

なので、もちろん一度はザっとでも仕様に目を通すべきですが、HTMLタグやCSSプロパティを完全に記憶しようなどと思う必要はありません。

この作業にこだわりすぎたり、時間をかけすぎたりすると、場合によってはHTML/CSS学習が嫌になって、モチベーションが下がってきたりします。なので、仕様の確認はサクッとあまり時間をかけずに終わらした方がいいでしょう。

実際に手を動かしてコーディングしてみる

動画学習サイトでも書籍でも、最初のうちはなるべくサンプルのコードは、自分でコードを打ち直したほうがいいです。

実際に自分でコードを打ち直してみると、動画や書籍を見ているだけだと分からなかった事に、いろいろと気が付きます。
動画、書籍を見ているだけだと、どうしても「見る」という行為が惰性やノルマのようになってしまい、振り返ると「なんだかイマイチ覚えていない」なんてことになってしまいます。

実際に自分でコードを打ち込むことによって、理解度は上がりますし、記憶にも残りやすいと思います。

コーディングしたら自分なりに改造してみる

学習の初期段階では、動画や書籍を見たり、せいぜいサンプルのコードを写すだけの受け身の学習が中心になってしまいます。受け身の学習だと、せっかく覚えた事も記憶に残りづらいですし、何よりも退屈です。

なので、なるべくサンプルのコードを書き写した後は、自分なりにコードを改造してみましょう。最初はなかなか難しいと思いますが、例えば「文字色を変える」ぐらいの簡単なものでもかまいません。

自分なりにコードを改造すると、記憶や理解度も高まりますし、学習へのモチベーションも高まると思います。

【準備】HTML/CSSの勉強するのに必要なもの

HTML/CSSは、テキストエディタとWEBブラウザがあればすぐにでも学習を始められます。

もし愛用しているテキストエディタがなければMicrosoftのVScodeがオススメです。Windows/Mac対応の完全無料で、プロも使っている人がとても多いです。
プロの現場では、テキストエディタは数年ごとに流行りがあって、今(2020.11)はなんとなく「VScode」が流行っているかな、と言う感じです。

ブラウザはChromeがイイでしょう。WEBサイトの確認用として、ほぼ一択でしょう。

別の記事で詳しく書いているので、興味があればそちらをご覧ください。

初心者向け!WEBサイトを作るために必要なものと勉強法

【最初にやる事】まずは動画学習サイトで基本を押さえる

オススメの動画学習サイト

もろもろ準備ができたら動画学習サイトを使って勉強を初めてみましょう。

例えば、

ドットインストール

・HTML/CSSの学習環境を整えよう [Windows版 or Mac版] (全5回)
・はじめてのHTML (全14回)
・はじめてのCSS (全15回)

・詳解HTML 基礎文法編 (全22回)
・詳解CSS 基礎文法編 (全33回)
・詳解CSS フレックスボックス編 (全16回)
・詳解CSS レスポンシブウェブデザイン編 (全8回)

progate

・HTML & CSS 初級編
・HTML & CSS 中級編

CODEPREP

・HTML基礎 HTMLの仕組み編
・HTML入門 基本要素(タグ)編
・HTML入門 HTML5編
・CSS入門 基本スタイリング編
・CSS入門 CSS3編

※ すべて2020年11月現在確認したものです

などが良さそうです。

自分的には最初に、ドットインストール「HTML/CSSの学習環境を整えよう」「はじめてのHTML 」「はじめてのCSS」か、progate「HTML & CSS 初級編 」から始めてみるのがイイかと思います。CODEPREPは講義式ではなくてクイズ形式みたいな感じなので、ドットインストールやprogateをある程度進めた後に試してみるのが良いでしょう。

ドットインストールの「詳細」がついている講義と、progateの「HTML & CSS 中級編 」は有料となっています。それ以外の講義は無料です。

ドットインストールが月額1,080円 (税込)でどの講義も見放題、progateが月額980円 (税別)でどの講義も見放題となっているので、もし興味があるなら試してみてもイイでしょう。

1月で終わらせれば下手な参考書より全然安いと思います。
自分的には契約するなら、ドットインストールかprogateのどちらかだけで十分だと思います。
自分は契約していないので具体的な講義内容は分かりませんが、ドットインストールの方が良さげかなと思います。

何回も繰り返し同じ動画を見ない

よく1つの講義を何回も繰り返し見る人がいますが、個人的にはあまりお勧めしません。

上で紹介した動画はどれも初心者向けのモノで基本的に内容は「HTMLタグやCSSプロパティの仕様」の説明になります。ハッキリ言って、つまらないです。

学習の初期段階では、「HTMLタグやCSSプロパティにはどんなモノがあって、どうゆう風に使われるか」を知ることで十分です。なんとなく「こんなタグ、プロパティがあったな」「こんな時に使ってたな」ぐらいで大丈夫です。

繰り返し見るにしても、講義を最後まで見終わった後に、気になった部分だけ見直すぐらいでイイと思います。

動画を繰り返し見て、完全に覚えようとする必要はありません。
実際にタグ、プロパティを使ってコーディングしていると勝手に覚えていきます。もしコーディングしていて仕様が“あいまい”だったりした時に、その都度調べれば十分です。
それに正直、動画を見ても仕様については覚えられません。実際にページをコーディングしてみて初めて覚えられますし、理解できると思います。

この初心者向けの動画を使っての学習は、あまり時間をかけずにサクッと終わらせた方がイイでしょう。
この段階の学習は、あまり面白いものではないので、ここで時間をかけすぎるとモチベーションが低下して、HTML/CSSの学習が嫌になってしまいます。7割理解できれば十分ぐらいの気持ちでイイと思います。

この段階はなるべく早くクリアして、実際にページをコーディングする学習段階に進みましょう。

【次にやる事】オススメの初心者向け書籍

動画サイトを使って一通り学習したら、書籍を使っての学習になります。オススメの書籍は「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」です。

内容的には初心者向けのモノで、実際によくあるページレイアウトパターンをコーディングする、と言う内容です。アマゾンの評価を見ると評判も良いようです。
書籍を読んでいて分からない部分、難しい部分があれば、自分でネットで調べたり、動画学習サイトで該当する箇所を再度確認してみるとイイでしょう。

この段階は、動画学習の時と違って、ちゃんと腰を据えて学習するのがイイでしょう。

そして、一通り書籍を終えたら、サンプルでつくったページをベースに自分なりに改造してみましょう。この「自分なりに改造」する行為は、とても力がつくのでおススメです。

chromeのディベロッパーツールで分析する

ある程度自分でWEBサイトが作れるようになってくると、他のサイトを見ていて「ここはどうやってコーディングしているんだろう?」なんて思ったりするようになります。そんな時はchromeの「ディベロッパーツール」を使ってソースの確認をします。
このchromeを使ってのソースの確認作業は、どんなに経験を積んだベテランになっても日常的にやっている行為です。もう癖になって反射的にソースを確認している感じです。

具体的な使い方は、chromeの右上の[・・・]から「その他のツール」「ディベロッパーツール」を選択すると「Dev Tools」画面が開くので、上部にあるタブから「Elements」を選択するとそのサイトのソースが確認できます。

また、画面上の気になる部分で「右クリック」するとウインドウが開くので、そこから「検証」を選択すると、同様にディベロッパーツールが開いて該当する部分のソースが確認できます。

気になったらディベロッパーツールでソースを確認する癖をつけておきましょう。

WEB制作に役立つ!chromeのデベロッパーツールの便利な機能

WEBデザイン ギャラリーサイト18選【リンク集】

さらにHTML/CSSを勉強するなら?

Udemyがオススメです

わたしがオススメするのはUdemyを使っての学習です。

Udemyを知らない方に簡単に説明すると、Udemyとは世界中で展開している、アメリカサンフランシスコ発の動画学習サイトです。日本ではベネッセが事業パートナーとなり運営しています。

学習動画1講座づつ買い切り方式での購入となります。学習動画は主に英語のものが多いですが、日本人による日本語でも学習動画も数多くあります。

動画の内容は有料だけに、上で挙げたような無料で見れる学習動画と比べて内容が濃いものが多いです。無料動画だと物足りなかった方にオススメです。

価格は1講座、通常価格10,000円~20,000円以上とかなり高額ですが、1年の内だいたい3分の1ぐらいセールをやってます。セール時であれば、1講座だいた1,500円~2,000円以下の価格になるので、その時にまとめて購入しておくとよいでしょう。

学習動画は一部をサンプルとして視聴可能ですし、30日以内であれば返金制度もあるので安心です。

動画の視聴はパソコンはもちろん、Udemyのアプリを入れればスマホでも視聴可能なので、移動中や寝る前のちょっとした時間などを使って勉強するのに最適です。

スマホ用のアプリを入れておけば、セールの通知もその都度入ってくるので何かと便利です。

私も新しいソフトやプログラミング言語を学ぶとき、よくUdemyを利用しています。

学習動画によってレベルはまちまちですが、初心者から一歩抜け出そうという時にはかなり役立つ動画が多いように思えます。

興味がある方はチェックしてみてはいかがでしょうか。

Udemy

脱初心者、中級者プログラマー、WEBデザイナーにUdemyがオススメです

脱初心者を目指しているプログラマー、WEBデザイナーの方にUdemyがオススメです。 もちろんプログラマー、WEBデザイナー以外にも3DCGデザイナー、CGデザイナーの方にもオススメです! これまで自 ...

続きを見る

脱初心者向けHTML/CSS講座

脱初心者を目指さしている方に良さそうな動画をいくつかピックアップしてみました。

下記以外にもたくさん動画があるので色々と検索してみるといいでしょう。

サイト内で動画を「レベル」「言語」などで絞り込み検索ができるので、ぜひ活用してください。

動画選びのちょっとしたコツですが、動画の「最終更新日」があまりにも古いものは避けた方がいいです。それと、「受講生からのフィードバック」として購入者のコメントがあるので、購入前はそこを読んでおくと失敗しづらいかと思います。


[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

WEBデザイン講座 Level0《対象:ゼロから始める超初心者の方》HTML と CSS に必要な基礎知識を学習します。

WEBデザイン講座 Level1《初級者レベル》※WEBデザイン→コーディング→公開までの全工程を150分で速習する。

WEBデザイン講座 Level2《ステップアップ》コース※FlexboxとメディアクエリでレスポンシブWEBサイトを作る

実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

まとめ

ある程度自分でWEBサイトが作れるようになったら、いろいろとWEBサイトを見て、「いいな」と思ったサイトはchromeを使ってソースを確認して、自分なりにコーディングを試してみて試行錯誤を繰り返してください。

試行錯誤を繰り返した分だけコーディングの力はついていきます。

もし独学だと不安、なるべく早くコーディングを覚えて就職したい人は、WEB制作会社「LIG」が運営する「デジタルハリウッド STUDIO by LIG」や、オンラインプログラミングスクールの「TechAcademy [テックアカデミー]」「プログラミングのオンラインスクールのCodeCamp 」などにもWebデザインコース、フロントエンドコースなどがあるので、そちらを利用してみるのもいいかもしれません。

無料説明会や無料体験などもあるようなので、興味があれば試してみてもイイかもしれません。

WEBデザイン・フロントエンドが学べるプログミングスクール8校比較

WEBデザイン・フロントエンドについて学べるスクールを比較してみます。また、選び方のポイント、スクールの活用方法についても解説します。 目次TechAcademyCodeCampテックキャンプデザイナ ...

続きを見る

未経験からWEB制作会社への転職ロードマップ

・未経験からWEB制作会社に転職するにはどうしたらいいの?・WEB制作会社に転職するために必要な勉強は? そんな疑問にお答えします。 未経験からWEB制作会社へ転職する方法について解説します。 私の簡 ...

続きを見る

学割でお得にAdobeCCを購入したいならデジハリのAdobeマスター講座がオススメです

どうすれば安くAdobe CCを購入できるの?なるべく安く購入したい... そんな悩みを持っている方に向けて記事を書いていきます。 目次AdobeCCをお得に購入するならデジハリの「Adobeマスター ...

続きを見る

無料で学べる!UdemyのWEB制作に役立つ11講座

Udemyはオンライン学習プラットフォームとして有名ですが、有料の講座だけではなく無料で視聴できる講座もたくさんあります。 無料かつ日本語でのWEB制作に役立つ動画をまとめてみました。基本的に初心者向 ...

続きを見る

30代未経験でWEBデザイナーになれるのか?
WEBデザイナーの仕事内容は?給料は?デザイン以外の仕事は?
WEBデザイナーに向いている人、向いていない人


-WEBデザイン, プログラミング

© 2021 MUKOLOG