問題
サイト模写はイメージが浮かばなくてできる気がしないよぉ。。
自分には才能ないのかなあ。。
こういった悩みに答えます。
結論から言います。サイト模写はコツさえつかめば簡単ですし才能よりも継続することが大事です。
私自身現在web制作をしており、初期のころはサイト模写を15サイトほどしました。
これから書くサイト模写のやり方を実践すれば誰でもできるようになりますのでぜひ頑張ってみてください。
サイト模写を始める前にやること（基本）
まずはじめに基本ができていなければサイト模写をいきなり完成させることは困難です。
どの程度やるべきか解説します。
『progateの基本コースから道場コースまで』
まずは月額サービスprogateを契約しましょう。
月額！？お金払うの？？？
安心してください、ちゃんとやれば1か月で卒業できるのでかかる費用は1000円のみです。
1000円すら払いたくないよという方はインターネットで調べながらすればなんとかできると思いますが、今回は最短の解説なので無理な方はブラウザバックしてください。
契約ができたらHTML/CSSの基本コースを3周しましょう。
ここで重要なのは完璧に覚えるのではなく、どういったことができるのかを把握することです。
これはできるだけ短期間で反復してください。
次に道場コースをやってみましょう！
かなり難しいと思いますが答えを見ながらでも完成させてみましょう！
よく答えを見て書いても意味がない！と思い込んでいる方がいますが、web制作の現場では答えはインターネット上にたくさんあり、検索をしながら制作していきます。
web制作で大事なのは検索力！これを覚えておきましょう。
デベロッパーツールの使い方を覚える
デベロッパーツール？？
初めて聞く方もいるかもしれませんが模写コーディングをする際に１番大事といっても過言ではないのでしっかり学習しましょう！
デベロッパーツールとはサイトの詳細みたいなものでコードも載っています。
最初はコードがたくさんあって難しく感じると思いますが、すぐになれるので頑張りましょう。
デベロッパーツールの使い方はyoutubeなどに上がっているのでそちらを見ていただければ大丈夫かと思います。
cssの追記方法
既存cssの消し方
この辺をできるようになっておきましょう！
display:flex;
私が初期のころに一番知りたく、今でもよく使っているdisplay:flex;の使い方をマスターしておいてください。
これだけで横並びなどが簡単にできるようになり、レイアウトを組みやすくなります。
progateでも出てきたと思いますが、一度自身で調べるようにすることをお勧めします。
模写コーディングのコツ
ここまでで模写コーディングをするための知識はそろったかと思います。
目安としては道場コースの答えを見て、意味を理解しながら解くことが出来ておけば大丈夫です。
まず、模写コーディングするサイトはwriteです！
それではさっそくコツについて学びましょう！
構造をイメージする（親要素、子要素）
さて、基本もできたしサイトを作ろう！といきなりコーディングをはじめてはいけません。
まずは、サイトを見て構造を考えましょう。
今回はwriteを例に考えていきます。
まず、writeの全体的な構造はheader、main、footerになっており、その中のheaderをさらに分析します。
すると、headerには左側にロゴがあり、真ん中にリスト、右側に検索ボタンがあります。
つまりコードで書くと、
<header>
<div class="header-logo"></div>
<nav class="header-list"></nav>
<div class="search"></div>
</header>
ということです。細かく書くと他にも書くことができるのですが、まずこれをイメージできるかが重要になります。
これをイメージできるとあとはheaderの子要素を基本でやったように横並びにしてあげれば大丈夫です。
こういった感じにコーディングする部分の構造を先に考えて書いていくとどこをコーディングしているのかが明確になり、どんどんコーディングがはかどるようになります。
慣れないうちは、レイアウトを先に考える癖をつけましょう！
完璧は目指すな！８割できればOKです
よくあるのですが最初から完璧を目指そうとして全く前に進まず気づけば諦めてしまうという方がいます。
何事もそうですが、最初から完璧にやるよりも8割できるようになれば少しレベルを上げてチャレンジすることを繰り返したほうが学びは早いです。
模写コーディングに関しては、私よりもスキルのある方たちも８割できれば次に行くことをお勧めしているので間違いないです。
今回のwriteに関しては
日付のフォント
このあたりはできなくてもよいのでそれ以外を完成させましょう！
デベロッパーツールから答えを探す
コーディングをしているとどうしてもわからず検索の仕方もわからない時があります。
検索の仕方がわからない、これは初心者あるあるです。
こういったときにデベロッパーツールを使ってみましょう！
使い方としてはわからない箇所のCSSをみて、プロパティを消してみましょう。
すると、サイト内が変化してどのプロパティを指定するとどう動くのかがわかります。
そしたら原因になりそうなプロパティを検索して解決していきます。
これができるようになると模写コーディングでどんどん学べることが増えていきどんどんスキルアップできるので楽しいですよ！
模写コーディングは1つできれば2つ3つすぐできるようになる話
ここまでで模写コーディングのやり方についてわかったかと思います。
ここから話すのは1つ目で挫折してしまわないよう、1つ目を頑張ればどうなるのかについてお話します。
結論から言うと題名の通り本当に2つ目3つ目がすぐできるようになります。
この辺からどんどん楽しくなってきてコーディングをすることが苦しくなくなると思います。
なぜそうなるのか？
これは、私の考えなのですが1つ完成させることでサイトを作る苦手意識がなくなりますし、困った時にどうすればよいのか論理的思考がある程度身につくからだと思います。
とにかく1つ目を乗り越えると楽しくなるので、ぜひ頑張ってください！！
まとめ
いかがでしたでしょうか。
頑張って書いたのですが読みずらい個所やわからない箇所があればお問い合わせください。
私のライティングの勉強にもなりますので、なんでもお答えします。
たくさん書いたのですが、一つずつ整理してやっていけば最短で2～3週間ほどでできるようになるかと思います。
勉強したことは自分のスキルになり、スキルは絶対に無駄にならないのでぜひ継続して頑張ってみてください！
以上、模写コーディングのやり方についてでした。
