【超初心者必見】模写コーディングを始めるまでの具体的な手順と模写コーディングのやり方をわかりやすく解説

2023年9月28日

当ページのリンクには広告が含まれています。

こんにちは、ミナミです。

「プロゲートの次は何をすればいい？」

「模写コーディングの具体的な手順とやり方を知りたい」

「模写コーディングを何から始めればいいかわからない」

と考えている人はいませんか？

模写コーディングは、HTML/CSSの書くことに慣れることができるので、絶対にするべき学習方法です。

しかし、模写コーディングを始める手順、やり方はかなり難しいです。

僕も超初心者のときは、模写コーディングを始めるまでに四苦八苦していた思い出があります。

そこで僕の経験をふまえて、今回の記事では、超初心者でもわかりやすく、誰でもできる、模写コーディングの具体的な手順、やり方について解説します。

今回の記事を読んで欲しい人

progate（プロゲート）でHTML/CSSを勉強している人
HTML/CSSの実践的な学習がしたい人
模写コーディングのやり方が知りたい人
模写コーディングに苦戦している人

模写コーディングの次にすることが知りたい人はこちらの記事で解説しています▼

【超初心でもわかる】模写コーディングを始めるまでの手順

模写コーディングを始めるまでの手順えは４つあります。

超初心者の方はここの模写コーディングを始めるまでにかなり苦戦します。

僕も最初「エディタってなに？」「ファイルはどうすればいいの？」と模写を始めるまでにとても時間がかかりました。

その経験から、超初心者の方でもわかりやすく、模写コーディングを始めるまでの4つの手順を、解説しているので参考にしてください。

模写コーディングを始めるまでの手順

コードを書くエディタを用意する
模写するサイトを決める
ファイルを作成
コーディングしていく

1|コードを書くエディタを用意する

模写コーディングを始める最初の手順は、HTML/CSSを書くためのエディタを用意する必要があります。

エディタはHTML/CSSの言語書くためのノートのようなものです。

プロゲートでは、エディタはプロゲートの中で用意されていました。とても便利ですよね。

しかし、自分で模写コーディングするときはエディタは必須になります。

ちなみにエディタはこのようなものです▼

プログラミングといえば、上の画像をイメージするかもしれませんね。

しかし、「どのエディタをどうやってを使えばいいの？」と思いますよね。

超初心者の方は「Visual Studio Code」を使えば間違いなし！

「Visual Studio Code」略してVSCodeは無料で使えるエディタです。

多くのエンジニアの人がこの「VSCode」を使っているので、わからないことがあっても、ネットで調べれば解決します。

超初心者の方でも、わかりやすいエディタなので、「Visual Studio Code」をインストールしましょう。

「Visual Studio Code」のインストール方法

「Visual Studio Code」の公式ページからインストーラーをダウンロードします。

1.公式ページから「other platforms」を選択

2.自分に合ったOSを選択して、インストーラーをダウンロードする

3.「Visual Studio Code」をイントールしていく

Macの場合

ダウンロードしたインストーラーを開いて、「Visual Studio Code」をインストールする

Windowsの場合

ダウンロードしたインストーラーを実行する
規約に同意して、「次へ」を選択
インストール先を確認して、「次へ」を選択
スタートメニューフォルダーの指定は何もしないで、「次へ」を選択
追加タスクの選択で上の３つにチェックを入れて、「次へ」を選択
インストールをする

「Visual Studio Code」で模写コーディングするための準備

「Visual Studio Code」をインストールしたら、準備することがあります。

初期設定が英語なので、日本語に設定する
コーディングしたWebサイトをローカルサーバーで確認できるようにする

この2つは模写コーディングする上で必須なので「Visual Studio Code」で準備しましょう。

初期設定が英語なので、日本語に設定する

「Visual Studio Code」を最初に開くと英語になっています。（解説画像はすでに日本語です）

⒈左側にある拡張機能のアイコンを選択

⒉上の検索で「Japanese Language Pack」と検索する

⒊一番上の「Japanese Language Pack」をインストールする

⒋インストールが完了すると、画面右下に「Restart」と表示されるので選択する

⒌「Visual Studio Code」が再起動されて、日本語表示になる

コーディングしたWebサイトをローカルサーバーで確認できるようにする

「Visual Studio Code」でコーディングするときは、コーディングしたサイトを確認するためにローカルサーバーで表示するようにしなければいけません。

わかりづらいと思うので、具体的に説明します。

ローカルサーバーに表示できるように設定をすると、コーディングしたエディタの右下に「Go Live」と表示されるので、選択します。

すると、自分のブラウザにコーディングしたサイトが表示できます▼

この設定をすることにより、

自分が書いたコードがどのように表示されている確認できるので、模写コーディングするときは必須

設定方法

⒈拡張機能のアイコンを選択して、「Live Server」と検索。

⒉下の紫色のアイコンが表示されている「Live Server」をインストールします。

⒊メニューバーの「ファイル」から、「自動保存」を選択（この設定をするとコードを書いたときに自動でブラウザが更新される）

コードを書くときに右下に「Go Live」と表示れていればOK！

コードを書いたときに、「Go Live」をクリックして、ブラウザに表示れるか確認しよう

2 | 模写するサイトを決める

エディタの準備が整ったら、模写するサイトを決めていきます。

超初心者の方は、模写するサイト選びはとても大事です。

模写するサイトが難しいと、そこで挫折してしまう場合がある

なので、最初はとても簡単なサイトを模写コーディングしていきましょう。

おすすめなのが、codestepという無料でコーディング練習ができるサイトの初級編「Profile」

codestepはコーディング練習するためのサイトです。

入門編
初級編
中級編
上級編

とコーディングするサイトが分かれていて、自分のレベルに合ったサイトをコーディング練習ができます。

