「Webサイトを作れるようになりたいのでプログラミングを勉強したい。HTMLとCSSから勉強を始めようと思っているが、どういった手順で勉強を始めたら良いのだろう?HTMLとCSSを独学で習得する方法を教えて欲しい。勉強するときに注意することがあれば合わせて知りたい。今回はそういった悩みを解決します。記事の信頼性この記事を書いている私はエンジニア歴8年で、業務系のWebサイトを開発した経験があります。その際に必要となったHTMLとCSSの知識は独学で習得しました。私がHTMLとCSSを独学した方法やノウハウ、スキルを上げるコツなどを紹介できます。この記事ではWebサイトを作成するために必要なHTMLとCSSを独学で習得する3ステップを紹介します。合わせて、HTMLとCSSのスキルを爆上げする方法について、現役エンジニアがコツを紹介します。この記事のとおりに独学することで、プログラミング初心者でもWebサイトが一通り作れるようになります。模写するわからないことがあってもどんどん作ってみるまとめ:HTMLとCSSは意外と簡単HTMLとCSSを独学する3ステップ【初心者でもOK】HTMLとCSSを独学するには次の3ステップに従って勉強を進めるのがオススメです。Progateで基本を学ぶ本を使って「実際のWebページの作り方」を学ぶUdemyを使って実践的なスキルを学ぶProgateで基本を学ぶまずはProgateを使ってHTMLとCSSの基礎を身につけます。Progateとは、インターネット上で様々なプログラミング言語の基本を勉強することができるサービスです。スライドを使って知識をインプットし、その後の演習で実際にコードを書くことでスキルを定着することができる学習スタイルです。1回のレッスンはスライド5枚程度のボリュームなので、短い時間でサクサクと学習を進めることができます。インターネットに接続したブラウザだけで学習が全て完結するので、Webサイトを作るための初期設定などが不要であり、プログラミング初心者でもつまづくことなく学習を開始できます。レッスンを繰り返すとレベルが上がっていく要素があり、ゲーム感覚で楽しく続けられますHTML&CSSコースは全部で6レッスンProgateのHTML&CSSコースは全部で6レッスンです。ゼロから学べる学習コースが3つと、学習コースで学んだ内容を実践する道場コースの3つです。進め方は、Progate公式がオススメしている通り、次の流れでOKです。学習コースの初級・中級⇒道場コースの初級・中級⇒学習コースの上級⇒道場コースの上級1周だと全然わからないと思うので、2,3週すると良い感じです。月額980円の定額制Progaeレッスンの最初は無料で、途中から月額980円の定額制になります。HTML&CSSコースの場合は、学習コースの初級コースは無料で学べて、残りは月額会員に申し込んでから学びます。ぶっちゃけ、月980円で学べるのは控えめに言ってめちゃくちゃお得です。専門書は1冊3000円ぐらいするので、それと比べると1/3の値段です。それでいて勉強ボリュームも十分あり、契約中は何回でも復習できるので、使わない手はないです。「勉強しようかな・・・」と考えている人は、悩んでいるくらいならさっさと申し込んで勉強を始めてしまいましょう。ProgateでできるようになることProgateを使ってHTML&CSSを学習すると次のことが分かります。Progateでできるようになることプログラミングの雰囲気がどんな感じかわかるWebページの構造がなんとなくわかるProgateの段階では、「なんとなくプログラミングってこんな感じか~」と思えるだけでOKです。最初から理解しようとしすぎると普通に挫折するので、とりあえずやってみるのが一番大事ですね。本を使って「実際のWebページの作り方」を学ぶProgateで基礎を身につけた次は、本を使って実際のWebサイトの作り方を学びます。Progateで基礎を身につけたことによって自分が作りたいWebページをある程度作ることができるようになりました。実際のWebサイトを作るためには複数のページを組み合わせて作るのですが、一連の作る流れはやってみないとわからないことが多いです。Progateはブラウザでコードが書けるのですが、実際にはブラウザでコードを書くことなんてないので、テキストエディタでコードを書くのに慣れることが必要です。学習サイトだけだと1つのサイト作成まで全て学ぶことは難しいんですよね。いった課題を克服するために、本を使って実際のWebページ作成の流れを学習します。私が実際に学習に使った本の中でオススメできるのは次の2つです。使って開発現場で使えるより実践的なスキルを学びます。Udemyは実際のエンジニアが講師の動画を購入し、学習を進めることができる学習サイトです。プログラミング言語の情報は常に進化していて、学習サイトや書籍だけでは最新の情報がキャッチアップできないケースがあります。その点、Udemyは現役エンジニアが講師を務めているため、現場で使われている最新の情報を習得することができるので、即戦力クラスのスキルを身につけることが出来ます。以下のコースでは、より実践的なHTMLとCSSを学ぶことができ、モダンなWebデザインを作成することができるようになります。Webプログラミング入門もし動画の内容が合わなかった場合、30日間の返金保証もあるので、試してみると良いですね。【コツ】HTMLとCSSのスキルを爆上げする方法Progateや本で一通りスキルを身につけたら、次はスキルを磨き上げる作業を行います。ここでは、HTMLとCSSのスキルを爆上げする方法やコツについて、現役エンジニアがこっそりと紹介します。具体的には次の2つの方法を使ってみてください。模写するわからないことがあってもどんどん作ってみる模写するまずは既にあるサイトを真似して作ってみる、すなわち模写するのがおすすめです。実際にWebページやWebサイトをゼロから作ってみましょう!とはいっても、いきなりゼロからは作れないと思います。そこで、すでに世の中にあるWebページを1ページだけ真似して作ってみましょう。Webデザインギャラリーというページに色んなデザインのページがまとめられています。この中から自分が作れそうなページや魅力的に感じたページをピックアップして模写してみると良いでしょう。複雑なものにしすぎると途中で挫折するので、なるべくシンプルで自分でも作れそうなサイトの模写から始めてくださいねわからないことがあってもどんどん作ってみる「まだ知識が不足しているから全然作れないよ・・・」という不安は全て捨て去って、わからないことがあってもどんどん作ってみてください。いうのも、世の中のWebページを作成している人がHTMLとCSSの知識を全て理解しているかというと、そんなことはありません。私も知りません(笑)ではどうしているかというと、分からないことは都度調べながら作成しています。実際に自分でページを作ってみるとわからないことがたくさん出てくるはずです。「このレイアウトってどうやって作るの?」とか「思い通りに作れないんだけど...」という感じです。その都度調べていくことで着実にスキルアップしていきます。プログラミングの世界で大切なことは、コードの書き方を暗記することではなく、調べ方がわかっていることです。コードを書いている時間より調べている時間の方が長いと思います。プログラミングでは、この「自分で解決する力」がすごく大事です。チャレンジしてみてください。参考HTMLとCSSを書く上でわからないことは、次のサイトを見ればなんとなくわかります。:初心者向けまとめ:HTMLとCSSは意外と簡単ということでHTMLとCSSを独学する手順を紹介しました。HTMLとCSSは比較的簡単で独学しやすいので、初めてプログラミングを学習しようとする人でも習得しやすいです。なによりHTMLとCSSはわかりやすいし、見た目を作る言語なので触ってて楽しいです。この記事で紹介した内容を参考に、プログラミングによるものづくりの楽しさを味わってみてください!あとは行動あるのみ。HTML&CSSの学習を始めようとは言いながらも、実際に行動に移す人は100人いたら5人ぐらいだと思います。何かを始める時には「やってみようかなぁ...」と悩んでる時間が多くなりがちです。残念ですが、悩んでいるだけでは何のスキルもみにつきません。Web製作のスキルは身に着けておいて損はないので、気になったらすぐ学習を始めてみましょう。コメントをキャンセルメールアドレスが公開されることはありません。新着記事プログラミング2020/2/21僕がプログラミングをするときに紙のノートを使う3つの理由プログラミング2020/2/20デバッグを制すものはプログラミングを制す【3つのコツと真髄を伝授】プログラミング2020/2/20【作業効率爆上げ】プログラミングをするならデュアルディスプレイ推奨プログラミング2020/2/14CodeCampの評判は?特徴と実体験レビューをまとめてみた【割引特典あり】プログラミング2020/2/14【本質】ソースコードを読むコツはソースコードを読まないことカテゴリーブログライフスタイル仕事コードプログラミングコミュニティドナちきドナ●ドを人間化して可愛さ成分を取り除いた30代サボリーマン&エンジニア。半年後に副業月20万で人生を変える。脱サラ&独立に向けて爆進中。『楽しんで稼ぐ』がモットー。ブログのノウハウ|エンジニアを目指す人へ有益情報発信中。ブログを共に頑張るコミュニティ「B-ENGINE」運営。AFFINGER5.。