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

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

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

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

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

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

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

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

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

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

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

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

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

もちろん無料です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[check comment=”学習の流れ”]

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

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

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

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

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

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

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

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

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

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

まとめ

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

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