模写コーディングを完璧にしなくていい理由、どこまで模写するの？

「模写コーディング大変だな」

「模写コーディングで何を学べるんだろう」

「挫折しない方法はないかな」

こういった悩みに答えます。

目次

• 模写コーディングを完璧にしなくていい理由
• どこまで模写するのか？

模写コーディングを完璧にしなくていい理由

模写コーディングは色・大きさ・フォントなどの細かい部分は完璧にしなくていいです。

完璧にしなくていい代わりに模写コーディングではある３つの事を学びましょう。

• Webサイトの構成
• レスポンシブ（デバイス幅に応じて見た目を変化させること）
• progate、ドットインストールなどで学んでいないプロパティ

Webサイトの構成

Webサイト構成の例

1. ヘッダー
2. 　・ロゴ
3. 　・内部リンク
4. ↓
5. メイン
6. 　・画像
7. 　・説明文
8. 　・お問い合わせフォーム
9. ↓
10. フッター
11. 　・内部リンク

こんな風にヘッダー、メイン、フッターの中にも細かい構成があります。

例

<nav class="nav">
 <ul class="nav__inner">
  <li><a href="#1">メニュー</a></li>
  <li><a href="#2">キャンペーン</a></li>
  <li><a href="#3">お問い合わせ</a></li>
 </ul>
</nav>

レスポンシブ（デバイス幅に応じて見た目を変化させること）

様々なデバイスで表示幅が異なっていてもデザインが崩れないサイトを作ることが大切です。

progate、ドットインストールなどで学んでいないプロパティ

模写をしている中でわからないことだったり、忘れてしまったことがあると思います。

そんな時は調べて解決したり、どうしてもわからなかったらカンニングをしてもいいと思います。

どこまで模写するのか？

形とレスポンシブデザインまでを模写するだけでいいと思います。

模写するサイトを決めてパッと見てこれはコーディングできると思った部分は模写しなくていいです。

例

【単純な文、枠の付いた見出し】

逆にパッと見てこれはどうやるんだろうと思った部分は形とレスポンシブを完璧に模写しましょう。

これをすると無駄な作業をせずにインプット、アウトプットが出来るので効率良く、部分的に勉強することができます。

まとめ

模写コーディングを完璧にしなくていい理由、どこまで模写するかについて解説しました。

この記事を観てくれた人が少しでも参考になれたらと思います。

おすすめしている本

他の投稿