HTML/CSSはWeb制作やWebデザインの仕事をする上で大事なスキルですが、初学者のうちは難しく感じる人も少なくないと思います。
独学だと特に挫折しやすいですし、教材選びの段階でも自分に合ったものを探すのに苦労するかもしれません。
そこで本記事では、HTML/CSSの勉強をしている人向けのおすすめのHTML/CSS学習サイトについて紹介していきます。
当サイト厳選のスクールは以下の通りです。以下リンクから直接公式サイトへ飛べます。
・TechAcademy【業界最大級の講座数を有する格安オンラインスクール/転職保証コース有り】
・GeekJob【無料で学べるスクール/500社以上の豊富な就職先・転職成功率97.8%/20代におすすめ】
・DMM WEBCAMP【転職成功率98%・離職率2％/DMMグループなので紹介先企業も良質・豊富/転職保証コース有り】
目次
HTML/CSS学習サイトを選ぶポイント
本章では、HTML/CSS学習サイトを選ぶポイントについて紹介していきます。
学習形式
世の中にはいろんなHTML/CSS学習サイトがありますが、それぞれのサイトで以下のように学習形式が異なります。
・動画型
初学者でも気軽に学習
最初に理解を深めたい場合におすすめ
・コーディング型
実際にHTML/CSSのコーディングをしながら学習
実際にコード打って覚えたい人におすすめ
どの学習形式がいいかは個々人の相性の問題もありますので、ご自身が学習しやすい学習形式から勉強を始めてみましょう。
無料 or 有料
本記事で紹介するHTML/CSSの学習サイトは無料のサイトが多いですが、その中でも一部有料のカリキュラムを用意しているサイトもあります。
例えば、Progateなどは有料プランで1080円です。
有料プランのあるサイトでも無料で利用できるコンテンツが多かったりしますからまずは無料コンテンツで学習を始めてみましょう。
複数のサイトで学ぶ
1つのサイトで集中的に学び、やりきることは大事ですが、サイトによっては苦手な箇所の解説が足りなくて理解が不十分となる場合もあります。
どうしても理解できないなと感じたら他のサイトもチェックしてみることをおすすめします。
理解ができるようになるまでしっかり調べ続ける癖をつけましょう。
動画型のHTML/CSS学習サイト
本章では、動画型のHTML/CSS学習サイトを紹介していきます。
動画なら気軽に学習を始めることができるかと思いますので、気になったサイトがあればぜひ利用してみましょう。
ドットインストール
ドットインストールは、動画形式で学べるサイトとして最も定番のサイトです。
1回の講義が3分程度なので、ちょっとした合間に気軽に勉強することができます。
一部のカリキュラムが有料となってますが、無料講義だけでもHTMLの基本をしっかり学習可能です。
0からHTML/CSSを学びたい人に利用してもらいたいサイトです。
Schoo
Schooは、ITに限らずビジネススキルやマネジメント、マーケティングなど幅広いジャンルを扱っている動画サイトです。
1回の動画が60分となっており、ドットインストールと比べるとかなり長めですが、講義は入門から応用、実務寄りの内容と様々なので、ご自身の学習進度に合ったものを見つけることができると思います。
講師の方もいろいろいらっしゃるので、自分が聞きやすい、興味を持てそうな講師を見つけてみてはいかがでしょうか。
SkillHub
SkillHubも無料でHTMLを学習できるサイトです。
カリキュラムもフリーランスや転職を目的としている人向けに作られています。
HTML/CSS以外にもjQueryやJavaScript、wordpress、illustratorなどWeb制作・Webデザイナーの仕事をする上で大事なスキルを学ぶことができます。
Udemy
Udemyは10万以上もの動画講座を提供しているプラットフォームであり、IT・プログラミングに限らず様々なジャンルの講座を扱ってます。
基本有料となっており、1万から2万程度の講座が多いのですが、頻繁にキャンペーンをしていて、通常1万から2万程度の講座も数千程度で購入できますからキャンペーンを待って購入することをおすすめします。
UdemyでのHTML/CSS講座として有名なものは、「フロントエンドエンジニアになりたい人の Webプログラミング入門」などがあります。
ShareWISはアプリという形式でHTML/CSSをはじめとしてビジネススキルや語学などを学習できるサイトです。
講義も90秒というかなり短いので、スキマ時間を利用して学習できます。
通勤途中の電車やちょっとした待ち時間などで利用してみてはいかがでしょうか。
コーディング型のHTML/CSS学習サイト
本章では、コーディング型のHTML/CSS学習サイトを紹介していきます。
ある程度動画サイトなどで基礎が身に付いたらコーディング型の学習サイトでコードを打ちながら練習をしていきましょう。
Progate
ブラウザでコーディングの勉強をするサービスとしては最も有名なサイトの1つです。
プログラミング初心者はまずProgateから学習を始めるという人が多いです。
HTML/CSSのカリキュラムは初級から上級まで用意されており、0から着実にスキルアップが可能。
その他にも、実践的な課題をこなす道場編や、CSSで重要なレイアウト方法のFlexbox編もあり、実務につながるカリキュラムが充実しています。
paiza
paizaはHTML/CSSの動画講義とコーディング練習を両方とも受けることができるサービスです。
動画も1講義につき3分程度なので初学者でも無理なく学習を進めることができます。
一部有料ですが、1ヵ月1,078円 （税込）からですから比較的コスパよく学習をスタートできるでしょう。
CODEPREP
CODEPREPもブラウザ上でHTML/CSSのコーディングしながら学習できるサイトです。
独自の強みとして、様々なスキルの「ブック」を100冊以上を用意しており、それらを無料で学べるという点です。
1冊10分程度で学べる分量となってますから継続して勉強を続けやすくなってます。
英語のHTML/CSS学習サイト
本章では、英語で解説されている海外のHTML/CSS学習サイトを紹介していきます。
英語なので学習のハードルは上がってしまいますが、学習しやすいサイトもありますし、英語の勉強にもなりますので、ぜひ合わせてチェックしてみてください。
Dash
英語のサイトとなりますが、Dashもブラウザ上にてHTML/CSS・JavaScriptを学べるサイトです。
独自の特徴として、実際の案件で遭遇しそうな課題を元に学習を進めていくスタイルで、より実践的な内容となってます。
Codecademy
こちらも英語のサイトで、世界中にユーザーがいる海外の学習サイトとして有名です。
HTML/CSSに限らず様々なプログラミング言語を扱ってます。
w3schools.com
アカウント登録不要でHTML/CSSのコーディングの練習ができる海外のサイトです。
ブラウザ上にてコードを打ち、その表示まで確認できます。
BootstrapやSass、JavaScriptなども学習できることが魅力です。
その他HTML/CSS関連のサイト
本章では、その他個人的に参考になると思ったHTML/CSS関連のサイト・ブログを紹介していきます。
サルワカ
HTML/CSSを中心に解説記事が参考となるサイトです。
図や事例が豊富で、難しい箇所を丁寧に説明されてますので、わからないところを調べたり、理解を深めたりするのに役立ちます。
クリスタ
Webデザインやコーディング初心者向けに丁寧な解説をしているサイトです。
実務でよくあるデザインカンプからのコーディングについて解説しているだけでなく、素材も提供しているので、より実践的な学習が可能です。
chot.design
Web制作・Webデザイン全般のスキルについてカリキュラムを組んでいる会員制のサイトです。
HTML/CSSだけでなく、PhotoShopやAdobe XD、Sassなどカリキュラムが充実してます。
MOZER
MOZERは、中学生・高校生向けのプログラミング教育や企業のプログラミング研修として導入されているオンライン学習サービスです。
かわいらしいキャラクターとともにストーリーを進めながら課題をこなしていくスタイルとなっており、楽しみながら学習できます。
体験版までなら無料で学習できるので興味ある方は利用してみましょう。
HTML/CSS学習を一歩進めるには？
本章では、HTML/CSS学習を一歩進める上でのポイントを説明していきます。
IT資格取得
未経験から転職したいという人はまず資格取得から目指すこともおすすめです。
資格の勉強を通じて、HTML/CSSに関する基礎知識を体系的に身につけることができますし、転職活動時には一定のスキル・やる気の証明となります。
ただ、資格取得だけでは実務に通用するスキルは身に付きませんので、後述するように実際にWebサイトを作ってみるなどポートフォリオも合わせて作成しておいたほうがアピールとなるでしょう。
模写コーディングする
HTML/CSSの基本的な学習したら模写コーディングすることをおすすめします。
模写コーディングとは、実際にあるサイトを0からコーディングしていく練習のことです。
実際のサイトがどのような作りとなっているか把握できますし、学習したコードがどんな時に使われるのかも理解できるようになります。
模写コーディングするサイトは簡単なサイトから始めて徐々に難しめのサイトにチャレンジしていきましょう。
ポートフォリオを作成する
模写コーディングに慣れてきたら次はポートフォリオとなるWebサイトの制作をしてみましょう。
知り合いのためにWebサイトを作るでもいいですし、ご自身の自己紹介的なサイトを作るのでもいいと思います。
ポートフォリオの作成は力が付きますし、未経験からの転職などをこれから目指すような人にはアピールのためにもぜひ行っておきたいところです。
JavaScript・jQuery・Wordpressも勉強する
実務ではHTML/CSSのスキルだけで完結するような仕事は少ないです。
本格的にWeb制作の仕事を目指すのならHTML/CSS以外にもJavaScript・jQuery・Wordpressなどのスキルも身につけていきましょう。
【まとめ】HTML/CSS学習サイトを活用してスキルアップしよう
HTML/CSSを学習できるサイトはいろいろとあることがわかりました。
それぞれ学習形式やカリキュラムなどが異なりますので、まずは試しに利用してみて、自分に合ったサイトで学習を進めていくことをおすすめします。
variiisではITを学んだことがない人がこれからIT業界へ入りたい人をサポートしています。
様々な悩みをお持ちの方の無料雑談会をお受けしております。
- プログラミングスクールへ入るか？どのスクールがいいか？入るほうがいいのか？
- プログラミング学習の第一歩はどうすべきか？
- 未経験からIT転職はできるのか？
- IT業界の実情は実際どうなの？
スクール形式のご支援もありますが、まずはざっくばらんにオンラインで話しましょう！
過去100名を超える支援を様々な形で行ってきました。
まずはLINE友達への追加をお待ちしております！
追加された方に特別プレゼントを募集中！！
