コーディングの練習方法と流れ
HTMLやCSSを少し勉強してみたけど、これらを使ってコーディングを勉強する方法ってどうやればいいの？というところについて書いてみます。
簡単なワイヤーフレームを使って練習する
コーディングの実力を身につけていくには、Webページのコーディングを練習する必要があります。ただ、コーディング初心者が既存サイトのコーディングをしようと思っても難しくて途中で止まると思います。まずはすごく簡単なWebページとしてワイヤーフレームを元にコーディングしていくことを考えてみましょう。
今回はこんなワイヤーフレームを作ってみました。
HTMLタグとクラス名を紙に書いていく
このワイヤーフレームを元にコーディングをしていくのですが、いきなりPCを使ってコーディングするのは個人的にお勧めしていません。慣れている人であればデザインデータを見てどのようにコーディングしていくか分かるようになりますが、勉強を始めたばかりだとこのあたりから詰まる人が増えてきます。
そのため、まずはどのようなHTMLのタグを使うのか、CSSを充てていくのかを考えるためにデザインデータを紙に印刷して書き込んでいく練習をしていきます。
HTMLのタグであればこのような感じでマークアップできるのではないかと思います。※今回は読みやすく手書きではなく文字に色をつけました。
続けてCSSを設定するためにclass名をつけていきます。最近のCSSはclass属性を使ってどのような意味合いでCSSを設定するのか、一定のルールに基づいて名称をつけていくことが基本となっています。命名規則についてはBEMが人気なのでBEMを使ってclass名を紙に書いていきましょう。
BEMが分からない人はこのあたりの最初の部分を参考にするといいと思います。
CSSはこんな感じでしょうか。※今回は読みやすく手書きではなく文字に色をつけました。
マークアップしていく
紙に書いたタグを元にHTMLでマークアップしていきます。今回の練習用データは大雑把に作っているので、画像や文章などの足りない部分はダミーデータで補っておきます。ダミー画像を用意するには下記サイトが便利です。
マークアップは1ページを一気に記述していった方が全体の構成を見通せると思います。また、開始タグと終了タグの位置を合わせるためインデント（字下げ）は正しく記述していきましょう。また、閉じタグにはわかりやすいようにコメントを書いておきます。
どんなタグで囲えばいいのか迷ったときは下記サイトなどで調べて該当するタグで囲っていきます。
ソースコード一部抜粋したもの（画像）を挙げておきます。
HTML文章をチェックする
文章のマークアップができたら、マークアップがHTML文章として正しいかチェックしましょう。見た目に問題がなくても構造的におかしい場合があるのでチェックは基本です。チェックするサイトは下記が有名ですね。
CSSを設定していく
マークアップ時につけていったclass名を元にCSSを設定していきます。CSSのプロパティも上記で紹介したサイトから調べることができます。
CSSについては見た目を同じようにしていくのですが、同じ見た目でも作る方法が違うものがあり設定していくのは大変な部分になってきます。ここまで進むと自分で試行錯誤していく必要があります。上手くいかなくてもそれが普通だと割り切って色々な方法を試してみましょう。
CSSの記述もインデントを忘れないようにしてください。
CSSのチェックも行う
HTML同様、CSSの設定も終わったら記述ミスなどがないか下記サイトでチェックしておきます。
ソースコード一部抜粋したもの（画像）を挙げておきます。
ブラウザチェックを行う
コーディングが完成したらブラウザでの動作確認をします。Chrome,Firefox,Edge,Safariなどの主要ブラウザのチェックは必須です。今回はスマホについてスルーしていますが、実際にはスマホ用にデザインデータを元にCSSの設定を行い、実機での確認をすることになります。
とにかく数をこなす
すごく泥臭い結論になりますが、コーディングも量をこなしていくと作業速度が上がり、デザインを見て組み方が分かるようになってきます。慣れてきた人は実際に公開されているサイトなどを模写していくとさらに地力が高まっていきます。
この記事が気に入ったらサポートをしてみませんか？