僕もこのcodestepのおかげでコーディングができるようになりました。

codestepはとても評判がいいので、模写コーディング練習におすすめです。

そんなcodestepの中でも、最初は初級編の「Profile」がおすすめです。

他にも、模写コーディングがで練習できるサイトがあるので、気になる人はこちらの記事で解説しています▼

3 | ファイルを作成

模写するサイトを決めたら、ファイルを作成していきます。

初めて模写コーディングする人には、少しややこしいかもしれませんが、わかりやすく解説します。

僕はMacを使っているので、Macの画面になります。（基本的にはWindowsも一緒です）

⒈自分のパソコンに新しくフォルダを作成する（名前はProfileにします）

⒉Profileフォルダの中に「img」フォルダを作る

⒊imgフォルダの中に、先ほど紹介した、codestepの入門編「Profie」の画像をドラッグ&ドロップする

画像は何でもいいので、自分でオリジナルの画像を用意してもいい

⒋ファビコンのアイコンを保存する（必要ない人は⒐へ進む）

　Profileのサイトで右クリックして、「検証」を選択する

ファビコンとは？

ファビコンとは、ブラウザのタブなどに表示されるWebサイトのアイコンのこと。

⒌右側にある、HTMLが書かれている部分の<head>タグの右にある「▶︎」をクリック

⒍「img/favicon.ico」の上で右クリックする

⒎「Open in new tab」を選択する

⒏表示されたファビコンをProfileのimgフォルダにドラッグ&ドロップする

⒐Profileのフォルダを「Visual Studio Code」にドラッグ&ドロップする

⒑Profileの横の「新しいファイル」を選択する

「新しいファイル」と「新しいフォルダ」を２種類あるので、間違えないように注意！

11.新しいファイルに「index.html」を入力する

12.Profileの横の「新しいフォルダ」を選択する

「新しいファイル」と「新しいフォルダ」を２種類あるので、間違えないように注意！

13.「css」と入力する

14.cssのフォルダを選択した状態で、「新しいファイル」を選択する

15.「style.css」と入力する

これでファイルの作成は完了。

index.html、style.css、imgフォルダが入った、Profileのフォルダができます▼

4 | コーディングしていく

ファイルが完成したら、後はコーディングをしていくだけです。

といっても、最初はどうやってコーディングしていけばいいかわからないと思います。

そういうときは写経していきましょう。

写経とは、実際のコードをそのまま移していくこと

codestepはとても親切で、Webサイトのソースコードを見ることができます▼

ソースコードを見ながら、どうやってWebサイトができるのかを確認しましょう。

ただ写すのではなく、「このコードはこういうふうに表示される」というように自分で確認しながらコードを写すことが大事

ここまでは模写コーディング始めるための手順をわかりやすく解説しました。

【超初心でもわかる】模写コーディングのやり方

模写コーディングを始める準備ができたので、模写コーディングしていきます。

と言われても超初心者の方は、いきなり模写コーディングをしていくのは難しいと思います。

【できないのは当たり前】模写コーディングができない・難しいと感じる理由5選【模写コーディングのコツあり】

僕も初めて模写コーディングするときは、何から始めていけばいいかわかりませんでした。

そこで、ここからは超初心者の方でもわかる、模写コーディングのやり方について解説します。

解説にはコーディング練習サイト『codestep』の初級編「Profile」を使っていきます。

模写コーディングのやり方

模写するサイトのレイアウトの確認
HTMLのheadタグ
HTMLのヘッダー
HTMLのメイン
HTMLのフッター
CSS
模写するサイトと自分で書いたサイトを見比べる
完成

模写コーディングの今回のやり方はHTMLを全て書いてからCSSを書きますが、「HTMLのヘッダーを書いてから、ヘッダーのCSSを書く」というように、その都度CSSを書いていっても大丈夫（自分のやりやすい方でやりましょう）

⒈模写するサイトのレイアウトなどの確認

コーディングする前に確認することはいくつかあります。

レイアウト
セクションごとの幅の広さや高さ
文字の大きさ
文字や背景の色
余白の広さ

などなどです。

最初に上のことを確認するとコーディングしやすくなるので、模写するサイトのレイアウトなどの確認はしましょう。

最初は、文字の大きさや文字の色、背景の色などは答えのコードを見て、確認すればOK

レイアウトのイメージはこのようにヘッダー、メイン、フッターで分けるイメージです▼

「ここまでがヘッダーで、ここからがメインだな」とイメージできたらコーディングがしやすいです。

模写コーディングに便利なツール

ブラウザにGoogle Chromeを使っている人は模写するときにとても便利なツールがあります。

Google Chromeの拡張機能のDesigner Toolsです

Designer Toolsの機能を使うと、模写するWebサイトの高さや幅、余白などのサイズを見ることができます。

例えば、このように使えます▼

Designer Toolsインストール方法

chromeウェブストアにアクセスする
「Designer Tools」と検索する
Designer Toolsをインストールする

HTMLのheadタグ

それでは、模写コーディングをしていきます。

最初はHTMLのheadタグを書いていきます▼

「HEAD」とは、文書のヘッダ部分を指定するタグです。<head>タグで囲まれた内容はhtmlファイルの情報を宣言するものであり、<html>タグのあと、<body>タグの前に書きます。
<head>タグの中の内容は、<title>タグを除いて普通はブラウザの画面上に表示されません（title要素はブラウザ上部のタイトルバーに表示されます）。ヘッダ部分では<title>タグ、<meta>タグ、<link>タグなど、HTMLファイルのさまざまな情報が指定されます。また、スタイルシート（CSS）やJavaScriptを外部ファイル化した場合に、<head>タグの中に記述して読み込ませることもあります。
引用元：HTML辞典

headタグでできること