どうも、しめじです！
この記事では、HTMLとCSSを独学かつ最短期間で学ぶ方法について、初心者の方向けに分かりやすく解説していきます。
あなたは今、こんな風に悩んでいませんか？
- 「HTML/CSSをどう学習していったら良いのか分からない…」
- 「HTML/CSSを学び始めたものの、なかなか理解できない…」
- 「HTML/CSSは理解できたけど、サイトを作ろうとすると手が止まる…」
お恥ずかしい限りなんですが、実はこれ、僕がWeb制作の学習を始めた当初に実際に悩んだことですｗ
HTML/CSSって、意外と学習ルートが確立されてないんですよね。
情報はあるんだけど、バラバラに書かれていて結局どの手順で進めたらいいのか分からない…みたいな感じ。
なので今回は、この記事だけを読めばHTML/CSSの学習が最短で進められるよう、独学のロードマップを分かりやすくまとめてみました。
それぞれの見出しの下に上記のような目安期間を設置しているので、目安期間を参考に進めてもらえるとスピード感が分かりやすいかと思います。
前提：覚えるのではなく理解を優先した学習をする
重要なので先にお伝えしておくんですが、これから学習を進める時は「覚える学習」ではなく「理解する学習」を意識してください。
僕もやっていたんですが、ついつい覚えようとしちゃうんですよね。プログラミングは学校の勉強ではないので、覚えずとも分からない時にググって調べるだけでOKです。
例を出すと、教科書持ち込みができるテストみたいなものですね。必要な時に必要な内容を素早く調べられるスキルの方が重要になります。
具体的には、以下のようなポイントが理解できていれば、どんどん先に進んで大丈夫です。
- HTMLやCSSがどんな風に使われているのか
- それぞれの言語にどんな役割があるのか
- 大まかにどんなことができるのか
ついつい完璧を追い求めてしまいがちなんですが、「なるほど、こういう時はアレを使うんだな」くらいの理解度でガンガン進めていきましょう。
「そんなんで大丈夫？」と思うかもしれませんが、大丈夫です。僕もそんな感じで進めたので。
知識は技術として使って初めて価値を持ちます。まずはサイトを作るというステージに最速で立つことを目標に進めましょう。
しめじ覚えようとしても量が多すぎて無理なので、使い方や役割、どんなことができるのかを理解していきましょう！
1. HTML/CSSがどんなものかを学習する
これから学習を始める方は、まずHTML/CSSがどんなものなのかを理解する学習をしましょう。
ここは定番ですが、以下の2サイトのHTML/CSSコースをこなすのがおすすめです。
それぞれ1〜2周ずつくらいやれば、大まかなイメージや使い方は理解できるかと思います。
理解するだけならProgateだけでもOKなんですが、ドットインストールの方がより実務に近いです。
Progateで基本を理解して、ドットインストールで実際の使い方を学ぶイメージで進めましょう。
Progateとドットインストールは、どちらも有料会員登録する必要があります。2つ合わせて月額2000円くらい。
学習が終わったら解約すれば良いので、必要経費だと思って投資しましょう。
ちなみに、Progateとドットインストールだと、ドットインストールの方がやや難易度高めです。
いきなりドットインストールから入ると訳がわからず萎えてしまいがちなので、順番としては
Progate → ドットインストール
の順でこなすようにしましょう。
両方こなすことで、それぞれの教材に足りない知識が補完できるようになっています。
あとは教材通りに学習を進めればOKですが、効率よく進めるために以下のポイントを押さえておくと良いですね。
- 完璧な理解を求めない
- 出来るだけ短期間で終わらせる
- 3周以上はやらない
結構大切なので、1つずつ説明していきます。
完璧な理解を求めない
最初にもお話しした通り、完璧を求めてはいけません。繰り返しなんですが、マジで重要です。
なんなら僕も完璧には理解していません。分からないことはいつもググって調べてる感じです。
あくまで目的はWebサイトを作れるようになることです。理解はそこそこで十分なので、よく分からなくても一旦先に進めましょう。
しめじ最初はProgateの道場コースとかマジ心折れるくらい出来ないですが、気にせず進めてOKです！
出来るだけ短期間で終わらせる
HTML/CSSの基礎学習だけでもそれなりにボリュームがあるんですが、出来るだけ短期間で終わらせるように意識しましょう。
人は時間が経つと、覚えた端から忘れていきます。なので、忘れる前に次のフェーズに進む必要があります。
目的はサイトを作れるようになることなので、学習にいつまでも時間を割いてはいけません。ドットインストールまでの学習は、2週間前後を目安に進めましょう。
しめじ色んな方を見ていると、早くサイト模写などに入っている人ほど成果が出るのが早い傾向にあります！
3周以上はやらない
ついつい理解が足りないからと、3周・4周とProgateやドットインストールをやってしまいがちですが、3周以上は大体無駄です。
なぜなら、3周目にもなると内容を覚えている部分が出てくるからですね。これだと同じことはサクッとできても、少し形が変われば何もできなくなります。
仮にどうやるのか思い出せなくても、その時調べに戻れば十分です。
同じことを繰り返していても実務に必要な応用力は身につかないので、不安でも次に進みましょう。
しめじProgateをやっていると他のコースにあれこれ手を出してしまいがちですが、これもあまり意味がないので止めておきましょう。
2. VScode（テキストエディタ）を使いやすくする
ドットインストールで学習する時にVScodeを使ったと思うんですが、VScodeは今後ずっと使います。
相棒と言っても過言ではない存在なので、今のうちに使い方のコツを押さえておきましょう。
具体的には、以下の3つのポイントを押さえておけばOKです。
- 便利な拡張機能をインストールする
- Emmetの使い方を学ぶ
- 便利なショートカットキーをメモっておく
便利な拡張機能をインストールする
VScodeには、便利な拡張機能が色々あります。
簡単にいえば、VScodeを使いやすくする機能が無料で色々使えるイメージですね。
中でも、僕がずっと入れている拡張機能の一覧を載せておくので、ひとまずこれらをザッとインストールしておきましょう。
- Auto Rename Tag（タグを片方変えるともう片方も変わるようになる）
- Bracket Pair Colorizer（対応する括弧が分かりやすくなる）
- Code Spell Checker（スペルミスをチェックしてくれる）
- CSSTree validator（CSSの構文ミスをチェックしてくれる）
- Format HTML in PHP（phpファイル内のHTMLを整形してくれる）
- HTML CSS Support（作ったclass名が変換候補に出てくるようになる）
- htmltagwrap（選択範囲をタグで囲めるようになる）
- Japanese Language Pack for Visual Studio Code（日本語化）
- Live Server（自動でブラウザがリロードされる）
- Live Sass Compiler（Sassを簡単に使えるようになる）
- Prettier – Code formatter（保存するとソースを自動整形してくれる）
- WordPress Snippets（WordPress関数を補完してくれる）
- zenkaku（エラーの原因になる全角を見える化）
一応、設定が少しややこしいもの、すぐには必要ないものは除外しています。
設定が必要なものは分かるようにリンク先を設定しているので、記事をチェックしながら導入してみましょう。
これをやっておくだけで、VScodeがかなり使いやすくなりますよ。
しめじひとまずはこれだけ入れておけば十分です！慣れてきたら自分好みの拡張機能を追加してみましょう。
Emmetの使い方を学ぶ
Emmetは、ざっくり言うと少ないタイピング数でコードを書けるようになる機能です。
VScodeには標準で搭載されているので、既に使っている人もいるかもしれませんね。
Emmetに関しては、以下のはにわまんさんの記事を読んでおけば理解は十分なので、チェックしておきましょう。
あとは触りつつ手探りで覚えていけば大丈夫です。やってれば自然と覚えます。
Emmetのチートシートもあるんですが、僕の場合ぜんぜん使いませんでした。使った方が分かりやすい方はブックマークしておくと良いですね。
しめじEmmetを使いこなせるかどうかで、コーディング速度が数倍変わります。簡単なものから使っていくと良いでしょう。
便利なショートカットキーをメモっておく
VScodeには色々便利なショートカットキーがあります。
よく使うものだけでも覚えると効率が爆上がりなので、ひとまずはメモって見える位置に貼り付けておくと良いですね。
以下のサイトで分かりやすくまとめられているので、まずは自分がよく使うものから試していきましょう。
しめじVScodeとは末長く付き合うことになるので、より効率よく使えるように意識しながら使うのがおすすめです！
3. Sass(SCSS)を使えるようにしておく
ここまでに学習してきたCSSですが、実はそのままベタ書きすることは滅多にありません。
実際にコーディングする時は、「Sass」と呼ばれるCSSの機能を拡張した言語を使うのが一般的です。
「Sassって何やねん…」って感じだと思うんですが、Twitterとかやってるとちょいちょい見かける「SCSS」という言語のことですね。（実際にはSASSという言語もあるんですが、使われてるの全然見ないです）
Progateに簡単なレッスンがあるので、一通りこなしておきましょう。
難しそうに感じるかもしれませんが、基本CSSが書きやすくなったくらいの認識で使えるので、特別難しい勉強は必要ありません。
何ならそのままCSS書いても普通に機能します。
一応でも使えるようになるとコードを書く量が格段に減らせるので、よく使う機能だけ押さえておいて、あとは実践で使いながら覚えていく感じでOKです。
しめじこの記事の通りに進めている場合、VScodeの拡張機能を入れた時に必要な機能を入れてあるので、とりあえず一度使ってみると良いですね。
細かい使い方などはググってもいいんですが、意外といい感じの情報がないので本で学習するのが良いかと思います。
ちなみに僕の場合は、「Web制作者のためのSassの教科書」という本で学習しました。
ポチップ
これ1冊でSassはカバーできるので、購入しておくと何かと便利です。
しめじSassは僕がWeb制作フリーランスになって一番使っている言語です。ぶっちぎりで使うのでおさえておきましょう！
4. HTML/CSSを使ったサイト制作を学習する
ここまで学習したあなたなら、既にサイトを作るための下地が出来ています。
ここからは、とにかくサイトを制作しながら学んでいきましょう。結果的に実力もつきますし、自信もつきます。
具体的には、以下の手順で学んでいきましょう。
- Web制作の流れと作り方を学習する
- カンプからのサイト制作を学習する
Web制作の流れと作り方を学習する
まずはWeb制作の流れと基本的な作り方を学びましょう。
ネットだといい感じにまとまった情報が見当たらないので、ここも本で学習を進めていきます。
教材としては、「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」という本がおすすめです。
ポチップ
この本は読みながらサイトを作る形式になっていて、手を動かしながら進めるだけでWeb制作の基本が一通り学べるようになっています。
今までに学習した知識を復習しながら進めるイメージでやってみましょう。
しめじ僕も初めてのサイト制作はこの本から始めました！Web制作の流れを一通り学べるのでおすすめです！
デザインカンプからのサイト制作を学習する
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座での学習が終わったら、次はデザインカンプからのサイト制作を学んでいきましょう。
デザインカンプからのサイト制作は、制作会社さんと仕事をする上で必須の能力になります。
しめじ一般的にはサイト模写をおすすめされているケースが多いんですが、今後のためにもカンプからのサイト制作をおすすめします！
このあとの学習で出てくるAdobe XDで作られたデザインカンプからのコーディングを行えるように、まずははにわまんさんの以下の記事を読んでおきましょう。
また、デザインカンプからのサイト制作では、基本的にデザインカンプ通りのサイトを作ることが求められます。（これを「ピクセルパーフェクト」と呼ぶことが多いです）
やり方自体は難しくないので、こちらも以下のはにわまんさんの記事で先に学んでおきましょう。
準備と理解が終わったら、早速デザインカンプからのサイト制作を進めていきます。
練習用に無料のデザインカンプを配布してくれているサイトがあるので、ありがたく使わせて頂きましょう。
どれも分かりやすい解説付きなので、初心者の方でも安心して学習できます。
順番としては簡単そうなものから好きな順でOKですが、仮に僕がやるなら以下の順番でやるかなーと思います。
クリ★スタさんのデザインカンプが最後になっているのは、jQueryという言語を使った実装が含まれているためです。
「クリ★スタ初級編」以下を進める際は、先にjQueryの基礎学習をしておきましょう。
「できるだけ解説を見ずにサイトを作ってみる→解説を読んでフィードバックを得る」という流れで学習すると、理解が進みやすくなります。
デザインカンプからのコーディングは、おそらく想像を絶するほど大変です。
最初はそれこそ全然進まないという状況が続くかもしれません。
ただ、安心してください。僕もあなたと全く同じ時期がありました。
全然できず、投げ出したくなった時もあります。
解説を見て楽になりたいと思うかもしれませんが、出来るだけ答えを見ずにググって解決してみてください。
その苦労が、後々必ずあなたの力になります。
なお、10〜15分調べても分からない場合は素直に解説コードを見ちゃいましょう。
特に最初のうちは解説のコードを写経してみて、分からない点をググって調べたらOKです。
しめじ実務で詰まった時も基本はググって解決することになるので、今のうちにググり力を鍛えておきましょう！
5. 実案件レベルのサイト制作を学習する
デザインカンプからのサイト制作を終えたあなたは、既にサイトを作ることが出来るようになっています。
ただ、実務レベルのサイト制作では、もう1つスキルが必要になるんですよね。それがjQuery（+JavaScript）です。
jQueryは簡単にいうと、Webサイト制作に特化したJavaScriptみたいなものです。主にサイトに動きをつけるために使われています。
実務では、ハンバーガーメニューやスライダー、ポップアップ、ローディング画面など、色々な部分でjQueryを使います。
JavaScriptを直接書くことは滅多にありませんが、jQueryはそれなりに理解が必要になります。
ここまで来ればあと一息。jQueryを使った本格的なサイト制作を学ぶために、以下の3つの学習を進めていきましょう。
- jQueryの基礎を学習する
- サイト制作でよく出てくるパーツの実装方法を学習する
- 実案件に匹敵するサイトを作ってみる
jQueryの基礎を学習する
まずはjQueryの基礎を学習しましょう。とはいえ、さほど深く学習する必要はありません。
なぜなら、実務では1からコードを書くわけではなく、既に機能が完成されたプラグインを使うことが多いからです。
jQuery自体を書けるようになるというよりは、読んで意味がある程度理解できるラインを目指して学習してみてください。
具体的には、Progateで以下のコースだけをサラッとやっておきましょう。
先にJavaScriptを学習してからjQueryコースに入ると、理解が進みやすいのでおすすめです。
ひとまずは1周やれば十分ですね。jQueryで何ができるのか、どんな書き方をするのかを学ぶ程度で進めていきましょう。
今後jQueryについて詳しく学びたい方は、「jQuery標準デザイン講座」という本が実用的でおすすめです。
実際によく使われるパーツ別に実装方法が書かれているので、初心者の方でも分かりやすく読めるかと思います。
ポチップ
しめじJavaScriptやjQueryは学習しすぎると沼にハマります。あれこれ学習せず「なるほど、こんな感じか…」くらいの感覚で次に進みましょう。
サイト制作でよく出てくるパーツの実装方法を学習する
jQueryの基礎を学習したら、次はサイト制作でよく出てくるパーツの実装方法を学習しましょう。
ここが出来るようになると、いよいよ実務レベルのLPやサイトの制作が出来るようになります。
おすすめの学習教材は、しょーごさんの以下のnoteですね。
こちらの教材、有料ですがめちゃくちゃ有益です。（有料といっても破格の安さですが…）
僕自身が学習していた時には無かった教材なんですが、初学者がかなり迷うことになるjQueryとJavaScriptでの実装に特化した教材になります。
具体的には、サイト制作でとにかく頻繁に出会うことになる以下の7つのコーディング方法が学べます。
- ハンバーガーメニュー
- ドロワーメニュー
- ローディング
- スムーススクロールでページトップに戻るのボタン
- アコーディオン
- モーダル
- タブ
この辺の実装方法は、実務において必須スキルになります。
もちろんコピペでも動くんですが、カスタマイズのためには理解が必要になるので、「なぜこのコードで動いているのか？」という部分を触りだけでも理解しておくと良いでしょう。
しめじサイト制作の頻出パーツの作り方を学んだら、いよいよ実案件レベルのサイトが作れるようになります！
実案件に匹敵するサイトを作ってみる
ついに来ました。いよいよ実案件に匹敵するサイトを作ってみましょう。
ここで学ぶべきことは、実務に近いレベルのコーディングスキルの獲得ですね。
結論から言うと、こちらもしょーごさんの出している以下のデザインカンプをおすすめします。
2つとも有料ですが、それだけの価値のあるデザインカンプになっています。
具体的には以下の通りですね。
- サイト制作で頻出するJavaScript、JQueryを実務ベースで学べる
- 実案件に近いレベルのサイト制作を学べる
- 完成後にしょーごさんの表示確認添削付き
- そのままポートフォリオとして利用可能
教材としてのクオリティも素晴らしいんですが、表示確認の添削がついてこの金額はちょっと普通じゃないですｗ
ポートフォリオとしての利用もOKなので、今後営業をしていく時にも無駄になりません。
あとは格安とはいえ有料カンプなので、他の人のポートフォリオと被りにくいのも大きなメリットですね。
※2023年4月3日追記
しょーごさん中級課題がリニューアルされました！
元々あった中級課題に加えて、農園サイトのデザインカンプを選べるようになっています。
今から中級課題に取り組まれる場合は農園サイトの方が推奨となります！
ちなみに、ここまでご紹介したしょーごさんのカンプなどは、上級のWordPress編を含めてまとめ買いが可能です。
ここまで進んだ方なら遅かれ早かれWordPressまでやると思いますので、まとめ買いしておいた方がお得かと思います。
しめじここまで進めた方は、間違いなく実務レベルのサイトを作るスキルを身につけています！あともう一息ですよ！
模擬案件を一度体験してみる
ここまでの学習で、すでに実務レベルのサイトをググりながら作れるようになっているはずです。
ただ、ここで問題になるのが、サイトを作れると実務で求められる仕事のレベルは違うということ。
実際、「これで大丈夫かな…」「自信がない…」と不安に思っていませんか？
そんな方におすすめしたいのが、メンター経験も豊富なコーダーひろきさんの以下のサービス。
一言で言えば、制作会社の実務を擬似体験しながら、実務レベルで求められる知識やスキルを学べるサービスです。
納品までに必要なスキル感や注意点などを実践形式で学べる上、コードレビュー含めたフィードバックをしてもらえます。
その上コミュニティは無期限で、わからない技術面の相談も可能。
「不安に思いながら仕事するよりも自信を持って働きたい！」という方は、このタイミングで受講しておきましょう。
しめじ個人的にもイチオシのサービスです！自信を持つためにも、何がより実務に即したコーディングなのかを学びましょう。
6. WordPressを使ったサイト制作の学習をする
いよいよここまで来ましたね。あなたは現時点で「一般的な制作会社からコーディングの仕事を受けられる程度のスキル」は身に付けてます。
が！現代のWeb業界で営業したいなら、WordPressの学習は外せません。
今の時代、未経験から営業している他のライバルは当たり前にWordPressまでやっています。つまり、やってないとスキルの時点で蹴落とされるってことです。
世の中では「WordPressできなくても大丈夫！」という人もいますが、そういう人はたぶんWeb制作業界の未経験営業のリアルを知りません。
1ヶ月そこそこで優位に立てる部分なので、よほど急いでない限りはやっておきましょう。
ここでのゴールは、「WordPressテーマ化が一通りできるようになる」こと。
そして、営業に使うポートフォリオとなるサイトもここで作っていきます。
これが最後です。以下の3ステップで進めていきましょう。
- PHPの基礎を理解する
- WordPressテーマ化の方法を学習する
- WordPressサイトをポートフォリオとして作成する
PHPの基礎を理解する
まずはWordPressの前提となるPHPの基礎を理解しましょう。とはいえ、PHPもさほど深く学習する必要はありません。
というのも、WordPressはPHPをベースとしていますが、実際に触る機能の多くはWordPress独自の機能を使うケースが多いから。
もちろん深く知っていて損はないんですが、今やるとほぼ間違いなく沼にハマります。最初は基本さえ押さえておけば仕事にはなるので、ここでは基礎の理解までに留めておきましょう。
基礎を理解するだけなら、Progateの「PHPⅠ」を終えておけばひとまずは十分です。
ひとまずは1周やれば十分です。まだ覚える必要はないので、ひとまず「こういうことができるんだ」くらいの理解で進めていきましょう。
詳しい使い方とかについては、WordPressの学習で学ぶことになります。
しめじPHPもJavaScriptとかと同じで、下手に学びすぎると沼にハマります。まずは理解を意識して次に進めていきましょう。
WordPressテーマ化の方法を学習する
PHPの基礎を学んだら、いよいよWordPressの学習に入っていきましょう。
ここが終われば、いよいよポートフォリオを作って営業に入ることができるようになります。
WordPressを学ぶのにおすすめの教材は、以下の教材ですね。
こちらの教材は有料ですが、他の教材と比べてもブッチギリで分かりやすいです。繰り返しですが、ブッチギリです。
他にも安価でWordPress学習できる教材はあるんですが、正直分かりやすさのレベルが違います。
結構ボリュームがあるように見えると思いますが、1本1本は短いものも多いので、サクサク学んでいきましょう。
WordPress学習は今までの学習と比べても少し異質です。
理解すらできない場面も少なくありません。
実際、ここで心折れそうになる人はかなり多いです。
ぶっちゃけ僕も「わけ分からん…」と思ってたくらいです。
なので、難しいときは完璧すぎる理解を求めないようにしましょう。
まずはWordPressの仕組みとWordPress化の手順を掴むことを重視して進めてください。
あともう1つ、マジで重要なんですが手を動かしながらやりましょう。
ただボーッと動画を見ていると全然身になりません。
コードを書くところでは一緒にコードを書く。
理解するところでは70％くらいの理解を意識する。
こんな感じでしっかり1周終わらせてみてください。
後でも復習はできるので、2周も3周もやらずに次に進めていきましょう。
しめじここが山場です！かなり理解に苦しむところが多くなりますが、焦らず終わらせていきましょう！だんだん理解できるようになってきます。
WordPressサイトをポートフォリオとして作成する
いよいよラストです！自分のスキル感を証明するポートフォリオを作っていきましょう！
ポートフォリオ用のサイトはぶっちゃけ何でも良いです。が、スキル感を見せる必要があるので、以下のような条件に当てはまるものをポートフォリオとしましょう。
- ある程度のページ数のサイトであること
- できればコーポレートサイトであること
- 実務レベルのデザインをコーディングしていること
- 実務でよく出てくるJavaScript / jQueryの実装があること
- よくあるWordPressテーマ化の実装をしていること
制作会社にしろエンド営業にしろ、この辺を満たしているとスキル感を見せやすいです。
ポートフォリオ用のサイトを作るのによく使われているのは、以下のような教材ですね。
このロードマップを進めている方であれば、しょーごさん上級やCodeUpsをすでに購入されている方も多いでしょう。
その場合は、どちらかをポートフォリオ用にコーディング・WordPress化すると良いですね。
ちなみにこの3つがポートフォリオとしておすすめの理由は、水準を満たした上で見た目の添削がついているからです。他に似たサービスなどがあればそちらでもOKです。
補足ですが、理想を言えばポートフォリオ用のサイトは「あなたオリジナルのサイト」であることが好ましいです。
というのは、他の人とサイトが被らないからですね。営業においては、他の人と被らないだけでも十分強かったりします。
なので、もし条件を満たすデザインカンプが作れる・手に入る状況なのであれば、そちらをWordPress化するのがベストと覚えておきましょう。
ただし、オリジナルのサイトにこだわったがばかりに変にスピードが落ちてしまうくらいなら、上記のおすすめ教材から選んだ方が無難です。営業さえしっかりやれば、それでも十分仕事にはなります。
しめじ最後のアドバイスです。ポートフォリオ用のサイトを作るときは、制作時間も計っておきましょう！どのくらいのスピードで作れるかを知っておくと、納期が怖くなくなります。
まとめ
ここまで本当にお疲れ様でした。
正直読むだけでも大変なレベルですが、実際に学習を進めた方は本当に大変だったかと思います。
ただ、ここまでこなした方は自信を持ってください。間違いなく制作会社に営業できるだけのコーディングスキルが身についています。
- HTML
- CSS
- Sass
- jQuery
- WordPress
- 効率的な学習能力
- カンプからのサイト制作力
- 実務レベルのサイト制作力
- 分からないことを解決するググり力
これらのスキルを駆使すれば、案件をこなすことも難しくはありません。
一般的なコーポレートサイト制作やWordPress化、ページ作成の案件は既にこなせるはずなので、自信を持って営業していきましょう。
営業の方法やポイントを知りたい時は、以下の記事を参考にしてみてください。必ずあなたの助けになると思います。
