Web制作コース

【まずはここから🔰】ゼロから始めるWeb制作

【Web制作】ローカル開発レッスンサンプル1

レスポンシブデザインを確認する方法を学びます。

1. 右上のElements（要素）左隣のアイコンをクリックすることによりレスポンシブデザインを確認することができます。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/493cc414-2153-4e2a-b3c7-45a9e3bd2674.png)

2. . 上部の赤枠部をクリックするとサイズを画面変更することが可能です。
3. 中央右側の赤枠をクリックしながらマウスを動かすと直感的にサイズを調整することも可能です。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/352e88aa-ccd3-48df-b32d-c851d4234613.png)

4. 特定の要素を選択した状態でレスポンシブすることにより、レスポンシブ時のスタイルを確認する事も可能です。

![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/93ab9213-cd61-4fcb-94b5-e0759d9abc2a.png)

8. 【検証ツール】レスポンシブデザインを確認