【超初心者向け】ゼロからの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編(全8回) or Mac編(全10回)]
・はじめてのWeb制作(全11回)

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

progate

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

CODEPREP

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

※ すべて2022年3月現在確認したものです

などが良さそうです。

自分的には最初に、ドットインストールの「HTML/CSSの学習環境を整えよう」「はじめてのWeb制作」か、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デザイン入門講座」です。

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

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

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

上記の本が終わったら、「ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座」という続編にあたる書籍をオススメします。こちらの本ではランディングページ・ブログサイト・コーポレートサイト・イベントサイト・ギャラリーサイトの計5つのサイトを作りながらより実践的なWEBサイト制作を学ぶ内容となっています。
レスポンシブサイトの作り方や、基礎的なJavascript、アニメーション、動画組み込み、より実践的なCSSの書き方などを学びます。WEBサイト制作を仕事にしたいのであればどれも必須の知識なので、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」が終わった、または簡単すぎるという人は、チャレンジしてみると良いと思います。

レンタルサーバーと契約しよう

WEBサイトがある程度作れるようになったら、レンタルサーバーと契約して実際にWEBサイトをサーバーにアップしてみましょう。
レンタルサーバー会社は、例えば「さくらインターネット 」「ロリッポップ」や「エックスサーバー 」などある程度有名な会社であれば正直どこでも構いません。個人で運用する程度であればそれほど差がないと思います。どこも月額数百円～千円程度で借りれる安いプランがあるので、安いプランで全然構わないので契約しておくと良いでしょう。
ちなみに私は「さくらインターネット」の月額524円/容量300GBの「スタンダードプラン」を利用しています。このサーバーで、現在このブログも合わせて3つほどWEBサイトを運用しており、プラスで仕事でもクライアント確認用のテストサーバーとしても使用していますが、容量的には300GBで十分な感じです。

プロの現場でも、コーディングしながら定期的にテストサーバーにサイトをアップして実際にブラウザでサイト確認を行いながら作業を進めます。単にローカル上で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

脱初心者向けHTML/CSS講座

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

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

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

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

≫ ちゃんと学ぶ、HTML/CSS + JavaScript

≫ 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デザインコース、フロントエンドコースなどがあるので、そちらを利用してみるのもいいかもしれません。

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

【最短1ケ月】短期間で学べる!WEBデザイン系スクール7校比較【3ケ月以内】

TechAcademy 最短1か月 学習時間の目安 160時間の学習時間 4週間プラン / 40〜50時間（週）　→　5.7～7.1時間（日） 8週間プラン / 20〜25時間（週）　→　2.8時間～ ...

続きを見る

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

そんな疑問にお答えします。 未経験からWEB制作会社へ転職する方法について解説します。 私の簡単なプロフィールを紹介します。現在フリーランスで主にWEB制作をしています。以前はトータルで12～13年ぐ ...

続きを見る

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

そんな悩みを持っている方に向けて記事を書いていきます。 AdobeCCをお得に購入するならデジハリの「Adobeマスター講座」がオススメ 結論から先に書くと、Adobe Creative Cloud（ ...

続きを見る

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