サイト模写に挫折したときの対策【HTMLとCSS】

CSS

HTML、CSSでコーディングしてサイト模写をやってみたけど、全然進まないなあ。認めたくないけど、ぶっちゃけ挫折かも。と思ったときの対策をご紹介します。

この記事は、実際に試してこれは効果がありそうだと実感した対策をご紹介することで、サイト模写をやってみたものの、進まないので、こりゃ挫折かなと感じた方はもちろん、これからサイト模写をやってみる方にも参考になると思います。

ボクも実は、サイト模写を途中で放置して、挫折しました。

ツイッターとかを見ていると、サイト模写を短期で完成させたひとが注目を浴びますね。それに比べてボクは・・・と焦りました。

サイト模写をはじめてやるときは、最初はとりあえずやってみるしかないのでやってみるけど、はじめてだと、ヘッダーだけでもとても時間がかかったりします。

つまづいた箇所があったりすると、さらに時間がかかり、時間を消費します。ここまでは、はじめてなので誰でも経験し得ることで想定内です。

この先、どう行動するかが分かれ目です。苦手だなーで終わって作りかけの状態でサイト模写をやめて、コーディング自体から遠ざかるか、対策をしてコツコツとレベルアップしていくかですね。

それでは、サイト模写に挫折したときの対策をみていきましょう。

サイト模写のやり方にフォーカスして見直す

サイト模写のやり方にフォーカスして見直す

サイト模写に挫折したら、まずは、やり方を見直ししてみましょう。とりあえず頑張って永遠にググったり、コードをひたすらいじったりしがちです。そんなときは、そもそもこのやり方でいいのか?という視点を持って、サイト模写のやり方にフォーカスしてみましょう。

そして、サイト模写をやる前に、どんなやり方で進めるかを事前に決めておきます。ボクが実際にやって効果的だと実感したのは下記の対策です。

パーツ毎に攻略するイメージでサイト模写に取り組む

サイト模写するとき、パーツ単位で攻略する意識を持つことが大切です。

例えば、ヘッダーの中の要素を上下方向に対してど真ん中に揃える方法、ヘッダーの中に配置している要素を横並びする方法、セクションだと、背景画像を配置する方法というように。

ぶっちゃけ、サイト模写で挫折するのって、頭の痛い話ですが、レベル不足な状態で進めることが主な原因です。正直、基礎にまた戻りたくない!と思いますが、復習しちゃいましょう。

やり方としては、サイト模写でつまづいたパーツに関連する基礎を参考書やサイトなどで重点的に復習し、それでもうまくいかなかったら、ググって補完します。そして、つまづいた箇所を解決します。

例えば、背景画像の位置がお手本通りにうまくいかなかったり、苦手だなあと思う場合は、backgroundプロパティについての基礎を参考書などで復習します。それから、さらにググって疑問点を補完、解決し、お手本サイトの背景画像というパーツを攻略するイメージです。

パーツを攻略する際は、メモやノートをとったり、コードにコメントを書いておくなどして、ノウハウ化しておくことがオススメです。

はじめからまんべんなく復習することもサブで進める

サイト模写の段階にきたんだし、分かっていることはもう復習しなくていいでしょ。と考えてしまいますが、すでに学習した参考書などを、はじめからサクッと復習を進めていくこともオススメです。

学習して時間が経つと、コーディングする上で大切なことを意外と忘れてしまっていたり、知識の穴があったりします。

復習することで、おっ、そういえば、これ忘れてたーみたいな感じで印象的になるので、定着が深まります。これはすごく実感しました。

どうしても苦手だと思ったらあえてサイト模写から距離を置いてみる

どうしても苦手でサイト模写に時間がかかりすぎる場合は、あえて距離を置いてみることも良さげです。このとき、何気にHTML、CSSの絡んだジャンルを学習します。

JavaScriptやPHPのフレームワークなどです。イメージとしては、フロントエンドに必要なJavaScriptやPHPのフレームワークをメインに位置付けして学習しつつ、サブの位置付けでサイト模写をコツコツと焦らず攻略していく感じです。

HTMLとCSSをサブに位置付けすることで、無理せずコツコツと積み上げていきます。そうすることで、時間と慣れ、記憶の定着の効果で状況が好転します。

まとめ

サイト模写で挫折したときの対策
  • 無鉄砲に取り組まず、サイト模写のやり方にフォーカスし、進め方を事前に決めておく
  • パーツ毎に攻略する
  • サイト模写の段階になっても基礎を復習する
  • あえてサイト模写から距離を置いて、他のフロントエンドの学習を重点的に進める

繰り返しとなりますが、サイト模写は誰でも挫折します。それは想定内で、その後の対策、行動が分かれ道になります。大変ですが、頑張ってレベルアップしていきましょう!

コメント

タイトルとURLをコピーしました