【CSS #3】基礎からちゃんと学ぶ CSS 入門！この講座だけでセレクターは完結できます！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
※ ドット(.)とコロン(:)を言い間違えてるので脳内変換お願いします🙏

📙 もくじ
0:00 index.htmlの用意
1:11 目次について解説
1:29 タイプセレクター (h1, pを用いて説明)
2:47 タイプセレクター (bodyタグに使用する例)
3:15 classセレクター
4:26 classセレクター (複数のclassをつける例)
6:00 idセレクター
7:36 idとclassのどちらを使うべきか
8:22 ユニバーサルセレクター
9:45 存在や値のセレクター
11:06 部分文字列一致セレクター (全文一致)
11:39 部分文字列一致セレクター (前方一致)
12:22 部分文字列一致セレクター (部分一致)
12:52 部分文字列一致セレクター (後方一致)
13:38 擬似クラス (:first-child, :first-of-type)
14:54 擬似クラス (:first-child と :first-of-type の違いについて )
16:08 擬似クラス (:last-child, :last-of-type)
16:27 擬似クラス (:nth-child, :nth-of-type)
17:14 擬似クラス (:not)
18:23 擬似クラス (:hover)
19:29 擬似要素 (::after, ;;before)
20:34 擬似クラス (::first-line)
21:13 擬似クラス (::first-letter)
21:51 子孫結合子
23:41 子結合子
24:39 隣接兄弟結合子
26:26 一般兄弟結合子
28:00 MDNリファレンスでCSSセレクターを調べる
29:16 まとめ

🚀 今日のひとこと
プログラミング講座のCSS編の3回目です。
かなり長くなってしまいましたが、
その分どこよりも詳しく解説できたと思います。
この動画を見るだけでCSSのセレクターについて
完結できるレベルの濃い講座になっています。
駆け出しエンジニア・入門者・初心者は必見です！
次回はカスケード・詳細度・継承について解説します。

🔥基礎からちゃんと学ぶ CSS 入門！
【第1回】基本構文を抑えよう！
https://www.youtube.com/watch?v=xBLIzweHYic&t=2s

【第2回】プロパティについて深堀りしよう！
https://www.youtube.com/watch?v=sfAhER5AGOA

【第4回】スタイルが効かないときはだいたいカスケード・詳細度・継承のどれかが原因！
https://youtu.be/aNnauB_PY3I

【第5回】ボックスモデルはCSSを書いていく上で常に意識する必要があります
https://youtu.be/z582Z6dENGA

【第6回】フレックスボックス (flexbox) の使い方をゲームで学ぼう！
https://youtu.be/FU4RocY_Y1k

【第7回】flexbox の flex プロパティの使い方を徹底解説
https://youtu.be/TXwY_SWO07U

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

🌏 SNS
Twitter: https://twitter.com/shimabu_it
Instagram: https://www.instagram.com/shimabu_it

🏷️ タグ
#CSS #CSS入門 #プログラミング講座