このパートでは、サイト模写をする際に覚えておくと便利なFigmaやchome拡張機能の使い方。ポートフォリオを制作する時に必須のgithubでのレポジトリの使い方について触れます。 サイト模写や静的サイトを制作する時に必要な知識になるので不安な方は手順書にしたがって実行してみてください。
- 難易度：level0
- 目安時間：30分間〜60分間
手順1：Figmaの設定
CSSを設定する時に余白がバラバラにならないようにしたり、コーディングを効率化できるポイントを探す のが狙いです。Scssを利用する場合は、変数の設定ができるので使い回しするスタイルは効率化してコーディングすることができます。
- 手順
- Figmaのアカウント登録をする。
- HTMLtoFigmaをインストールする。
- 模写サイトをFigma上にコピーする。
- ルーラーを使い、全体で共通している横幅の余白やsection間で共通している上下の余白があるか簡単に確かめる。
- section間で共通している要素を確かめる
手順2.画像アセットをダウンロードする
画像アセットを簡単にダウンロードできます。
- 手順
- chrome拡張機能のImage Downloaderをダウンロード
- 拡張機能を使い、模写する画像をダウンロード
手順3. githubでレポジトリの作成をする
- 手順
- （アカウント登録していない人は）githubに登録する
- Create a new repositoryボタンを押す
- Repository nameを記載
- Privateを選択
- Create repositoryを押し、レポジトリの作成完了
手順4. git cloneする
- 手順
- vs codeでターミナルを開く
- $ cd（ホームディレクトリへ移動）
- $ cd desktop（デスクトップへ移動）
- 作成したレポジトリからURLをコピー
- $ git clone URL（コピーしたURLを貼り付ける）
- cloneしたフォルダをvs codeで開く