■前提として

「模写サイト通りのコードじゃなくていい」

皆さん勘違いしがちですが、模写サイトと同じ完璧なコードを書く必要はないです。 模写はあくまでもご自身のスキルアップのための勉強の一部です。 なので、完璧なコードを書くのではなく、「自分の頭で考えてコードを書く」 ここに意味があります!

■模写をする理由

「模写サイトを見て、HTMLとCSSをどのように使えば同じようなスタイルに整えることができるのかを自分の頭で考える」

ここの部分が一番重要で、この力をつけてほしいのでインプットの次に模写に取り掛かっていただいています。この模写の学習をおろそかにしたか否かで、長期的に見て成長スピードが大幅に変わると肌身を通して感じているので、ぜひ悩んで悩んで悩みまくって取り掛かるようにしてください!

■あまりやってほしくない模写の進め方

検証ツール(デベロッパーツール)で模写サイトのコードを見ながらコーディングをする

これはあまりやってほしくありません。 ただ絶対にやってはいけないという意味ではなく、最初から自分の頭で考えることなく検証ツールでコードの中を見て丸写しするという進め方はしてほしくないという意味です。 ですので、全然わからない、うまくいかない、となった場合にはぜひ活用してコードの構造を理解するようにしてください!

■簡単な模写にトライしてみよう

次の3-1に進む前に、腕慣らしとしてこちらのサイトの模写にトライしてみましょう! https://code-step.com/profile-menu/

01.フォルダとファイルを作る

[以下の01〜03の作業を動画でも説明しています

](https://youtu.be/36AkNu7xu0c)

以下の01〜03の作業を動画でも説明しています

スクリーンショット 2021-12-22 21.35.22.jpg

そして最後にreset.cssというものを取り入れましょう! ブラウザごとにデフォルトでスタイルがつけられてしまっているので、それを消すためにreset.cssを最初に記述してコーディングしやすくします(詳しくはこちらを参照ください)

今回はこちらのreset.cssを導入していきますので動画に合わせて取り入れてみてください ①reset.cssをコピー ②cssフォルダ内にreset.cssを作成 ③reset.css内にペースト ④index.htmlの<head>内に<link>を追記

スクリーンショット 2021-12-27 16.58.20.jpg

02.画像を取得し、作成したフォルダへ移動

スクリーンショット 2021-12-22 21.36.14.jpg

スクリーンショット 2021-12-27 16.59.30.jpg

03.サイトの全体像を考える

💡コツは”かたまり”で捉えること

スクリーンショット 2021-12-27 15.58.19.jpg