おにちゃん塾の商品一覧*準備中

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

【初心者向け】模写コーディングのやり方をご紹介【コツコツが大事】
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • 模写コーディングのやり方について詳しく知りたい

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

おにちゃん

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


本記事の概要

  • 模写コーディングのやり方:詳しい手順
  • 模写コーディングのやり方:役立つツール
  • 模写コーディングのやり方:僕が意識したこと

(スポンサーリンク)

目次

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

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

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

模写コーディングのやり方:手順
  • やり方①模写サイトを選定
  • やり方②模写コーディグのルール設定
  • やり方③実際にコーディングする
  • やり方④答え合わせをする


手順①模写サイトを選定

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

  • 初学者→コード量が少ないかつ基礎が多い模写
  • 中級者→コード量を多めかつ難解なCSS
  • 上級者→コード量多めかつ難解なCSSかつよく使われるJS

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

おにちゃん

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


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

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

具体的なルール設定
  • フォントは調べる
  • 画像はインストール
  • ブロック幅は調べる
  • 色の取得
  • ソースコードの閲覧は禁止
  • ブレークポイントは似た位置

おにちゃん

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

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


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

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

  1. 時間を設定する
  2. ファイルを準備
  3. コードを書く
  4. ファイルをサーバーにアップロード

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

おにちゃん

おにちゃん塾のトップページはフリーなのでぜひ活用してみてください。


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

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

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

おにちゃん

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


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

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

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

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

僕はプログラミングの記事50記事以上メモしています。
難しい内容のときに、すぐに情報を引き出せる状態にしています。


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

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

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

役立つツール
  • Chrome検証ツール
  • image Downloarder


Chrome検証ツール

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

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

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

今回はおにちゃん塾で解説していきます。

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

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


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

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

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

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


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

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

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

  • 完成度は7割を目指す
  • なるべくググるようにした


完成度は7割を目指す

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

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

  • 大雑把にHTML・CSSを理解する
  • ググれば分かるレベルにする
  • 効率の良いコードの書き方ができる

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

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

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


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

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

ググる際のポイント

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

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

【中央寄せ CSS】と検索

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

A記事では、〇〇を使う

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

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

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

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


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

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

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

本記事のまとめ
  • 模写コーディングのやり方:詳しい手順
  • 模写コーディングのやり方:役立つツール
  • 模写コーディングのやり方:意識したこと
おにちゃん

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

読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる