7.Chrome DevToolsでサイトの見た目を変更する

問題1: 要素の調査と編集

1. (https://saycon.co.jp/html/demo.html)を開き、Google デベロッパーツールを起動します。
2. ウェブページの任意の要素（例えば、ヘッダーやボタン）を右クリックして「検証」を選択します。
3. エレメントパネルで選択した要素が強調表示されることを確認します。
4. 選択した要素のHTMLを以下のように編集し、変更を適用します。

   <h1>新しい見出し</h1>

5. ページ上で変更が反映されたことを確認します。

問題2: CSSの調査と編集

1. 問題1で編集した要素を再度選択します。
2. エレメントパネルの「Styles」タブを開き、以下のCSSプロパティを追加します。

   color: red;
   font-size: 24px;

3. プロパティが正しく適用され、要素のスタイルが変更されたことを確認します。
4. 追加したプロパティのチェックボックスをオフにして、スタイルが元に戻ることを確認します。

問題3: 要素の選択ツールの使用

1. エレメントパネルの左上にある「要素の選択」ツール（マウスアイコン）をクリックしてアクティブにします。
2. ウェブページ上で任意の要素（例えば、ナビゲーションメニュー）をクリックして選択します。
3. 選択した要素がエレメントパネルで強調表示されることを確認します。
4. 選択した要素に以下のCSSプロパティを追加し、変更を確認します。

   background-color: yellow;
   list-style: none;

問題4: ボックスモデルの確認

1. 問題3で選択した要素について、エレメントパネルの「Computed」タブを開きます。
2. ボックスモデルセクションを確認し、要素のマージン、ボーダー、パディング、コンテンツ領域のサイズをメモします。
3. 要素のCSSスタイルに以下のプロパティを追加し、ボックスモデルがどのように変化するか確認します。

   margin: 30px;
   border: 2px solid blue;
   padding: 2px;

🔰 HTML基礎編：穴埋め問題

Q1. Chrome DevToolsは（　　　　）に標準搭載されているデバッグツールである。
選択肢：
A. Firefox
B. Safari
C. Google Chrome
D. Microsoft Edge

Q2. DevToolsでF12キーを押すと（　　　　）が起動する。
選択肢：
A. ブラウザ再起動
B. 開発者ツール
C. タブリフレッシュ
D. JavaScriptアラート

Q3. DevToolsを使ってWebページ上の要素を選択するには、左上の（　　　　）アイコンをクリックする。
選択肢：
A. カメラ
B. 虫眼鏡
C. マウス
D. ペン

Q4. 選択した要素のCSSを確認・編集するには、「（　　　　）」タブを開く。
選択肢：
A. Console
B. Elements
C. Sources
D. Styles

Q5. CSSのルールに取り消し線がついているのは、（　　　　）によって無効になっていることを示す。
選択肢：
A. エラー
B. CSSの優先度
C. HTML構文
D. スクロール位置

Q6. DevTools上でHTMLやCSSを編集しても、元の（　　　　）や（　　　　）は変更されない。
選択肢：
A. URL、JavaScript
B. ファイル、サーバー
C. HTML、CSSファイル
D. セッション、ローカルストレージ

Q7. DevToolsの「Computed」タブでは、要素の（　　　　）モデル（margin, border, padding, content）を視覚的に確認できる。
選択肢：
A. スクロール
B. インライン
C. ボックス
D. カラム

Q8. スタイル編集で background-color: yellow; を追加すると、背景色が（　　　　）になる。
選択肢：
A. 黄色
B. 青色
C. 白色
D. 灰色

Q9. list-style: none; を設定すると、リストの（　　　　）が非表示になる。
選択肢：
A. 配置
B. アイコン
C. 点（●など）
D. 行間

Q10. 「ユーザーエージェントスタイルシート」とは、（　　　　）側が最初から持っているCSSである。
選択肢：
A. サーバー
B. ユーザー
C. ブラウザ
D. 開発者