【初心者向け】模写コーディングのやり方をご紹介【コツコツが大事】

本記事は上記の方に向けて、執筆しています。

模写コーディングのやり方を知っておくことは大切なことなので必ず理解しましょう。

---

本記事の概要

多くの方に読まれてる記事

• 【経験談】プログラミングを独学で習得する方法【3ヶ月で可能な話】
• 【完全初心者対応】プログラミングの始め方｜3ヶ月で成功を目指す
• 大学生の私がおすすめするプログラミングスクール3選(無料含む)

模写コーディングのやり方：詳しい手順

模写コーディングのやり方：詳しい手順は下記のとおりです。

やり方手順①模写サイトを選定

まず、模写するサイトを選定しましょう。

ご自身で選ぶのが難しいという方は【当サイト 模写コーディング】と検索するか、下記の記事を参考にしてみてください。

厳選6つの学べる模写サイトを紹介しております。

やり方手順②模写コーディグのルール設定

模写コーディングのやり方としてルール設定は必ず行うようにしましょう。

ルール設定はご自身のレベル感に合わせましょう。

実案件では、ソースコードをカンニングしてコピペしても問題ないですが、今回は模写なので、なるべく見ないようにしてご自身の基礎知識を上げてみてください。

やり方手順③実際にコーディングする

ここまでを終えたら、実際にコーディングを行っていきましょう。

模写サイトなので、ファイルをサーバーにアップロードするのは著作権違反なので、アップロードする際は著作権フリーの模写を載せるようにしましょう。

当サイトのトップページはフリーなのでぜひ活用してみてください。

やり方：時間設定はかなり重要

模写サイトに時間を設定しないと永遠コーディングする地獄にハマります。

そのため、模写する際は『このサイトならこの時間で行う』と決めるようにしましょう。

時間に間に合わせないのであれば、間に合うような効率的な書き方＋基礎知識を身につけてググる時間を減らすなどしましょう。

やり方手順④答え合わせをする

答え合わせをする際は実際にソースコードを見ましょう。

殆どのサイトがWordPressでコーディングされていて、ソースコードが分かりづらい状態になっていますが、下記の動画のポイントを押すとHTMLを確認することができます。

• 分からないコードはメモする
• ググって役立つコンテンツもメモする

やり方手順⑤サーバーにアップロードする

模写サイトをサーバーにアップロードしましょう。

上記サイトに登録し、サイトを公開してみましょう。

模写したサイトの著作権確認は行っておきましょう。念のため自分だけがみられる状態にするのもありだと思います。

模写コーディングのやり方：役立つツール紹介

模写コーディングのやり方：役立つツールを紹介していきます。

Chrome検証ツール

Chrome検証ツールとは、WebサイトやWebアプリケーションで使用されているhtml、cssを確認する事ができるツールです。

Google Chromeインストールがしてある前提でお話ししていきます。

まずは調べたいWebサイトに行きましょう。

今回は当サイトで解説していきます。

その後、右のボタンをクリックし、【その他ツール】→【デベロッパーツール】の部分をクリックしてみてください。

検証をクリックすると、ソースコードが表示されるはずです。

もっと具体的な部分の調べるやり方

調べたい部分をドラッグしてください。

その後、右クリックして検証ボタンをクリック

ピンポイントで表示されるはずです。

模写コーディングのやり方：私が意識したこと

模写コーディングのやり方：私が意識したことは下記の通りです。

完成度は7割を目指す

模写コーディングのやり方として最も大切なことは、基礎知識を身につけることです。

正直、最初の頃は細かい部分は気にしなくても良いです。

この段階で分けるとすると、模写コーディングの意味は大雑把にHTML・CSSを理解することです。

そのため、あまり細かいことは気にせず、最初はコードを書くようにしましょう。

模写コーディングのやり方として最も大切なことは、基礎知識を身につけることです。

なるべくググるようにした

次に意識したことはとにかくググって集めるようにしました。

ググる際のポイント

• 検索したものの情報5記事読む
• 英語でソースを探した

中央寄せのやり方がわからない場合を想定して解説します。

【中央寄せ　CSS】と検索

1. 上位記事5記事を閲覧
2. 内容の濃い記事のURLをメモする
3. 上位記事5記事読むと、様々な角度から【中央寄せ　CSS】について学べます。

A記事では、〇〇を使う

B記事では、◽︎◽︎を使う

C記事では、××の場面では〇〇、××の場面では◽︎◽︎

このように、5記事ほど読むと、エンジニアとしての幅を広げることができます。

このやり方は初学者に特におすすめです。

まとめ：模写コーディングのやり方

ここまでで『【初心者向け】模写コーディングのやり方をご紹介【コツコツが大事】』の解説は以上です。

本記事は以上です。最後までご覧くださりありがとうございまし。

読者におすすめの記事