近年、プログラミングのHTMLやCSSを学ぼうとしている方が増えてきています。

しかし学習する方法は多くあり、以下のようなことを思っている方が多いと思います。

• 「何から学習すればいいのかわらない」

• 「サイトと参考書とどちらがいいの？」

• 「独学で勉強したいけどどうしたらいいの？」

そこで本記事では、おすすめの学習サイトや参考書などを紹介します。

HTML・CSSの独学におすすめのプログラミングサイト

HTML/CSSの勉強を手軽に始めやすいのは、プログラミングサイトです。しかし、サイトといっても多くあるのでどれを選べばよいのかわからなくなります。

そのような方に独学で進めるおすすめのプログラミングサイトを、以下の4つ紹介します。

• 未経験者が無料で学習するなら「SkillHub」

• 3分以内の動画でスキマ時間学習「ドットインストール」

• 参考書を活用した穴埋め形式の「CODEPREP」

• 図解中心で直感的に学べる「Progate」

未経験者が無料で学習するなら「SkillHub」

初心者の方におすすめなのが「SkillHub」です。SkillHubの独自カリキュラムで難しいことも優しく丁寧に教えてくれるので、本物のプロへの道がひらけます。

代表の吉田氏が自らコンテンツを制作しており、そのビデオは圧倒的にわかりやすいという評価がでているのも特徴です。

YouTubeで一部を公開していますが、チャンネル登録者数は10000人以上、3000以上の高評価とコメントがあります。また、他で受けると数十万円するような講座が無料で受けられるのも利点です。

その講座とはイラストレーターやHTML、WORDPRESS、CSSなどを学べる13の講座を受講できます。

3分以内の動画でスキマ時間学習「ドットインストール」

すべての動画が3分以内で手軽に勉強できる「ドットインストール」があります。

スマートフォンからも視聴可能なので、どこでもすきま時間で勉強することができます。また、ドットインストールはホームページやWebサービスの制作を実際に実践することで、プログラミングを学べる形態です。

その他にも多くの分野のレッスンがあるので、ゲーム制作やデータ分析など学べますし、プレミアム会員になると、現役エンジニアである先生への質問も可能になります。

そして1クラス500円から受講できる、自走型プログラミングスクール「256times」も運営していることから、自らにあった学び方を実現できるでしょう。

さらに、動画で学んだあとは、オンラインで仲間たちと実践的なスキルを身につけることもできます。

まずは無料で始めてみて、その後プレミアム会員でスキルアップを目指してみましょう。

参考書を活用した穴埋め形式の「CODEPREP」

「CODEPREP」は基本的なものからトレンドの技術まで、100冊以上のブックが学び放題です。

穴埋め形式から始まるので、1冊10分でテンポよく学習することができます。直感でプログラムの動きを理解できますし、わからないことがあればHINTやTIPSを見て、空欄を埋めましょう。

また穴埋め以外の部分についても理解したくなったら、「自由編集モード」に切り替えて学習できます。自由に編集して実際にどのような動きをするのか確かめることで、さらに理解度を深めることができるでしょう。

図解中心で直感的に学べる「Progate」

「Progate」はイラスト中心のスライドで学び、復習することができます。実際にプロダクトを作りながら学ぶので、すぐにプログラミングが実践できるのが特徴です。

必要なレッスンを順番に示してくれるので、最適な道のりで「創れる人」になれますし、またこちらも無料プランとプラスプランがあります。

アプリの方もあり、スマホゲーム感覚で楽しく勉強できますから、気軽に始めてみたいという方におすすめです。

HTML・CSSの独学におすすめの本

HTML・CSSの独学におすすめの本を、以下の3つ紹介します。

1. これだけで基本がしっかり身につく　HTML/CSS&Webデザイン1冊目の本

2. 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

3. スラスラわかるHTML&CSSのきほん

図説たっぷりの「これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本」

図説たっぷりの「これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本」は、実際にWebサイトを作りながらHTML/CSSとWebデザインの基本を楽しく学べる入門書です。

Flexboxレイアウト・CSSグリッドレイアウト・レスポンシブデザイン・CSSアニメーションなどの4つのサイトが制作でき、初歩的なものからレベルアップしていく内容です。

勉強を続けていくコツなども紹介しています。

知識ゼロだった方でも、1冊読み終わる頃には学習を深めていける内容です。

サンプルサイトが作れる「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」

サンプルサイトが作れる「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は、コードもデザインも全て学べて、Webサイト制作の定番＆旬のスキルなど必要なことが勉強できる1冊です。

• これから初めてWebサイトを作り始める

• HTMLとCSSを基本から学びたい

• 美しいデデザインのWebサイトを作りたい

• コードの知識からデザインまで全て学びたい

などを考えている人におすすめの一冊です。

