Web制作コース

【パーツ編📦】ウェブサイトの主要なセクションパーツを作成

スクールサイトを作ろう

## 1.完成物のデザイン確認
ここでは完成物のデザインを確認します。
デザインを見ながら、**どのようにコーディングするかをイメージ**します。
下記のポイントを参考に[**デモサイト**](https://if-tech-support.github.io/code-lesson-tutorial/beginner2/answer/)を確認してみよう。

<br />

### ポイント
* 各セクションをグループ分けする
  * ヘッダー、 各コンテンツ、フッターなど
* どこで画像を使用しているか
* コンテンツの最大幅は設定されているか
* レスポンシブデザインの横幅の余白はあるか
* 共通パーツはあるか
  * 見出し、コンテナなど
* 見出しはいくつ使われているか
  * h1-h2-h3...　など
  
### PC版
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/afdec299-9a7e-4032-a434-f308a4dc917f.jpg)


---

### SP（スマートフォン）版
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/c9d84d90-4723-4d98-8341-e274780f794d.jpg)

2. 2. 完成物のデザイン確認(スクール)