プログラミング基礎 独学ロードマップ【HTML/CSS/レスポンシブ編】

こんにちは。まさかずです。

Webエンジニアになって1年半になります。
個人でもWordPressでのWebサイト制作の学習をしています。

自分の経験を元にプログラミング基礎の学習ロードマップを作成しました。

補足
最終的にWordPressでのサイト制作を目標にしています。記事は複数回に分ける予定です。

今回は「HTML / CSS / レスポンシブ編」になります。

学習ロードマップ学習目標
  • レスポンシブサイトのコーディングができる

それでは、どの様な流れで進めるか見ていきましょう。

プログラミング基礎 独学ロードマップ【HTML/CSS/レスポンシブ編】

「HTML/CSS/レスポンシブ編」のロードマップ構成は以下のとおりです。

  1. テキストエディタを導入【Visual Studio Code】
  2. 学習に入る前に【コツ】
  3. HTML&CSSの基礎【プログラミング開始】
  4. 検証ツールを使えるようになろう【Chrome】
  5. レスポンシブサイトの作り方【今回のゴール】

①〜⑤でレスポンシブのコーディングができるようになります。

補足
利用するPCはWindowsでもMacでもどちらでも構いません。お持ちのPCをお使い下さい。

それでは、ロードマップに進みます。

1、テキストエディタを導入【Visual Studio Code】

プログラミングのコードを書くソフトを「テキストエディタ」といいます。

色々種類がありますが、Microsoft社製の「Visual Studio Code」一択で良いでしょう。

もちろん無料です。

ダウンロード

「Visual Studio Code」のメリットをいくつかあげますと、

  • サクサク動く(軽い)
  • コードを自動で整列してくれる(自動補完)
  • 多くの言語に対応している
  • コードを色で分けてくれる

といった感じになります。

自分専用にカスタマイズも可能ですので、興味のある方は調べてみると良いかもです。

2、学習に入る前に【コツ】

学習に入る前にプログラミング学習のコツをお伝えします。

コツを知っていれば、効率よく勉強ができます。

学習のコツ
  • 手を動かす ※一番重要
  • 全て暗記しなくてOK
  • わからなければ見返してOK
  • 基礎を何回もしない(Progateを2周・3周するなど)

勉強は必ず手を動かして、コードを書きながら進めましょう。

テスト勉強のように暗記する勉強法では意味がありません。

基礎学習ばかりする「ノウハウコレクター」にならないようしましょう。

基礎が身についたらなるべく早く「アウトプット」することが大切です。

この辺りの心構えについては、実際エンジニアをされている方の動画が参考になります。

【初心者必見】プログラミング学習に〇〇は必要ない!【効率のいい学習法】(東京フリーランス)

3、検証ツールを使えるようになろう【Chrome】

作ったWebサイトをブラウザでチェックする時に「検証ツール(デベロッパーツール)」を使用します。

Google Chrome に標準でついる機能でサイトチェックに必須のツールです。

ここでは下の動画で概要を理解して下さい。

今更聞けない! ブラウザデベロッパーツールの使い方(とだこうき)

実際の使い方はProgateに載っているものが参考になります。

実際のコーディングでは何度もチェックするので、早めに慣れておくとコーディングが高速化していきますよ。

それでは、次の章からコードを書いていきましょう!

4、HTML&CSSの基礎【プログラミング開始】

ここからプログラミング学習に入ります。

学習方法は本、動画、Webサービスなど様々あります。

その中で今回は以下のサービスを使います。

利用サービス
  • ドットインストール:3分くらいの動画を見ながらプログラミングが学べるサービス
  • Progate:ブラウザ上でゲーム感覚で学習をすすめることができるサービス

2つのサービスを使う理由は、お互いの弱点を補うためです。

Progateはブラウザ上で勉強できるのですが、実環境との肌感覚の違いに戸惑いが出ます。

その点、ドットインストールは実環境で行いますが、理解できる内容に限りがあります。

ドットインストールとProgateを一緒に勉強する方法が理解が深まると思います。

学習の流れ

いきなりボリュームがあり大変ですが、頑張って継続しましょう。

Progateは月980円の有料となりますが、かならず価値のある自己投資になります。

毎月の外食を1回我慢して、ここに投入してみてください。

補足

Progateはテストっぽい部分もありますが、わからなければ見返しても全然OKです。

ただし、内容は極力理解するようにしてみてください。

5、レスポンシブサイトの作り方【今回のゴール】

レスポンシブサイトとは1つのHTMLファイルでPCやスマホ表示に対応するサイトのことです。

最近つくられるサイトはほぼレスポンシブサイトなので、必須の知識となります。

少し難しいですが、しっかりと理解しておきましょう。

ここまで勉強すれば、一般的なWebサイトのコーディングができるレベルになります。

特にFlexboxはレスポンシブサイトで多用するので、理解をしておきましょう。

ここで今回のゴールになります。お疲れさまでした。

まとめ

今回の記事では、WordPressでのサイト構築を目標とした「HTML / CSS / レスポンシブ編」でした。

  1. テキストエディタを導入【Visual Studio Code】
  2. 学習に入る前に【コツ】
  3. HTML&CSSの基礎【プログラミング開始】
  4. 検証ツールを使えるようになろう【Chrome】
  5. レスポンシブサイトの作り方【今回のゴール】

参考にしていただくと幸いです。