近年、プログラミングのHTMLやCSSを学ぼうとしている方が増えてきています。しかし学習する方法は多くあり、以下のようなことを思っている方が多いと思います。「何から学習すればいいのかわらない」「サイトと参考書とどちらがいいの？」「独学で勉強したいけどどうしたらいいの？」そこで本記事では、おすすめの学習サイトや参考書などを紹介します。【オンラインプログラミングスクールを検討しよう】オンラインプログラミングスクールのおすすめは、以下の10サービスです・DMM WEBCAMP・ヒューマンアカデミー・Aidemy・テックアカデミー・DIVE INTO CODE・コードキャンプ・RUNTEQ・侍エンジニア塾・GEEK JOB・TECH CAMP詳しくは、以下の記事にまとめているので合わせてご覧ください。【関連記事】オンラインプログラミングスクールおすすめ10選｜選び方やメリット・デメリットも解説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つ紹介します。これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本1冊ですべて身につくHTML & CSSとWebデザイン入門講座スラスラわかる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を学び直したい方にもおススメの一冊です。【オンラインプログラミングスクールを検討しよう】オンラインプログラミングスクールのおすすめは、以下の10サービスです・DMM WEBCAMP・ヒューマンアカデミー・Aidemy・テックアカデミー・DIVE INTO CODE・コードキャンプ・RUNTEQ・侍エンジニア塾・GEEK JOB・TECH CAMP詳しくは、以下の記事にまとめているので合わせてご覧ください。【関連記事】オンラインプログラミングスクールおすすめ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つあります。HTMLやCSSがどのような風に使われているかそれぞれの言語にどのような役割があるのか大まかにどのようなことができるのかこれらを踏まえて「こういうときはコレを使うんだな」くらいの理解度で進めていきましょう。基礎学習だけでもそこそこボリュームがあるので、できるだけ短期間で終わらせます。そして忘れる前に次の段階の学習に進む必要がありますから、実践して身につけていく形で、約2週間前後を目安に学習していきましょう。HTMLやCSSを学ぶならスクールがおすすめ初心者の方でもHTMLやCSSは、独学で学習することはできますが、最初に学習サイトなどで勉強しましょう。基本を理解したあとは、参考書で応用を学びます。その後に、模写をして実践としてサイトを作ったりしてみましょう。またその学習期間は約2週間くらいを目安にして、「暗記」ではなく「理解」を意識することが必要です。【オンラインプログラミングスクールを検討しよう】オンラインプログラミングスクールのおすすめは、以下の10サービスです・DMM WEBCAMP・ヒューマンアカデミー・Aidemy・テックアカデミー・DIVE INTO CODE・コードキャンプ・RUNTEQ・侍エンジニア塾・GEEK JOB・TECH CAMP詳しくは、以下の記事にまとめているので合わせてご覧ください。【関連記事】オンラインプログラミングスクールおすすめ10選｜選び方やメリット・デメリットも解説