模写コーディングの準備
まず「素材ダウンロード」ボタンから素材をダウンロードしましょう。
素材の.zipファイルの中には、figma用のデザインファイル（.fig）とimgフォルダが入っています。imgフォルダの中にはコーディングに使用する画像ファイルが入っています。
ダウンロードしたフォルダは分かりやすい場所に移動しておきましょう。
figmaファイルをインポートする
figmaを開き、ダウンロードしてきた.figファイルをfigmaに取り込みます。
figmaのホーム画面で右上の新規作成→インポートからfigファイルを取り込みましょう。
destyle.cssを準備する
destyle.cssはリセットCSSの一種です。本来はリセットCSSはどれを使っても良いですが、今回はdestyle.cssを使います。下記のリンクからdestyle.cssをダウンロードしておきます。
フォルダとファイルを準備する
ダウンロードしたフォルダ内に下記のフォルダ、ファイルを作成しましょう。ファイル名やフォルダ名は、大文字小文字を間違えないように気をつけましょう。
- index.htmlを作成
- cssフォルダを作成して、その中にstyle.cssを作成
- jsを使用する場合にはjsフォルダを作成し、その中にscript.jsを作成
- こちらからdestyle.cssをダウンロードし、cssフォルダに入れる
ファイルやフォルダはエクスプローラーやFinderを使うか、VScode内で作成します。
最終的にはこのような構成になります。
まずはindex.htmlを開き、HTMLのコーディングから開始していきましょう。一通りHTMLを入れ終わったら、CSSで整えていきましょう。