Recommended
More Related Content
Similar to 【開発準備】GoogleChromeの使い方
Similar to 【開発準備】GoogleChromeの使い方 (20)
【開発準備】GoogleChromeの使い方
- 2. © UTAGE All Rights Reserved. Google Chromeデベロッパーツールの使い方 Webブラウザ • Google Chromeに開発者用の便利なツールが付いている ハンズオンメニュー •HTML構造を見る •HTMLを編集する •CSSの構造を見る •CSSを編集する
- 3. © UTAGE All Rights Reserved. Developer Toolの使い方 ① Developer Toolの起動 (「fn」+ )「F12」で起動 カーソルを当てて、要素を選択できる スマホ表示画面に変更できる (Day4：レスポンシブで詳しく説明) Element・・・HTMLの構造を見れる Console・・・JavaScriptのログが出力される Style ・・・CSSの構造を見れる Google Chromeデベロッパーツールの使い方
- 4. © UTAGE All Rights Reserved. HTML構造を見る サンプル：https://connpass.com/dashboard/ Google Chromeデベロッパーツールの使い方
- 5. © UTAGE All Rights Reserved. HTMLを編集する (1)Developer Toolで or ＋ 「F」を押下 (2)画面上に検索ボックスが出るので 「title」と検索 Google Chromeデベロッパーツールの使い方
- 6. © UTAGE All Rights Reserved. HTMLを編集する (1)<title>タグで囲まれている部分をダブル クリックで編集 (2)任意のテキストに変更して「Enter」 Google Chromeデベロッパーツールの使い方
- 7. © UTAGE All Rights Reserved. CSSの構造を見る サンプル：https://connpass.com/dashboard/ Google Chromeデベロッパーツールの使い方
- 8. © UTAGE All Rights Reserved. CSSを編集する (1)Elementsウィンドウで<body>タグを 選択 ・文字の色を変えてみよう！ Google Chromeデベロッパーツールの使い方
- 9. © UTAGE All Rights Reserved. CSSを編集する (1)Styleウィンドウで赤枠の部分を編集 する #444 → #F00 ・文字の色を変えてみよう！ Google Chromeデベロッパーツールの使い方