コーディングを学ぼうと思っている方から出る質問で多いものの一つに、何から勉強していいのかわからないというものがあります。
また、似たような質問でどういう風に勉強すればいいのかわからないという声もよく聞きます。
実際は、あまりそういったことは気にせずに、自分がこうだと思ったことをやって行けばおのずと上達して行くものですが、できれば効率よく学びたいと思うのが人情だと思います。
そこで、僕がこれまで教えてきた経験から、こういう順番で学ぶのが効率化がいいのではないかという勉強方法を考えてみました。
【ステップ-0】最初は何をすればいいか？
とにかく何もやったことがないという人は、楽しそうな書籍やWEBサイトなど、ご自身のモチベーションがあがるものをみつけて、それを実践してみるのがいいでしょう。
まずはコーディングの概念や、コードを書くということに慣れ親しむのが大切だと思います。
ただ、この時に注意して欲しいのは、初心者向けの教材には嘘が多いということです。
これは批判や悪いことという訳ではなく、初心者が理解できる範囲・レベル感で教える場合、多少の嘘を織り交ぜた方が効率が良いからです。
もちろん教材によっては意図的な嘘ではなく、教える力/知識が足りなくて間違った情報が載っている場合もありますが、それを見分けるのは難しいと思うので、とりあえずはすべてが正しい情報ではないかもしれないということを念頭に置きながら、勉強するといいと思います。
そして、HTMLとCSSを書いてブラウザで表示できるようになったら次のステップに進みます。
※一つの教材だけを信じるのではなく、必ず複数の教材を確認する癖をつけましょう
※当ブログもそこそこの嘘を混ぜていることがあります
【ステップ-1】マークアップの意義を学ぶ
どんな教材かにもよりますが、「基礎レッスン」的なことが終わり、HTMLとCSSを少し書けるようになったくらいでストップし、次はマークアップをすることの大切さを学びましょう。
- なぜマークアップをするのか？
- なぜ全部divじゃだめなのか？
- 正しいマークアップとは？
- マークアップが正しくないと何が起こるのか？
- マークアップとSEOの関係とは？
- セマンティックとは？
- マークアップの重要性
などなど、マークアップ及びこれから学ぼうとしていることの大切さを腹落ちさせましょう。
時には仕様の歴史を学ぶことなどで理解も深まりますし、理解が進むと愛着も沸いてくると思います。
おすすめサイト ⇒ ごく簡単なHTMLの説明
そして、マークアップの重要性や意義が理解できたら次のステップに進みます。
【ステップ-2】HTMLの要素（タグ）・属性を覚える
HMTLの要素はHTML5.2の仕様だと全部で約110～120個くらいあります。
120個も意味と使い方を直ぐに覚えるのはかなり難しいと思います。
暗記が得意な人は覚えてしまってもいいと思いますが、そうでない人は、よく使われる要素から順番に覚えて行くのが望ましいでしょう。
頻出する要素は30個程度ですので、それほど時間はかからないと思います。
- 無所属
- html,head,body,dt,dd,li
- フローのみに属する
- div,dl,footer,header,hr,main,ol,p,ul
- ヘディング
- h1,h2,h3,h4,h5,h6
- セクショニング
- article,aside,nav,section
- フレージング
- b,br,em,small,span,strong,img,video,a,button
- メタデータ
- meta,title,link,noscript,script
※上記は厳密な分け方ではありません
この他には、table要素やform要素などがありますが、包含要素が多いため、登場した時に一緒に覚えてしまった方が効率がよいでしょう。
⇒ 初心者がコーディングを学ぶにあたってオススメのサイトまとめ
また属性については、aタグにはhref属性が、imgタグにはsrc属性が、ほとんどの場合で入るので、そういったものからタグとセットで覚えて行くのがいいでしょう。
属性については、暗記が得意な方でもあまり暗記をするのはお勧めしません。
一旦、どんな種類のタグが存在するのかと、その要素に必ずつくであろう属性をうっすらと理解したら次のステップに進みます。
【ステップ-3】ブロックレベル要素的な表現の要素とインライン要素的な表現の要素を覚える
HTML5では、ブロックレベル要素とインライン要素という分類はなくなってしまいましたが、CSSでレイアウトする際のボックスモデルの概念を理解するのにこの分類はとても大切なものとなります。
ブロックレベル要素は、常に新しい行から始まり、可能な限り横幅一杯に広がろうとします。
インライン要素は、新しい行からは始まらず、包含する要素の幅と一致します。
- ブロックレベル要素
- h1,p,ul・・・など
- インライン要素
- a,img,em・・・など
これらのボックスモデルと呼ばれる概念はとても重要なので、別記事にまとめています。
【ステップ-4】なんらかのサンプルをマークアップしてみる
自分で作ってみたいものがあればそのページを、なければお気に入りのサイトや、デザインアーカイブサイトに掲載されているようなサイトをマークアップしてみましょう。
あまり多くのページを頑張らず、まずは1ページだけで大丈夫です。
わからない箇所は検索をするなどしつつ、ただし「答え（実際のページソースコード）」は見ないようにしながら、時間をかけてマークアップをします。
なぜそこにこのタグを使ったのかを、自分なりに説明できるように理論を蓄えて行きましょう。
【ステップ-5】自分のコードを有識者にレビュー・添削してもらう
どれだけ頑張ってマークアップしても、それが正しいマークアップなのかは誰かに評価してもらわないとわかりません。
自信がない状態で自分のコードを見せるのは恥ずかしいかもしれませんが、添削してもらえばもらうほど成長して行きますし、生きた教材での勉強となります。
コードだけでなく、自分がよくわからず書いてしまっているところなども併せてレビューしてもらうとよいでしょう。
手前味噌ですが、ココナラというサービスで、HTML+CSSのコードレビューサービスを出品しています。
こうして何度かマークアップとレビューを繰り返し、問題のないHTMLを書けるようになったら次のステップに進みます。
【ステップ-6】CSSのプロパティを覚える
これもHTMLのタグと同じですべてを記憶する必要はありません。
だいたいどんなことが出来るのかを覚えましょう。色をつけたり、線を引いたり、大きさを変えたりすることができます。
まずは、デザインに合わせて文字を大きくしたいと思った際に、「CSS 文字 大きく」と検索できればいいでしょう。
何回も検索しているうちに書き方を覚えるはずです。
また、何回も検索でヒットするお気に入りのサイトをブックマークするのもいいかもしれません。
参考サイトの見やすさや使いやすさは人それぞれですので、自分で見つけてみてください。
【ステップ-7】CSSのセレクタを覚える
CSSのセレクタとプロパティはどちらを先に覚えても構いません。
CSSのセレクタも全部で約42個あります。
これも最初はすべて覚えるのではなく、基本となる「型セレクタ」「子孫結合子」「クラスセレクタ」「ID セレクタ」の4つのセレクタの使い方をまずは覚えましょう。
プロパティと同じく、「CSS セレクタ 一覧」などで検索すればたくさんのサイトが出てきます。
下記に仕様原文のページを載せておきますが、こちらもお気に入りのサイトを見つけましょう。
【ステップ-8】ボックスモデルの概念を理解する
マークアップが出来てCSSのセレクタとプロパティが扱えるようになれば、基本的にページの制作が可能です。
しかしながら、ボックスモデルの概念を理解しているか否かでは、学びの効率に大きな差がでるでしょう。
別の記事にまとめていますが、ブロックボックスとインラインボックスのイメージができるようになったら次へ進むか、次のステップの際にブロックボックスとインラインボックスについて考えながら実行してみましょう。
【ステップ-9】とにかく自力で再現してみる
デザインを再現するのにCSSの書き方は必ずしも正解がある訳ではありません。
コードの保守性やわかりやすさ、軽さなどを検討した時にベストな状態というのはありますが、必ずその状態でなければいけない訳ではありません。
これがCSSを教えるのが難しい理由の一つでもありますが、とにかくまずは検索してみたりしながら、自分なりに書いてみることが大事です。
この際に、様々なデバイス及びブラウザで問題なく見られるようにするのが大事です。
【ステップ-10】自分のCSSを有識者にレビュー・添削してもらう
前述したように、必ずしも正解がある訳ではありませんが、よりベターな書き方や、スマートな手法など、別の書き方などを教えてもらうことによってスキルの幅が広がります。
ただ正解に近いコードを覚えるだけでなく、自分で書いたコードとの差分を意識しながら、なぜその方がいいのかを考えながら添削内容を理解するのが上達への近道です。
HTMLと同じく添削サービスを出品していますのでご活用ください。
【ステップ-11】単一ページのコーディングを繰り返す
様々なデザインのページをコーディぐしていくと、初めて出てくるレイアウトや、似ているけれど微妙に違う表現、細かいTIPSなど、ページによって様々な学びを得られます。
これが一般的な教材・座学では身につけられない訓練となります。
かなり独学となりますが、書いたコードをその都度レビューしてくれる人がいればあっという間に一定レベルに達するでしょう。
【ステップ-12】複数ページからなるサイトをコーディングする
これは題材を用意するのが難しいと思います。
自分の作りたいサイトがあればいいですが、なければ自分の好きな会社のコーポレートサイトや、ドラマやアニメのサイトなど、10ページ程度のサイトを選ぶといいです。
マークアップの練習の時と同じように「答え（実際のページソースコード）」は見ないようにしながら、デザインだけを見て再現してみましょう。
このステップでは、複数ページのサイトのCSSをどのように書くのがいいかを学びます。
保守性が高く、使いまわしのできるCSSを書けるようになるための訓練になります。
【ステップ-13】付随知識を学ぶ
前ステップまでができれば、とりあえず問題のないコードでデザインを再現することが出来るようになると思います。
しかしながら実際のサイトでは「SEOに関すること」「JavaScript」「ページの表示速度」「多様デバイスへの対応」など、細々と対応しなければならないことが多く存在ます。
どれもサイトの制作要件によって必要かどうかは変わってくるものなので都度学んで行くことになりますが、ここまで学んできたように、トライ＆エラーを繰り返したり、検索して情報を見つけ出したり、有識者に正しい情報を教えてもらったりという行動が癖になっていれば、それほど大変なことではないでしょう。
ここまで来れば、後は出会った課題を一つずつクリアしていくだけとなるでしょう。
まとめ
もちろん、十人十色の性格や事情があるので、この通りにやってもうまく行かない場合や、とにかく実践でコードを書いた方が成長する人もいると思います。
ですので、この通りやったら絶対に習得できるということではなく、何から手をつけていいかわからないと思っている方の参考になればと思います。
おそらく何冊も教材を買ってきては、何度も基本のコードを書いたりするよりも効率的だとは思いますし、圧倒的に非効率ということもないかと思いますので、参考にしてみてください。