HTMLとCSSを使って模写する上で大切なこと【後悔しないために】

HTMLとCSS、Bootstrapなどを使ってお手本サイトの模写を進めたいけど、ツイッターを眺めていると、みんな苦戦しているなあ。本で調べたりググりつつ、とにかく根性で時間をかけて進めるしかないのかなあ。なんか行き当たりばったりすぎる気もするなあ。実際のところサイト模写をやってみて浮き彫りになった問題点とか知りたいなあ。という疑問にお答えします。

ボクはプログラミング学習を2018年からはじめて1年くらい。

HTML、CSSを使ったウェブサイト制作の受注に向けて頑張っています。

その流れで、サイト模写を１ヶ月以上やってみた感想と、もっとこうやっておけば良かったなあ。と後悔したことと改善策をご紹介します。

この記事を読むことで、

1.サイト模写をやってみた感想と浮かんだ問題点

2.サイト模写の改善策

が分かります。

それでは、順にみていきましょう。

サイト模写をやってみた感想と浮かんだ問題点

サイト模写をやってみて感じたことは、勉強したつもりでもいざ自分で作るとなると、全然想い通りにできないと思いました。

HTMLの構造にずっと自信がない

サイトの見た目は再現できても、HTML構造が多分めちゃくちゃです。

とりあえず見た目だけは再現できるので、気になりつつも、そのまま模写を続けていました。

ツイッターで見かける優秀なひとの模写のスピードを見て焦る

ひとは人、自分は自分と分かっていても、やっぱり劣等感を持ってなぜか負けた気になりました。

CSSがごちゃごちゃする

CSSの書き方にしても、どんどん書いていくうちに、ごちゃごちゃして、訳がわからなくなってきました。

すでにあたっているので書かなくても良いCSSをダブって書いていたりもしました。

JavaScript、jQueryの動きを再現するのに苦戦する

jqueryを使って動きを再現するのに苦戦しました。

似たような動きになっても、微妙にガタついていたり、細かい部分で同じにならないことにかなりストレスを感じました。

レスポンシブ化に苦戦する

レスポンシブ化にもかなり苦戦しました。

ちなみにボクはBootstrapを使わずにレスポンシブを進めました。これが一番苦戦したかもしれないです。

模写に膨大な時間がかかって他のことができなくなり焦る

サイト模写をやりだすと、他のプログラミング学習に時間を取れなくなり、とても焦ります。

サイト模写は30分などの短い作業時間だと、ほぼ何も進まず終わったりしますので、自然と、少なくとも1回あたり最低でも１時間は確保するようになります。

となると、他の学習時間があまり取れなくなるし、そもそも疲れるので、学習に手が回らなくなります。

せっかく頑張って作ったコードを忘れる

模写を進めていると、見た目を再現するために頑張って書いたコードを忘れてしまいます。

作れた時は、もうこれで大丈夫。次からサクサクス作れるぞーっ。と思ってしまいますが、意外と後になると忘れてしまいます。

書いたコードもなんでこう書いたのかなあみたいにまた考える事態になってしまいがちでした。

こうやって書いてみると、けっこういっぱい問題点が浮かび上がりました。

次は、改善策を見ていきましょう。

サイト模写の改善策

ボクの経験から分かったサイト模写の改善策は、こんな感じなので、良かったら参考にしてみてください。

サイト模写の前に１サイトのコードで勉強する

いきなりサイト模写すると想像以上に全くできないので、ボクの感想では、やめといたほうが良いです。そうでないと、膨大な時間がもったいないです。

ボクも含めてたいていのひとは、progateやドットインストールの超簡単なサイト作りをして、参考書の基本的なサイトを写経後に、サイト模写をはじめると思います。

フリーランスの人の発言とかをみていると、たいていはそんな流れになっています。

でも、実際にやってみると難しすぎます。

いきなり基礎をせずに数学の青チャートの応用問題を解こうとするような感じです。なので挫折につながってしまいます。

ろくに実際のサイトの構造を見もしないで、サイト模写をはじめてもかなり非効率的といえるでしょう。

なので、模写推奨されているお手本サイトを１個選んで、カンニングしてコードで勉強することをオススメします。

どうせ１個のサイトを模写したからといって、それで終わりではなく、何個も模写することになるので、１個はまず勉強用にしちゃいましょう。

数週間かけて１個のサイトの模写をした後に、お手本サイトのコードと見比べてやっと答え合わせなんて、そもそも効率悪いとボクは個人的に思いました。

お手本サイトという実際の優れたサイトのコードを勉強します。例えば、いきなり苦戦するサイトのヘッダー部分の作りのコードを、自分のテンプレとして持っておく感じです。

ヘッダーでよく使われるコードを自分用のテンプレ、パーツとしてどこかに保存しておきましょう。

ヘッダー部分だけ、詳細を書いたノートを作る感じです。そうやって、パーツ毎やセクション毎のコードをどんどんメモなり説明書きをどんどん入れて、自分のものにしちゃいましょう。

HTML構造にしても、かなり勉強になると思います。

お手本サイトのコードをみていくことで、コードの見方やデベロッパーツールの使い方も慣れてきて、実践的な知識が身につきます。

とはいえ、お手本のコードの見方自体もかなり難しいので、それがまた勉強になります。

そうやって、１つのお手本サイトからめちゃ学ぶ。そしてそのお手本サイトを次はまっさらな状態から作ってみる。そうすることで、アウトプットになり、身につきやすいと思います。

いきなりサイト模写をするよりも、このやり方のほうが明らかに良さげじゃないですかね。

結論として、サイト模写の改善策はたった１つ

まず、はじめてやるサイト模写のお手本サイトで勉強する。

そうすることで、ボクが感じた問題点が全て解決されます。