文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
📙 もくじ
0:19 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回】基本構文を抑えよう！
【第2回】プロパティについて深堀りしよう！
【第3回】この講座だけでセレクターは完結できます！
【第4回】スタイルが効かないときはだいたいカスケード・詳細度・継承のどれかが原因！
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: https://twitter.com/shimabu_it
TikTok: https://www.tiktok.com/@shimabu_it
コメント