>プログラミング【初心者必見】web制作でおすすめの模写サイトを紹介します2021年12月1日Web制作の勉強初めて、Progateやドットインストールの基礎学習は終わったんだけど、その後に何したらいいかわからないおすすめの模写サイトを知りたい今回はこういった疑問について解説していきます。フロントエンドの学習をするにあたって模写サイトについて一度は耳にしたことがあると思います。模写コーディングは初学者にとって非常に有効な学習方法です。おすすめの理由サイトのデザインの作りをコーディングしながら学べるHTMLの構造を深く学習できる。0から制作するのではないためweb制作のヒントを効率よく吸収できるこのような利点が模写サイトのコーディングにはあります。今回は模写に向いているおすすめのサイトを解説していきます。自分のレベルに合わせてサイトを選ぶサイトを選ぶ時に気をつけることとしては現在の自分のスキルより少し難易度の高いサイトを選択することです。簡単すぎると、いつまでもそこに安住してしまい学習効率が下がります。逆に難しすぎると理解ができないままコードだけを写してできた気になってしまうリスクがあります。どちらも知らず知らずのうちに陥ってしまうことがあるので注意て必要です。具体的に自分のレベルを判断する基準をいくつがご紹介します。レスポンシブデザインのコーディングができるかどうか2カラム以上のレイアウトをコーディングできるか画像や文字に動きをつけることができるかCSSやJavaScriptのライブラリを使用したサイト制作ができるかこのようなものが挙げられます。実際にコーディングができずとも「こうやればサイトが作れるのか」という理解ができていれば問題ありません。レスポンシブに対応させるならメディアクエリという記述方法があったり、2カラムレイアウトにする場合、flexboxというCSSのプロパティを使用したりします。した土台の知識がある状態で模写コーディングができると効率的に学習可能です。ここの土台がない状態でコーディングをすると、ただ答えを移すだけの作業になってしまうので学習効率が下がってしまいます。自分のレベルをまずは見極め、それにあったサイト選定をしていきましょう。初学者におすすめな模写サイトCodestepiSara僕がおすすめする模写サイトは結論この2つです。Stepさんは入門から上級までレベルに合わせた模写サイト用のデモサイトを提供してくれています。このサイトにあるデモサイトをひたすら練習していけばほとんどのWebサイトを制作することができると言っても過言ではありません。基本的なレイアウトのサイトから、複数カラム、グリッドレイアウト、JavaScriptを実装したサイトなど、様々なサイトを作ることができます。ソースコードも展開されているためとてもわかりやすく学習ができます。2つ目のiSaraさんは今やweb制作初学者の登竜門となっているような存在です(※あくまで筆者の主観です。)今まで学習した知識をフル動員させて完成させるようなサイトの作りになっています。このサイトの作りは他のサイトの作りに通ずるところが多数あるので模写コーディング練習にはうってつけのサイトです。どちらも初学者が挑戦するには申し分ないサイトのため、ぜひこの2つにチャレンジしてみましょう。まとめ今回はProgaやドットインストールなどの基礎学習を終えた人におすすめの模写コーディング練習サイトを紹介しました。実際の効率的なコーディングの練習方法に関しては別記事で解説してますのでよければそちらも参考にしてみてください。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。