エンジニア

現役エンジニア直伝|HTML/CSS学習の完全攻略ガイド!

「HTMLとかCSSを勉強したいけど、具体的に何をしたらいいのか分からない。何を使ってどういう手順で勉強していったらいいのか教えて欲しい!」

プログラミング学習の一番最初といえば、「HTMLとCSS」ですが、これまでプログラミングをやったことのない人にとってみたら、とにかく、とっかかりづらいですよね。

僕自身、プログラミング始めたての頃にそう感じていたことを覚えています。

なので今回は、現役エンジニアである僕が「HTML/CSS学習のステップ」について、一から説明していきたいと思います。

✔︎ 筆者プロフィール

◼️プログラミング歴:1年未満
◼️職業:Webエンジニア
◼️扱える言語:HTML/CSS, Java, Python, Vue.js, React, TypeScript, SQL
◼️保有資格:Java Silver, Oracle Master Bronze, ITパスポート

プログラミング歴こそ1年未満と若輩者ながら、上記の通り、複数の言語やIT系の資格を習得してきました(※上記全て1年以内の実績)。

なので、短期間より効率的にプログラミング言語を習得するノウハウはかなり構築されていると思います。

プログラミングは、たしかに奥が深くて難しいものではありますが、正しいやり方で順序立てて学習を続けていけば、誰でも必ず身に付けられる技術です。

ぜひ、本記事を読んで下さっている読者の方も、これから紹介する勉強方法を活用しながらプログラミングを学習していって下さい。

✔︎ 本記事を読んで分かること
  • HTML/CSSの学習をどのように勉強していったらいいのか
  • どんなリソース(本やWebサービス)を利用したらいいのか
  • 【おまけ】現役エンジニア流|プログラミング独学術

HTML/CSS学習の概要

他のプログラミング言語にも当てはまりますが、HTML/CSSの学習をするなら、下記のステップで勉強していけば大丈夫です。

  • ステップ1:必要なものを準備する
  • ステップ2:どんな感じの言語なのかをざっと理解
  • ステップ3:HTML/CSSでオリジナルWebページを作る
  • ステップ4:先輩エンジニアにフィードバックをもらう

とりあえず最初は学ぶ言語がどんなものなのかを簡単に理解して、さっと軽くインプットができたら、ググりながらどんどんアウトプットをしていくスタイルです。

そして、出来上がったアウトプットに対して、できる人から何かしらのフィードバックをもらえるとなお良いです。

そのフィードバックを受けて、次回の作品では、またさらに改善していく形を続けていけばバッチリです。

とはいえ、近くに知り合いのエンジニアなんてそう簡単に見つかるものではありませんよね。

でも大丈夫です。そういう場合はどうしたら良いのか、ということもステップ4にて、しっかり解説していきます。

それでは早速HTML/CSS学習のステップを一つずつみていきましょう。

ステップ1:必要なものを準備する

とりあえずHTML/CSSを学習する上で必須なものは「ネットワークに繋がるPC」のみです。

これぞプログラミング学習の真骨頂「PC1台あればなんでもできてしまう」ということです。

とはいえ、その他プログラミングをしていく上であったら便利なものはたくさんありますが、いきなりそういったツールを準備し始める必要はありません

色々なツールを準備し始めて、そこで息切れしてしまい、肝心のプログラミングが面倒臭くなってしまっては本末転倒です。

そうならないためにも、とりあえず最初は最小構成で進めていきましょう。

必要なツールがあればその都度紹介していくので、ご自身の目で見て、試してみて、良さそうだったら、ぜひ使ってみてください。

とりあえず、今の段階で必要なのはPCのみ。

PCが準備できたらステップ1はクリアです。どんどん先に進んでいきましょう。

ステップ2:HTML/CSSどんな感じの言語なのかをざっと理解

さていよいよ本題のプログラミング学習に入っていくわけですが、まずは簡単にでいいので、「HTML/CSSとは何か?」というところを少しだけ勉強してみることをオススメします。

その勉強のやり方として良い例悪い例を挙げるとこんな感じです。

  • 「HTML とは」「CSS とは」をGoogleで検索して1、2本の記事を読む。
  • 「HTML/CSS」関連の本を購入して、冒頭のHTML/CSSの説明だけをサクッと読む。
  • 無料のWebサービスを使って、実際に手を動かしてみる
  • 「HTML/CSS」関連の本を購入して、最初から最後まで理解できるまでじっくり読む。
  • 動画教材などをいきなり購入して、全て視聴する。

良い例と悪い例を比較してみていただければ、なんとなく「どうすれば効率的なのか」が少しお分かりいただけたのではないでしょうか。

要するに、このステップでのインプットするべきことは本当の基礎の基礎の部分のみです。

一つ一つプログラミング言語の文法まで理解する必要はありません。

逆に最初から全てを理解しようとすると、ほぼ間違いなく挫折してしまいます。それだけ、プログラミング言語は奥が深いのです。

なので、最初の入り口としては、特に大した課金をする必要もなく、ググって調べたり、無料のサービスを利用したりするので十分です。

お金を使うとしたら、辞書代わりになるHTML/CSSの本を、1冊だけAmazonで購入するくらいです。

それさえあれば、何か困ったときに何回も見返せば、記憶にも定着するし、体系的に知識を身につけることができるので、1冊だけ本を持っておくのはオススメです。