最新のHTML Living Standardに準拠「スラスラわかるHTML&CSSのきほん」

1つのストーリーに沿ってWebサイト作りと、HTML＆CSSの基本が学べる入門書の決定版です。

またパソコン・モバイル端末に対応したサイト作りの手順を、図解入りで丁寧に解説しています。

Web制作を始める人や、HTML・CSSを学び直したい方にもおススメの一冊です。

テックコネクトでは、エンジニア出身のエージェントが対応し、でミスマッチを防ぎます。フルリモート/フルフレックス中心、最高単価は120万円/月、登録は30秒で完了。最新技術を含む案件が多数あり、キャリアアップも目指せます。

TechConnectを見てみる

【関連記事】オンラインプログラミングスクールおすすめ10選｜選び方やメリット・デメリットも解説

HTML・CSSの独学に必要な勉強時間は20〜500時間

HTMLとCSSの基本を理解するための勉強時間は、20〜500時間が目安と言われています。HTMLやCSSを勉強するには2種類の方法があり、独学かもしくはスクールに通う方法があります。

短期間で習得したいのならスクールがおすすめですが、期限がなければ独学でも十分に勉強できる内容です。

またオリジナルのWebサイトを制作するには200時間ほど、エンジニアとして仕事をするなら500時間ほどを目安とすると良いでしょう。

HTML・CSSを最短で習得するための勉強方法4ステップ

効率良くHTML・CSSを学ぶための方法を、以下の4つ紹介します。

• 学習サイトで基礎を学ぶ

• 参考書で応用を学ぶ

• サイトを模写する

• 1からサイトを作る

プログラミング学習サイトで基礎を勉強

学習サイトで基礎を学ぶのがおすすめです。

参考書などは難しく挫折する可能性がありますが、オンラインで学習できるものは初心者に向けて基礎をわかりやすくまとめています。また、スマホで活用することもできるので、すきま時間で学習することもできます。

出版日・年が新しい参考書で応用を勉強

基礎を習得したら、参考書で応用を学びましょう。

参考書も多くの種類がありますが、できるだけ新しいものが良いです。なぜかというとHTML・CSSはバージョンによって書き方が異なるので、古い本だと使われていない書き方が書かれているからです。

好きなウェブサイトのソースを参考に模写する

文法をある程度覚えたら、サイトを模写してみましょう。好きなWebサイトのソースを確認して、コードを実際に書いて自分の環境で実行します。

模写することで、見やすいサイトデザインにするにはどうすれば良いかわかるようになってきます。

ポートフォリオとなるオリジナルのサイトを作成

模写が終わったあとは、実際に1からサイトを作ってみましょう。

まず、作りたいWebサイトの種類を決めます。練習では、自分のプロフィールなど簡単なものがおすすめです。その次にサイトデザインをどうするかをまとめます。

1からサイトを作ることでWebサイト制作の知識が身につき、実務レベルまで到達することが可能になります。

HTML・CSSを独学で習得するポイントは暗記ではなく「理解する」こと

これから勉強するうえで大事なことは「覚える学習」ではなく、「理解する学習」をしましょう。

プログラミングは覚えなくても、調べるだけで大丈夫です。必要な時に必要な内容だけ調べられるスキルが重要になってきます。

そこで、HTML/CSSの勉強で理解するべきポイントは3つあります。

1. HTMLやCSSがどのような風に使われているか

2. それぞれの言語にどのような役割があるのか

3. 大まかにどのようなことができるのか

これらを踏まえて「こういうときはコレを使うんだな」くらいの理解度で進めていきましょう。基礎学習だけでもそこそこボリュームがあるので、できるだけ短期間で終わらせます。

そして忘れる前に次の段階の学習に進む必要がありますから、実践して身につけていく形で、約2週間前後を目安に学習していきましょう。

テックコネクトは、エンジニアのための副業・フリーランス案件紹介コミュニティです。

エンジニア出身のエージェントが対応し、技術理解でミスマッチを防ぎます。

• 実績多数の開発会社が運営
• 最新技術を含む案件多数
• 最高単価は120万円/月
• フルリモート/フルフレックス中心
• 複業での参画可能

生成AIなど新しい技術を用いた面白い案件、DX・新規システム開発などの挑戦的な案件も多数取りそろえています。

テックコネクトは、エンジニアのキャリア形成をサポートします。スキルアップを目指したいエンジニアの方はぜひ、ご登録ください！

TechConnectを見てみる

HTMLやCSSを学ぶならスクールがおすすめ

初心者の方でもHTMLやCSSは、独学で学習することはできますが、最初に学習サイトなどで勉強しましょう。

基本を理解したあとは、参考書で応用を学びます。その後に、模写をして実践としてサイトを作ったりしてみましょう。

またその学習期間は約2週間くらいを目安にして、「暗記」ではなく「理解」を意識することが必要です。