今日は検証ツール(デベロッパーモード)を使ってみた！
今日の学び
Webページ上のHTMLを確認する方法
- 検証ツールを出す方法
- 右クリック＞「検証」を選択
- 「command」+「shift」+「c」
- HTMLを確認する方法
- 検証ツールの左上に表示されてるカーソルアイコンをクリック
- ページに表示されてるHTMLを見たい部分をカーソルで選択
Webページ上のHTMLを編集する方法
- 検証ツールで変更したい部分を選択して右クリック
- 表示されたメニューの中から「Edit as HTML」を選択し編集
- 編集後に「command」を押しながら「Enter」を押して書き換え
Webページ上のCSSを確認する方法
- CSSを確認する方法
- 検証ツール左上のカーソルアイコンをクリック
- Webページ上の見たい要素を選択
- 検証ツール内の下部または右に表示される「Style」にCSSのコードが表示される
- ボックス構造の確認
- 検証ツール内の「Style」の下または右側にボックス構造が表示される
- ボックス構造では要素の大きさや余白を確認できる
- 任意の状態でのCSSを確認
- 「Style」の右上あたりにある「:hov」をクリック
- 表示される「Force element state」という選択欄で確認したい状態を選択
Webページ上のCSSを編集する方法
- 検証ツールで変更したい部分を選択して右クリック
- 「Style」内の変更したい箇所を編集し「Enter」
Webページ上のCSSを追加する方法
- 「Style」内の右上にある「＋」ボタンをクリック
- CSSを記述できる欄が追加されるのでその欄にCSSを追記する