完全沒在規劃中的程式教學，不知道有沒有辦法順利教學呢？QwQ
🛡️工具資訊🛡️
- 今次內容的講義：https://yuuta-tsubasa.studio/log/youtube-chat-css
- 直播心智圖（Whimsical）：https://whimsical.com/s-workspace717815/youtube-css-QtW9Rt8FisHbqpo3cSepEh
- Stylebot (Chrome Plugin): https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha
- Visual Studio Code: https://code.visualstudio.com/
- Youtube Live Chat CSS Presets: https://obsproject.com/forum/resources/youtube-live-chat-css-presets.1182/
- webcode.tools CSS 視覺化調整工具: https://webcode.tools/generators/css/keyframe-animation
- 聊天室樣板生成 - Chat Styles: https://chat-styles.app/
- 聊天室樣板生成 - Chat v2.0 Style Generator: https://chatv2.septapus.com/
- 思源宋體: https://source.typekit.com/source-han-serif/tw/
- 獅尾字體（列表於網頁下方）: https://max-everyday.com/2020/07/swei-b2-sans/
- open 粉圓體: https://justfont.com/huninn/
🛡️直播與影片連結🛡️
🛡️時間軸🛡️
- 00:00:00 Opening
- 00:03:30 開場
- 00:04:33 今日主題與大綱
- 00:10:22 網頁結構 - HTML 標籤與屬性
- 00:17:27 CSS 基本語法
- 00:19:03 class 與 ID 選擇器
- 00:24:41 用 DevTools 檢查聊天室結構
- 00:29:31 OBS 瀏覽器來源與自訂 CSS
- 00:32:30 實作 - 改觀眾名稱顏色、!important
- 00:36:58 Stylebot (1) - 快速找出元素與套用樣式
- 00:43:14 Stylebot (2) - 隱藏聊天室上方區塊、內距
- 00:46:31 用 VS Code 保存與編輯 CSS
- 00:49:42 區分台主與一般觀眾的樣式
- 00:52:54 YouTube Live Chat CSS Preset - 透明聊天室
- 00:59:16 CSS 視覺化調整工具 - 邊框、陰影
- 01:02:52 改字型 - font-family 與小畫家查字型名稱
- 01:06:20 推薦字體 - 思源宋體、獅尾、open 粉圓
- 01:08:30 Box Model - 內距、邊框、外距
- 01:11:15 CSS 動畫 - keyframes
- 01:17:00 樣板生成網站 (1) - 套用樣板再加字型與動畫
- 01:21:36 看懂樣板 - overflow 與 CSS 變數
- 01:25:01 樣板生成網站 (2) - 英文樣板、預覽網址測試會員與 SC
- 01:28:20 小複習
- 01:30:00 Q&A - Super Chat 顏色、之後的 C 語言教學
- 01:32:16 進階 (1) - 用遠端偵錯埠在 OBS 使用 JavaScript
- 01:39:00 進階 (2) - 用 JavaScript 統計每個人的留言數
- 01:51:52 總複習
- 01:53:10 Q&A - Stylebot 的原本用途、前端工具
- 01:58:45 下次教學與作業 tag「#悠太作業」
- 02:05:19 結尾