見出し画像

サイト模写に苦戦中!

前回と前々回にお伝えした動画を観て、サイト模写に挑戦し始めました。
正直にお伝えしますが、サイト模写に挑戦しようと決めてから既に3週間が過ぎてしまいましたが、まだ1サイトも模写が完成しておらず、かなり苦戦しています。

毎日、通勤電車の中でサイト模写の妄想をしながら、基本的に週末にコードを実際に書いてみる、といった日々を過ごしてきましたが、カタツムリのごとく、悲しいかな、なかなか前に進めることができません。

まず最初に、文字や画像を反映してみたところ、思っていたよりも簡単に表示され、その後、色を変えたり、文字や画像の大きさを変えたりと、小さな感動を覚えながらHTMLやCSSのコードを書きかえてみました。

あまりにも簡単にできたので「これは、ひょっとすると簡単にサイト模写はできるかも・・・」と期待を膨らませて、いざ模写をスタート。

視聴していた動画内ではサイト模写の対象として、その動画を運営している会社のWebトップページ(ファーストビュー)を模写しよう!という内容になっていましたので、初めてのサイト模写として自分もそのサイトでトライし始めました。

ところが、いざ模写しようとしたところ、いきなり思考が止まってしまいました。というのも、ページ全体を模写しようとすると、「いったいページ内のどこから手をつけていいのか」、「全体の枠組みはどう組み立ててればいいのか」がわからず、いきなり立ち止まってしまいました。

そして、仮にその枠組みの作り方がわかったとしても、「その枠の中で縦並びや横並びにするには具体的にどうすればいいのか」も混乱してしまいました。

動画の中では並べ方を設定するFlexboxが紹介されていたので、これを使えばいいということは頭の中ではわかったつもりでした。また、配置を決める際には、相対位置と絶対位置という概念があることもわかったつもりでした。しかし、この「わかったつもり」は全くあてにならず、いざ手を動かしてみると何も手が進まないことに愕然としてしまいました。

こんな感じで一歩進めるために相当のネット検索と試行錯誤を繰り返すこととなっているため、たった1ページのサイトなのに、まだ模写できていません。

そうこうしているうちに、サイト模写の対象にしていたサイトが模様替えされてしまい、サイトのデザインがまったく変わってしまいました。

これは、かなりショックでした。模写完成後には、そのサイトのコードをみて答え合わせをしようと思っていたのですから。

途方に暮れ、どうしようと思いながら、他の人たちはどうやってサイト模写をしているのだろうとネット検索してみたところ、サイト模写に関わるいろんな情報がでてきました。

検索結果の中には、サイト模写する方法やサイト模写用の固定サイトなどがいくつか用意されているものもありました。初心者から中級、上級への難易度が異なるものも用意されていました。

もっと早くサイト模写について検索してみればよかった。。。

気を取り直して・・・
こういったサイトも参考にしつつ、サイト模写に引き続きトライしていきたいと思っています。まずは、単純な構成になっているサイト一つ模写したいと思っています。






この記事が気に入ったらサポートをしてみませんか?