progateのHTMLとCSSを終えて模写コーディングに挑戦。
模写コーディングの手順を記載しています。
模写コーディングとは
今までのprogateでは指定のコードを入力するのがメインでしたが、
実際のサイトをみて同じ様に作成するのが模写コーディングです。
自分でコードを考えて一から作成していく必要があります。
模写コーディングのやり方
実際に模写コーディングをやろうとしても何からやればいいのかわからなかったので、
Codejumpさんを参考にさせていただきました。
手順① ルールを決める
緩めのルールを設定して、慣れてきたら細かい部分も合わせる様にしていきます。
ディベロッパーツールで細かく調べる必要があるフォントや余白はアバウトにする。
ブレークポイントは合わせてレスポンシブデザインを作成する。
コードは見ずに自分でコードを考える。
手順② サイトの動きを確認する
サイトの細かい部分を見て動作を合わせます。
リンクが設定されていないか？どこに飛ぶ様に設定されているか？
マウスを合わせたときの挙動や色はどのように設定されているか？
画面サイズによってどのように変化するか？
など、表面上見ただけではわからない部分を確認していきます。
手順③ レイアウト構成を考える
コーディングするためのレイアウト構成を考えます。
後ほど見ながら作成することでイメージしやすくなるのでメモすることを推奨します。
まずheaderやmainなど大きく全体を構成するブロックを考え、
その後に各ブロックの中を細かく構成していきます。
レイアウト構成を整えることで共通部分を含めたブロックのコーディングが楽になります。
手順④ 全体部分のコーディングをする
まずは全体を構成するブロックからコーディングしていきます。
HTML
HTMLでやることは主に２つあります。
- headを含めた全体に適用させるコードの記述。DOCTYPE宣言やcssの読み込みなど。
- bodyの中にheaderやmain、footerなど構成を考えたレイアウトを作成する。
CSS
CSSは全体に適用させるコードを記述します。
bodyやimg、*を使用してコーディングしていきます。
このタイミングで幅や高さなどを設定してレイアウトを整えます。
そのため各ブロックの名前が決まっていると、共通で適用させることも簡単です。
手順⑤ ブロックの中のコーディングをする
全体のコーディングが完了したら、各ブロックの中のコーディングをしていきます。
headerのような上にあるブロックから作成していきます。
この手順が一番時間がかかります。
手順④までがしっかりできていないと思った様に表示されず、
結局手順④まで戻って修正したりすることが多々あります。
レスポンシブの設定は各ブロック毎に行うと、レイアウトが崩れた際の原因特定がしやすくなります。
コーディング完了
以上の手順で模写コーディングをやってみました。
初めてのコーディングは、4時間以上かかっても全然完成しませんでした。
それどころかソースコードを見ても「これどうなってるの？」という状態です。
もちろん使ったことがないコードもあるのですが、
今まで自分がやってきたことが全く活かせていないと感じてしまいました。
模写コーディングは習慣化が大事なようなので、引き続き毎日取り組んでいきます。
コメント