Webサイト模写【Progate編】
Webサイトの模写【Progate編】
こんにちは、キョウヘイです。
Progateが終わって、実際にWebサイトの模写をしようと思った時に、どのWebサイトを模写したらいいのか分かりませんよね。
この記事では、Progateでの学習が終わったあとで何をしたらいいのか分からない人の為に、僕が実際に模写した過程をご紹介します。
模写したWebページ
実際に模写したWebページはこちらです。
Progateの有料プラン紹介のページです。
そうです、またしてもProgateですね。
どれだけProgateにお世話になるんだって感じですが、このWebページ簡単そうだと思いませんか？
まずはHTMLの全体像だけコーディング
初心者がやりがちなのは、セクション毎にCSSまで整えてから次のコーディングに移るということをやりがち。
ですが、それでは「ここのカラーどうなってんの？」「要素の大きさは？」「paddingとmarginがこうなっていて…」となかなか次に進めません。
そこでおすすめの方法は、まずCSSは完全無視してHTMLの大枠だけ先に書いてしまうということです。
もちろん、すぐにコーディングできそうな部分はCSSまで書いてしまってOKですが、先に構造だけ書いてしまうことをおすすめします。
HTML構造だけコーディング完了
とりあえずパパッとHTML構造だけコーディングしてみました。
Resultでは見にくいかもしれませんので、気になる人はコードをコピペしてブラウザで確認してみてください。
今回はコーディングにBootstrapを使用しています。
メニューの部分はクリックで各セクションにとぶようにしています。
ロゴの部分はソースが分からなかったので、にんじゃわんこのアイコンで代用してあります。
では、ここからCSSを整えていきます。
CSSをコーディング
さて、CSSのコーディングまで完了しました。
下記にコーディングが完了したページを載せてみましたので、パパッと確認してみてください。
細かい部分は完璧に模写できていませんが、大まかな見た目はほとんど同じに見えませんか？
今回はスマホサイズの画面など細かいレスポンシブのページまでCSSのコーディングはしていないので、表示サイズを変えるとレイアウトがあまり綺麗にならない部分もでてきます。
ここで僕が伝えたいのは、初心者でもこれくらいのページなら作れるんだ！ということです。
もちろん、文字の動きや細かいレスポンシブのデザイン変更など修正すべき箇所は多々あります。
最初からページに動きをつけたり、レスポンシブの細かな変化などを実装していくには苦労すると思うので、初心者の人はまず見た目をある程度真似できるレベルを目指すのがいいと思います。
完璧を目指してコーディングしていくと、なかなか先に進まないですし、ひとつのページを完成させるまでに多大な時間を費やすことになります。
余白の付け方や画像の位置などパーフェクトに真似する必要はありません。
5〜6割くらい真似できたな、くらいの完成度で数をこなすことが大切です。
上記に実際に書いたコードを載せておきますね。
サイトを模写するときは検証で確認しながらの作業になりますが、完成されたページを理解するのは少々難しいですよね。
ただ模写したコードを模写するのであれば、上記のように解答がありますので迷った時はカンニングして理解していきましょう。時短にもなります。
分からない箇所はググって調べることも大切ですが、分からなくて挫折するくらいならもっと簡単なことから始めるべきだと思い、この記事を書きました。
コーディングはHTML全体像を先に書き、後からCSSで見た目を整える
完璧な模写は目指さない（5~6割の出来栄えでOK）
初心者でも、それなりのページは必ず作れる！
僕の書いたコードはめちゃくちゃ汚いです（笑）
自分で書いていてもっと綺麗にまとめられる部分があるなあとか後悔しながらコーディングしました。
僕もまだまだ初心者です。
これからもっと勉強して、その過程などはこのブログで共有していきますので、同じ志をもつ初心者の人は一緒に頑張りましょう！
今回は以上です。最後までお疲れ様でした。