初心者の方に向けて模写コーディングのやり方を紹介する
どうも、こんにちは。
友太郎(@yutarou_sakai)です。
Web制作の学習をする上で、1番の難関かつ成長ポイントである模写コーディングのやり方を紹介します。
Progateやドットインストールで学習していた時とはまた違う頭を使いますので、最初のうちはかなりしんどいかもしれません。
頑張って基礎学習をしてきたのに、まったくできない自分に絶望するかもしれません。
それでも、ここを乗り越えると月5万円は目の前ですので、もうひと踏ん張りがんばりましょう！
模写コーディングのやり方を紹介する
- 手順
- おすすめサイト
- 気を付けること
模写コーディングのやり方を、上記3つのポイントでご紹介します。
それではサクッと見ていきましょう！
手順
- ルールを決める
- ブロックごとに分ける
- HTMLをコーディングする
- CSSをコーディングする
- レスポンシブ対応する
- 最終チェックをする
模写コーディングの手順はざっと上記です。
ルールを決める
まずは、模写コーディングのルールを決めましょう。
- 文字のコピペOK
- フォントは同じ
- 画像は何でもOK
- フォントサイズは同じ
- 完璧よりもやりきることを優先
このあたりのルールが王道かと思います。
フォントサイズを調べたり、カラーを取得するのに便利なchrome拡張機能も紹介しておきます！
>>Whatfont →フォント・フォントサイズを取得する
>>ColorZilla →カラーを取得する
>>Image Downloader →画像を一括ダウンロード
ブロックごとに分ける
サイトを大まかに分けて考えましょう。
だいたいヘッダー・メイン・サイドバー・フッターの4分割できて、画像のようにコードもブロック分けしてコーディングします。
かたまりで分けて考えた方がごちゃごちゃせず、ミスがあっても直しやすいです。
画像のコードは一例ですので、やりやすいようにクラス名とかを付けてくださいm(__)m
HTMLをコーディングする
まずは、HTMLだけざっとコーディングしちゃいましょう。
全部書ききるかブロックごとに分けるかは好みですが、最初はブロックごとに分けて書いた方がやりやすいかもしれません。
とにかく、HTMLで表現する部分はざっと書ききってしまいます。
CSSをコーディングする
お次はCSSでスタイルを適用していきます。
HTMLはスムーズに行っても、CSSでかなり時間がかかると思います。
諦めずにググりまくって進めていきます。
レスポンシブ対応する
CSSがすべて終わったら、タブレット・スマホ用のCSSも書いていきます。
上記のサイトなどを参考にしながら、がんばって進めましょう。
最終チェックをする
最後にミスはないかチェックします。
- スタイルのズレはないか
- 画像にディスクリプションを書いているか
- レスポンシブ化できているか
とりあえず、上記3つのポイントを抑えていればいいかと思います。
本番のつもりでチェックしましょう。
おすすめサイト
上記2サイトできればけっこういい感じかと思います。
とくにiSaraさんのLP(ランディングページ)は、模写コーディングしたサイトをポートフォリオに実績として掲載OKですので絶対にやっておきましょう。
あとは「お、このサイト良さそう！」と思ったら模写コーディングしてみてください！
気を付けること
完璧よりも、まずは終わらせる
模写コーディングの序盤は、完璧を目指さなくてOK。
まずはやりきることを目標にし、完成度は後から上げていけば十分です。
コードの綺麗さも気にしなくていいので、とにかく同じような表現をし、完成を目指して下さい！！
まったく手が進まない時は
「さぁ！やろう！」と意気揚々とはじめても、まったく手が進めないこともあるかと思います。
そんな時は模写コーディングの実況動画がオススメです。
先輩コーダーの進め方を見て、どのようにコーディングしていけばいいかシミュレーションしてみましょう。
ある程度コーディングに慣れたら
模写コーディングをいくつかやって、コーディングに慣れてきたら、より実践に近いコーディングに挑戦してみましょう。
>>ポートフォリオに掲載可能のXDカンプデータを作成しました
実務と同じように、デザインカンプからコーディングができるデータを作成しました。
レベルが3段階あって、最終は当ブログのトップページのデザインデータになっています。
実務に近い練習がしたい方はぜひ挑戦してみてください！
