Day 13
配色套用：套用配色、字體、背景
今天的任務是將前幾天所規劃好的配色方案、字體風格與背景設計正式套用到實際的網頁結構中，讓整個網站從純粹的框架與版型，逐步呈現出專屬的視覺氛圍。這個階段不只是簡單換顏色，而是將設計文件中每一項細節——包括顏色代碼、字體大小、背景處理、互動狀態——完整落實在 HTML 與 CSS 中，讓網站初步具備「遊戲專屬的品牌感」。
一、重新檢視設計規格
在正式開始修改程式碼之前，先打開 Day 10 完成的設計規格文件，確認以下幾個重點：
主色與輔助色：確認 HEX 或 RGB 色碼是否已明確記錄（例如主色：#F6B7C1、輔助色：#FFEAC5）。
字體細節：標題字體是否設定字重（font-weight）與字級（例如 h1 = 48px、h2 = 32px、內文 16px）。
背景元素：是否包含漸層、圖片、插畫或紋理等設計需求，並確認圖片的解析度與檔案大小，避免套用時影響載入速度。
二、HTML 結構標記
配色套用的前提是 HTML 架構乾淨且具有語意。
檢查每個主要區塊是否已加入適當的 class，例如：
<header class="site-header"></header>
<main class="game-container"></main>
<footer class="site-footer"></footer>
<body> 或 <main> 中，可預留額外的容器 class，例如 .bg-light 或 .bg-dark，方便全局背景套用不同主題。三、CSS 配色實作
接著打開 CSS，從最核心的色彩與字體開始：
色彩變數化：
在 :root 中宣告 CSS 變數，方便日後維護與修改，例如：
:root {
--main-color: #F6B7C1;
--accent-color: #FFEAC5;
--background-color: #FFF8F0;
--text-color: #333333;
}
這樣若日後需要調整色系，只需修改變數即可全站套用。
背景套用：
依據設計需求，可以選擇純色背景、漸層背景或圖案背景，例如：
body {
background: linear-gradient(180deg, #F6B7C1 0%, #FFEAC5 100%);
font-family: 'Poppins', 'Noto Sans TC', sans-serif;
color: var(--text-color);
}
如果遊戲頁面需要特殊氛圍，例如「迷宮」可加入深色漸層，「翻牌遊戲」則可用亮色漸層呈現活潑感。
四、字體套用與排版微調
字體不僅是美觀，更影響閱讀體驗：
將設計文件中指定的字體套用到全站，例如：
h1, h2, h3 {
font-family: 'Luckiest Guy', cursive;
color: var(--main-color);
}
p, li, button {
font-family: 'Noto Sans TC', sans-serif;
}
注意中英文混排的字體大小比例，例如中文字體通常需要比英文字體稍大 1–2px 才不會顯得擁擠。
針對不同螢幕寬度，使用 @media 調整標題大小與行距，確保 RWD（響應式設計）下字體仍清晰易讀。
五、按鈕與互動細節
除了靜態顏色，互動效果也需要遵循設計規格：
按鈕滑過（hover）時可以略微加深主色或加入陰影，例如：
.btn-play:hover {
background-color: #E89AA7;
transform: scale(1.05);
transition: all 0.3s ease;
}
重要提示框（例如遊戲開始彈窗）可使用輔助色強調，與主色形成層次感。
六、測試與調整
完成初步套用後，打開瀏覽器檢查每個頁面：
不同解析度下顏色是否一致？
字體是否因系統或瀏覽器不同而變形？
背景圖片是否有過慢的載入或模糊的情況？
可以使用 Chrome DevTools 模擬手機與平板螢幕，確保 RWD 表現無誤。
今日成果
完成全站的配色套用、字體設定與背景設計，使網站不再是灰白的骨架，而是具有完整品牌視覺的遊戲頁面。經過這一步，玩家即使還未開始遊戲，也能從色彩與字體中感受到遊戲的情緒與風格，例如輕快、療癒或刺激，這是網站正式邁向成品的重要里程碑。
iThome鐵人賽
看影片追技術