標籤「CSS」的 3 篇文章

現代的 UI 設計中，「邊距設定為 8 的倍數」的規則被廣泛使用。這不僅僅是慣例，而是基於 螢幕密度、排版和比例的數學一致性所支持的經驗法則。

針對多種螢幕密度的應對​

現代顯示器具有 1x、1.5x、2x、3x、4x 等像素比率。

8 可以在多種倍率下整除，因此不容易發生次像素渲染的模糊效果。如果使用像 5 px 這樣的值，在 1.5x 環境中會導致 7.5 px 的尾數，渲染會變得不準確。

與排版的相容性​

瀏覽器的預設字體大小為 16 px (= 8 × 2)。行距通常也為 1.5 倍 = 24 px (= 8 × 3)。

使用 8 的倍數設置邊距，可以讓文本的節奏視覺上更一致。因為標題和正文的高度與邊距網格相一致，從而產生整齊的垂直節奏。

便於設計標記的創建​

--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;

這樣的比例簡單，使設計師和工程師能更易於使用共同語言。Material Design 和 Tailwind CSS 也採用了這一思路。

設計師只需指定「這裡是 space-3」，工程師便能毫不猶豫地使用 24px。命名規則的統一降低了代碼評審時的溝通成本。

4 px 基礎的選擇​

對於需要更細微調整的 UI，4 px 基礎 (4、8、12、16...) 也很常見。Tailwind CSS 預設採用 4 px 基礎 (p-1 = 4px)。

4 px 基礎也是 8 px 基礎的子集，因此兩者並不矛盾。可以在組件內部等細微的邊距使用 4 px 單位，在不同區域間等較大的邊距使用 8 px 單位進行區分，這樣的運用也很有效。

總結​

8 px 的倍數作為邊距標準的原因可以歸納為三點。

1. 應對螢幕密度: 在多種像素比率下能整除，防止次像素模糊。
2. 與排版的一致性: 與預設字體大小 (16 px) 和行距 (24 px) 一致，產生垂直節奏。
3. 比例的一致性: 簡單的標記體系成為設計師和工程師的共同語言。

即使是以明朝體或襯線字體書寫的文章，加粗時常以黑體（無襯線字體）呈現。這是設計上刻意的選擇，主要有可讀性、視認性、與歷史慣習三個理由。

維持可讀性​

若單純把明朝體加粗，襯線（裝飾筆畫）與主筆畫的對比會變得過大，字形內部的空白（counter）容易消失。這在 Web 或螢幕上的小尺寸顯示尤其明顯，字形會潰掉而難以辨認。

黑體本身沒有襯線，因此即使提高字重也能保留字形內的空白，不會明顯降低可讀性。

明確傳達強調意圖​

直接改變字體家族，可以讓「這裡是強調」的意圖在視覺上被更即刻地傳達。與單純把明朝體變粗相比，切換到黑體更容易被人眼當作「不同資訊」來處理，強調效果更明確。

歷史與文化背景​

自日本活字印刷時代起，就有「強調使用不同字體」的慣例。將明朝體做得更粗在活字鑄造上會產生問題，因此會用完全不同的黑體來表示強調。這個慣習被沿用到數位排版與 Web。

在 CSS 中的實作​

若在 Web 以明朝體作為基底字體，可以用以下樣式將加粗切換為黑體。

body {
  font-family: "Noto Serif JP", serif;
}

strong, b, h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

這個做法也有實作上的優點。無須載入明朝體的多個字重，只要為本文提供 Regular，以及為強調提供黑體的 Bold，就能減少頁面載入成本。

總結​

日文（以及台灣中文排版時常類比的情況）中，加粗時使用黑體的理由可歸納為三點：

1. 可讀性：黑體提高字重仍能保留字形內部空白，維持可讀性
2. 視認性：改變字體家族比單純加粗更清楚地傳達強調
3. 慣習：自活字印刷時代起的「強調用別書體」的做法被沿用

在 Web 上也因為相同理由採用這種組合，是設計與實作上都合理的選擇。

這篇備忘錄記錄了 CSS Grid。

1. 核心概念​

