Chrome DevToolsの使い方を徹底解説！Chrome Developer Toolsを使いこなすと開発効率が上がる！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家

📙 もくじ
0:00 index.html, style.css の準備
1:05 基本 - Chrome DevTools の色んな出し方
1:52 基本 - Chrome DevTools を出す場所について
2:39 基本 - Chrome DevTools のレスポンシブモード
3:29 基本 - iPhone や iPad のフレームの出し方
4:05 基本 - フレーム付きでスクリーンショットを撮る
4:42 基本 - 便利なショートカットを紹介
4:56 基本 - Chrome DevTools の場所切り替えショートカット
5:42 基本 - Chrome DevTools のレスポンシブ切り替えショートカット
6:23 基本 - 外部サイトで Chrome DevTools を出す
7:32 DOM - DOM (Document Object Model) とは
7:53 DOM - ソース表示機能について
9:17 DOM - DOM と HTML の違いを実際に確認
10:27 DOM - DOMツリー, DOMノードについて
11:16 HTML - 要素を選択
12:23 HTML - 要素・属性の追加
13:19 HTML - 要素・属性の編集
14:07 HTML - 要素の削除
14:48 HTML - 要素のコピー＆ペースト
15:39 HTML - 要素に状態を追加
16:45 CSS - 宣言の追加、編集、削除
18:03 CSS - 色・影に関する宣言を視覚的に追加
20:50 CSS - 新しく class を追加
21:46 CSS - 新しく擬似クラスを追加
22:16 CSS - Computed の見方を解説
23:33 CSS - ブロックスタイルの Computed について解説
24:30 CSS - user agent stylesheet について解説
27:49 まとめ & クロージング

🚀 今日のひとこと
Chrome Developer Tools (Chrome DevTools) の使い方を徹底解説！
Google Chromeが最強と言われる所以のツールですね。
よく使うショートカットも紹介しているので
プログラミング入門者・初学者は特にオススメです。

🔥基礎からちゃんと学ぶ CSS 入門！
【第1回】基本構文を抑えよう！
   • 【CSS #1】基礎からちゃんと学ぶ CSS 入門！基本構文を抑えよう！【...  

【第2回】プロパティについて深堀りしよう！
   • 【CSS #2】基礎からちゃんと学ぶ CSS 入門！プロパティについて深堀...  

【第3回】この講座だけでセレクターは完結できます！
   • 【CSS #3】基礎からちゃんと学ぶ CSS 入門！この講座だけでセレクタ...  

【第4回】スタイルが効かないときはだいたいカスケード・詳細度・継承のどれかが原因！
   • 【CSS #4】基礎からちゃんと学ぶ CSS 入門！スタイルが効かないとき...  

👨‍💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長

🌏 SNS
Twitter:   / shimabu_it  
Instagram:   / shimabu_it  

🏷️ タグ
#Chrome #ChromeDevTools #ChromeDeveloperTools