ホームページを作成したい方、LP(ランディングページ)を作りたい方、WordPressを構築したい方に向けた勉強方法を紹介します。
Web制作をしたい方は、まず基礎となるHTML&CSSを学習することをオススメします。
HTML＆CSSの勉強手順
勉強にはいくつか手段が存在しますが今回は独学という方法に焦点を絞ります。
お金がある方はプログラミングスクールやオンラインスクールが良いです。
プログラミングスクールは確実ですが期間が長いため、心が折れる可能性があります。オンラインスクールだと2ヶ月程度で習得できるテックアカデミーが充実しています。
3つの手順
それではWeb制作の基礎、HTML＆CSSの独学手順を紹介します。
手順と書いていますが順番に決まりはありません、自分ができそうなものからやるのが大切です。自分が勉強した流れに沿って書いていきます。
Progate[プロゲート]
プロゲートはインターネットで様々なプログラミング言語を学ぶことができるオンラインサービスです。
月額980円の課金をしなければ最初の講座しか受講できないのが不満点ですが、スライドで見て勉強し、その後実際に自分でコードを書いて動作を確認するところまでがセットになっているのがポイントです。
学習はブラウザで完結するため、最初の面倒なテキストエディタの用意や環境設定が必要ありません。
そういったのが煩わしい方は最初にProgateで勉強するのをおすすめします。
Dotinstall[ドットインストール]
ドットインストールもインターネットで様々なプログラミング言語や関連する内容を学習することができるオンラインサービスです。
特徴としては1講座3分の動画にまとめられているという点です。実際に真似をしながらコーディングしたり、動作を確認することができるので細かいミスで行き詰まるといったことがありません。
また1本あたりの時間が短いため、気軽に勉強することができるのも良い点です。
そしてとにかく無料で学習できる量が豊富です。HTMLとCSSに関しては課金（月額980円）をしなくてもほぼすべての講座を受けることが可能です。
様子見がしたい方は最初にドットインストールで学ぶことをおすすめします。
本（スラスラわかるHTML＆CSSのきほん）
様々なHTML/CSSの本があるのでインターネットで学習するより、本のほうが体系的に合っているという方は最初に1冊手にとって勉強するのがおすすめです。
HTML5やCSS3と数字がついていると思いますが、初学であれば特に気にする必要はないかと思われます（最新はHTML5.2/CSS3）。
本で勉強すると挫折しやすいという方はある程度、勉強してから読むとスラスラ読めます。自分も最後に本を読みましたが1～2日で修了しました。
前者の本はパソコン操作が若干、苦手という方にも進めやすいと思います。
完璧は目指さない
1度に全てを覚えようとする必要はありません、何回か勉強して習得するのが当たり前です。途中で詰まっても、「ふーん」程度に流していきましょう。
なので上記で挙げた3つの手順を順番はどれからでも良いのですべてやることが大切になってきます。
最初が一番、しんどいと思うので自分に合う方法でスタートするのがベターです。
自分の場合は最初にプロゲートで2回勉強して、そこからドットインストール→本という手順で進みました。
プロゲートは重要なポイントを抑えて教えてくれるので結構、力が付きました。インライン要素やブロック要素の説明が分かりやすかったです。
ドットインストールはまんべんなく教えてくれます。1本3分という制限から説明が省かれる時もあるので自分で調べることも必要になります。疑似要素や擬似クラス、margin相殺などの説明が分かりやすかったです。
基本的にこの2つのオンラインサービスで結構な量を学習できているので最後に本を買うと、「何だこの本」って思うかもしれませんがそれだけネットも進化しているということですね。もちろん、本だけにしか書いていなかった内容もありました。
学習を終えたら手を動かす
ある程度勉強できたら実際に手を動かしてコーディングしてみましょう。
適当なサイトのクローンサイト（模写）を作ってみるとかなり力がつくと思います。実際に手を動かしてみると習ったことでは実装できないことも出てくるので自分で調べて習得していきます。
例えば、フリーランスの案件でよくあるLP(ランディングページ)制作とか想定してやってみると良いですね。仮実績作り（ポートフォリオ）にもなると思います。
こちらのサイトにまとめられているのでいっぱい練習ができます。デベロッパーツールを使えば「こういう記述をしているのか！」とかなり勉強になります。
また、辞典があればネット環境がない場所でも役に立つと思います。
Bootstrap
Bootstrapはフレームワークと呼ばれるモノの1種でHTMLやCSSの記述をより簡略化できるので作業効率が上がります。コードの行数も減ります。
ただ、昨今のHTML/CSSの進歩により必要ないという方もいます。なので、余力がある方や興味のある方のみ勉強していいと思います。
Bootstrapの1つの目玉はレスポンシブデザインを簡単に実装するグリッドシステムだと思うのですが、最近のHTMLにはFlexboxという似たようなことをできる概念があるので自分はドットインストールで一通り勉強して終わりました。
最新バージョンは4(4.1)ですが3ベースで書かれたもので勉強しても問題ないと思います。
Dotinstall[ドットインストール]
ドットインストールでは最新バージョンの4.0を使用した学習動画が用意されているのでおすすめです。全て無料で受講できます。
本
ネット上ではまとまって解説してくれているサイトが殆ど無いようなので本で学ぶのが手っ取り早いかもしれません。
Sass
Sass(サス)とはCSSを便利かつ効率よく記述する言語です。CSSをある程度理解していれば簡単に習得することができます。
記述量を少なくできる入れ子構造や、変数の使用、コードの再利用などが可能になるため、大規模になるほどありがたさを感じます。個人的にはかなりおすすめです。
SASS記法とSCSS記法の2種類があり、自分はSCSS記法を勉強しました。
本で勉強するほどでもないと思うのでネットでやったほうが良いと思います。
まとめ
最後までご覧いただきありがとうございました。自分が実際に行った独学方法を紹介しました。
HTML+CSSはホームページ作成の基礎なのでしっかり学習した方がWebサイトの自由度が上がります。
また、その次に学習するであろうjQuery(&javascript)やPHP・WordPressの勉強にも前提知識として役立つと思います。
勉強方法にはこれが正解とかありませんが参考になれば幸いです。
