https://pas-pol.jp/

まずは拡張機能で追加した、Image Downloader(サイト内の画像をダウンロードする機能)で画像を一括でダウンロードしましょう!

スクリーンショット 2021-08-13 23.13.37.jpg

ただこの画像だけでは足りないので、以下の画像もダウンロードしてください!

模写画像.zip

画像がダウンロードできたらサイトのフォルダを作成していきましょう

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4b418380-2f41-4ff2-9c82-528e2216a18c/_2021-04-01_3.08.01.jpg

フォルダ名はPAS-POLにしておきましょう

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/59d60a89-dd08-46ad-966d-82c3ae4ec75d/_2021-04-01_3.09.30.jpg

PAS-POLのフォルダができたら、その中にimages(画像をまとめておくフォルダ)を作成してダウンロードしておいた画像を全て入れておきましょう!

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ecac107c-ed46-4373-8dc6-33faaa1757bd/_2021-04-01_3.13.10.jpg

ここまでできたらVSCodeを開き、 ①index.htmlの作成 ②テンプレート記述 ③style.css作成 ④cssフォルダの作成 を順番に行ないましょう!

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b372ea6b-28a1-479d-aa2d-e5232204dc46/-2021-04-01-3.20.17_(1).mp4

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

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5b45fd5a-2626-4586-8b2c-ec76872f93ca/-2021-04-01-3.36.04_(1).mp4

これで準備は整いました!