※ちなみに僕は、新しい言語を学ぶ時は、大体辞書代わりになる本を横において、いつでも調べられるようにしています。

例えば今回のHTML/CSSについていえば、下記の本1冊さえあれば十分です。

とはいえ、HTMLやCSSなら検索すればたくさん結果が出てくるので、最初のうちは、本はなくても特に問題はありません。

ご自身が「必要だな」と思ったタイミングで、ぜひ購入を検討してもらえればと思います。

ちなみに、おすすめのオンラインプログラミング学習サービスは、「 Progate」です。

※月額1000円程度の有料会員になれば学び放題ですが、無料会員でも初学者なら十分に手を動かして勉強することができます。

ステップ3:HTML/CSSでオリジナルWebページを作る

ステップ2で「HTML/CSSとは何なのか」ということが理解できたら、早速実践していきましょう。

作成するものはなんでも構いません。ぜひ自分が「作ってみたい!」と思うものにチャレンジしてみてください。

何を作ればいいかがどうしても思い浮かばない方のために、下記に例を挙げておきます。

【オリジナルWebページの例】

◼️自己紹介ページ
◼️自分の趣味や好きなものを紹介するページ
◼️お気に入りの国や場所を紹介するページ
◼️…

実際に作成しようとしてみると、「これはどうやったらいいんだろう」と困ることもたくさんあると思います。

そんな時は、Googleで検索してみたり、購入された本をとことん調べてみてください。

最初のうちはこれが結構ツラいものですが、「自分で調べる力」はプログラミング学習において非常に重要です。

もし、それでも分からない場合は、知り合いのエンジニアの方に聞いてみたり、僕でよければ、Twitter(Yoshio|Webエンジニア)のDMやブログのお問い合わせ欄からご連絡ください。可能な限り対応していきます。

また、実際に自分の手で、HTML/CSSのアウトプットをしつつ、さらなる学習意欲がある方には、Udemyがおすすめです。

文章や技術書では分かりにくい部分を、Udemyでは動画で解説してくれます。

僕もUdemyを利用して、アプリケーションの作成の仕方から公開するまでのやり方を学び、実際にアプリを公開することができました。

とはいえ、Udemyの動画教材は有料(ひと月に数回実施されるセール時は1500円程度)なので、初期の段階では特に無理して購入する必要はありません。

一応、以前Udemyについては複数の記事を執筆したので、興味があったらぜひみてみてください。

ステップ4:先輩エンジニアにフィードバックをもらう

自分で作成したWebページなどのアウトプットが完成したら、ぜひ、先輩エンジニアにみてもらって、何かしらのフィードバックをもらうことをおすすめします。

エンジニアの世界では、これを「レビュー」と言いますが、プロの世界でも頻繁に実施されていることです。

これの何がいいかというと、自分では気づくことができない「自分の欠点」を見つけることができることです。

最初のうちは、「動けばOK」というスタンスでコードを書いていくものですが、慣れてきたら、次のステップに進む必要があります。

実際のプロの現場では、例えば以下のことを意識しながらプログラミングをする必要があったりします。

◼️良きせぬエラーが発生しても想定どうりの動作をすること
◼️他人がみても容易に理解できるコードであること
◼️共通化できる部分は共通化すること
◼️依存関係をできるだけ減らすこと
◼️…

などなど、たくさんあります。僕も実際に日々、ソースコードを書く時はこういったことを意識しています。

初学者の方が、次のステップに進むためには、上記のようなことを少しずつ意識したコードを書けるようになる必要があるのですが、おそらく、自分一人では気がつきにくいでしょう。

自分では、うまくやっているつもりでも、先輩エンジニアからしたら、思考の抜け漏れがたくさんあるものです。

なので、こういったことに少しずつでも自覚していって、プログラミングのレベルを次のステップに上げるためには、自分以外の先輩エンジニアからフィードバックをもらう必要があります。

もし、近くに知り合いのエンジニアの方がいるのなら、是非とも自分の書いたソースコードを「レビュー」してもらうことをオススメします。

とはいえ、そう簡単に身近にエンジニアは見つかりませんよね。

僕もすごくよく分かります。

なのでそういった方は、「レビュー」の代替案として、「良いソースコードとは何か」を知る、という方法がいいと思います。

そのために特にオススメなのが、『リーダブルコード 』という本です。

僕自身、エンジニアになりたての頃に読みましたが、「良いコードとは何か」という根幹の部分をこれで学ぶことができました。

初学者にとっては、難しい部分もあるかと思いますが、いずれ長期的にプログラミングをやっていくのであれば、バイブル的な存在になり得るので、是非読んでみてください。

読んだ当時の感想等は、下記記事にてまとめてあります。

【おまけ】プログラミング独学勉強法

最後に、ここまでみていただいた皆様にお礼として、以前僕が書いた「プログラミングの独学勉強法」に関する記事を、2つ程シェアします。

プログラミングを学んで自分の資産たる技術を身につけることは、本当に価値あることだと思いますし、実際にプログラミングを学んでエンジニアになる人が増えて欲しいとも思っています。

以下で紹介している2つの記事は、読者の方が、少しでもプログラミングのさらなる魅力に気づいてもらえるように、プログラミング学習で挫折しないように、丁寧に書いた記事となっております。

是非、コーヒを片手にお時間がある時に読んでみてください。

最後までお読みいただきありがとうございました。今回は以上です。