- 未経験者
- 学習を始めたての人
- 独学で学んでいる人
- 挫折してしまった人
Web制作を独学で学ぶ人のためにHTML・CSSを実務で通用するレベルで学習していきます。
それでは早速始めていきます。
今回のテーマは、「コーディングのやり方」です。
実際にデザインができて、コーディング段階になった時、
どうやってコーディングをしたらいいのかがわからなくなります。
そういったことにならないように、
こういう風にコーディングを進めていけばうまくいくというやり方をお伝えします。
デザインは部品(パーツ)が集まったものという考えを持つとやりやすいです。
大枠や外側から作るのではなく、
部品(パーツ)から作るようにしましょう。
デザインをみて共通部品を見つけましょう。
ボタン、リスト、見出し、パンくずリスト等、沢山見つかると思います。
それらを使いまわせるようにしてください。
同じボタンが10個使われているとして、使いまわせればその分時間が短縮できます。
最初は意外と気づきにくいのですが、
ここは訓練のところなので、たくさん練習や経験を積んで慣れていきましょう。
コンテンツの横幅の余白(inner幅)等も気づきにくい共通部品です。
次に、共通部品から作っていきましょう。
デザインを見て上からゴリゴリとコーディングしてもいいのですが、
先に共通部品(パーツ)を作っておくと使いまわせるのですごく楽にできます。
共通部品が作り終わったら、部品（パーツ）を作っていきましょう。
デザインを見て上から進めていきましょう。
例えば、ヘッダーのグローバルナビゲーションを作成するとします。
ヘッダーのグローバルナビゲーション自体は他のページで使いまわせる共通部品の可能性がありますが、ヘッダーのグローバルナビゲーションは部品（パーツ）の集まりでできています。
そういった部品（パーツ）を先に作ってしまえば、
あとは組み立てるだけで出来上がります。
とても効率が良くて簡単です。
部品(パーツ)を作ったら組み合わせていきましょう。
余白はこの段階で調整します。
そうすると一番無駄なくできます。
- 部品(パーツ)として捉える
- 部品(パーツ)を作って組み立てる
これらを意識すれば、早くて効率が良くて簡単にコーディングができると思います。
ぜひ意識していきましょう。