• 網格容器 (Grid Container)：應用 display: grid 或 display: inline-grid 的元素。
• 網格項目 (Grid Items)：網格容器的直接子元素。
• 網格線 (Grid Lines)：構成網格的水平和垂直分隔線。
• 網格軌道 (Grid Tracks)：網格線之間的空間，可以是行 (grid-row) 或列 (grid-column)。
• 網格單元 (Grid Cells)：一個網格軌道交叉形成的最小單位。
• 網格區域 (Grid Areas)：由多個網格單元組成的矩形區域。

2. 創建網格容器​

要創建一個網格佈局，首先將元素的 display 屬性設置為 grid 或 inline-grid。

.container {
  display: grid;
  /* 其他網格屬性 */
}

3. 定義網格軌道 (行和列)​

grid-template-columns 和 grid-template-rows​

這些屬性定義了網格的列和行的數量和大小。

• 固定大小：使用 px, em, rem, % 等單位。

  .container {
    grid-template-columns: 100px 200px auto; /* 三列：100px, 200px, 剩餘空間 */
    grid-template-rows: 50px 1fr; /* 兩行：50px, 剩餘空間 */
  }
  

• fr 單位 (Fraction)：表示網格容器中可用空間的比例。

  .container {
    grid-template-columns: 1fr 2fr 1fr; /* 三列，比例為 1:2:1 */
  }
  

• repeat() 函數：用於重複定義軌道。

  .container {
    grid-template-columns: repeat(3, 1fr); /* 創建三列，每列佔用相同比例的空間 */
    grid-template-rows: repeat(2, 100px); /* 創建兩行，每行 100px */
  }
  

• minmax() 函數：設置軌道大小的最小和最大值。

  .container {
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 每列最小 100px，最大 1fr */
  }
  

4. 網格項目放置​

根據網格線放置​

• grid-column-start, grid-column-end, grid-row-start, grid-row-end
• 簡寫：grid-column, grid-row

.item1 {
  grid-column-start: 1; /* 從第 1 條垂直網格線開始 */
  grid-column-end: 3;   /* 在第 3 條垂直網格線結束 (佔用第 1 和第 2 列) */
  /* 或者簡寫：grid-column: 1 / 3; */

  grid-row: 1 / span 2; /* 從第 1 條水平網格線開始，跨越 2 行 */
}

根據網格區域放置​

1. 定義網格區域：使用 grid-template-areas 在網格容器上定義具名區域。

   .container {
     grid-template-areas:
       "header header header"
       "nav    main   aside"
       "footer footer footer";
   }
   

2. 將項目放置到區域：使用 grid-area 屬性將網格項目分配給這些區域。

   .header { grid-area: header; }
   .nav    { grid-area: nav;    }
   .main   { grid-area: main;   }
   .aside  { grid-area: aside;  }
   .footer { grid-area: footer; }
   

5. 網格間距 (Gutters)​

使用 gap, row-gap, column-gap 設置網格軌道之間的間距。

.container {
  gap: 10px; /* 行間距和列間距都是 10px */
  /* 或者分別設置 */
  /* row-gap: 10px; */
  /* column-gap: 15px; */
}

6. 對齊內容​

容器級對齊 (對齊網格內的網格項目)​

• justify-items (水平方向)
• align-items (垂直方向)
• 簡寫：place-items

值：start, end, center, stretch (默認)

.container {
  justify-items: center; /* 所有項目在網格單元中水平居中 */
  align-items: center;   /* 所有項目在網格單元中垂直居中 */
}

項目級對齊 (對齊單個網格項目)​

• justify-self (水平方向)
• align-self (垂直方向)
• 簡寫：place-self

值：start, end, center, stretch (默認)

.item1 {
  justify-self: end; /* 在其網格單元中水平靠右 */
  align-self: start; /* 在其網格單元中垂直靠上 */
}

對齊網格軌道 (當網格容器有額外空間時)​

• justify-content (水平方向)
• align-content (垂直方向)
• 簡寫：place-content

值：start, end, center, stretch, space-around, space-between, space-evenly

.container {
  height: 500px; /* 確保容器有足夠的額外空間 */
  justify-content: space-around; /* 軌道之間和兩側均勻分佈空間 */
  align-content: center;       /* 將所有行居中對齊 */
}

7. 總結​

CSS Grid Layout 是一個強大的二維佈局工具，它提供了一種直觀且靈活的方式來創建複雜的網頁佈局。通過理解其核心概念（容器、項目、軌道、線、區域）以及各種屬性（如 grid-template-areas、gap、對齊屬性），你可以設計出響應式且結構良好的網頁。