Article · programming

HTML & CSS EP5: CSS Colors, Backgrounds และ Typography — ออกแบบเว็บไซต์ให้สวย อ่านง่าย และเป็นมืออาชีพ

HTML & CSS

เรียนรู้การกำหนดสีพื้นหลัง การไล่ระดับสี การจัดการตัวอักษร ระยะห่างบรรทัด และการสร้างระบบ Typography ที่ช่วยให้เว็บไซต์อ่านง่าย รองรับมือถือ และมีเอกลักษณ์

1. สีและตัวอักษรเป็นหัวใจของการออกแบบเว็บไซต์

เว็บไซต์ที่ใช้งานง่ายไม่ได้ขึ้นอยู่กับ Layout เพียงอย่างเดียว สีช่วยสร้างบรรยากาศ แยกความสำคัญของข้อมูล และนำสายตาผู้ใช้ ส่วน Typography หรือการออกแบบตัวอักษรช่วยให้เนื้อหาอ่านง่าย เป็นระเบียบ และสื่อสารบุคลิกของแบรนด์ได้ชัดเจน

CSS มีคุณสมบัติสำหรับกำหนดสีข้อความ สีพื้นหลัง รูปแบบตัวอักษร ขนาด ความหนา ระยะห่างระหว่างบรรทัด และระยะห่างระหว่างตัวอักษร การใช้คุณสมบัติเหล่านี้ร่วมกันอย่างมีหลักการช่วยให้หน้าเว็บดูเป็นมืออาชีพโดยไม่จำเป็นต้องใช้เอฟเฟกต์จำนวนมาก

เป้าหมายของบทเรียนหลังเรียนจบ คุณจะสามารถกำหนดสีข้อความและพื้นหลัง สร้าง Gradient เลือกขนาดและน้ำหนักตัวอักษร จัดระยะห่างให้อ่านง่าย และนำความรู้ไปสร้างหน้าเว็บตัวอย่างที่ปรับตามขนาดหน้าจอได้

2. วิธีเขียนค่าสีใน CSS

CSS รองรับการระบุสีหลายรูปแบบ รูปแบบที่ใช้บ่อย ได้แก่ ชื่อสี เช่น red และ navy, รหัส Hex เช่น #2563eb, รูปแบบ RGB เช่น rgb(37, 99, 235) และรูปแบบ HSL เช่น hsl(221, 83%, 53%) แต่ละรูปแบบสามารถใช้กำหนดสีข้อความ เส้นขอบ หรือพื้นหลังได้ตามต้องการ

.title {
  color: #1d4ed8;
}

.card {
  background-color: #ffffff;
  border: 1px solid #dbe3ef;
}

.notice {
  color: rgb(153, 27, 27);
  background-color: hsl(0, 86%, 97%);
}

คุณสมบัติ color ใช้กำหนดสีของข้อความ ส่วน background-color ใช้กำหนดสีพื้นหลัง และ border ใช้กำหนดเส้นขอบ ในการเลือกสีสำหรับข้อความทั่วไป ควรให้ความสำคัญกับความแตกต่างระหว่างสีข้อความกับสีพื้นหลัง เพื่อให้ผู้ใช้มองเห็นและอ่านเนื้อหาได้สะดวก

สีแบบ Hex

รหัส Hex เริ่มต้นด้วยเครื่องหมาย # และมักประกอบด้วยเลขฐานสิบหก 6 ตัว โดยแบ่งเป็นค่าสีแดง สีเขียว และสีน้ำเงิน เช่น #2563eb รูปแบบย่อนี้อาจใช้ได้เมื่อแต่ละคู่มีตัวเลขซ้ำกัน เช่น #ffffff สามารถเขียนเป็น #fff ได้

สีแบบ RGB และ RGBA

RGB ระบุปริมาณสีแดง สีเขียว และสีน้ำเงิน โดยค่าทั่วไปอยู่ระหว่าง 0 ถึง 255 ส่วน RGBA เพิ่มค่า Alpha เพื่อควบคุมความโปร่งใส เช่น rgba(0, 0, 0, 0.2) หมายถึงสีดำที่มีความทึบ 20 เปอร์เซ็นต์

.card {
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.overlay {
  background-color: rgba(15, 23, 42, 0.65);
}

สีแบบ HSL

HSL ประกอบด้วย Hue หรือเฉดสี, Saturation หรือความอิ่มตัวของสี และ Lightness หรือความสว่าง รูปแบบนี้มีประโยชน์เมื่อเราต้องการสร้างสีหลายเฉดจากสีหลักเดียวกัน เช่น สีหลัก สีอ่อนสำหรับพื้นหลัง และสีเข้มสำหรับข้อความหรือปุ่ม

:root {
  --brand: hsl(221, 83%, 53%);
  --brand-dark: hsl(221, 83%, 40%);
  --brand-light: hsl(221, 90%, 96%);
}

.button {
  background-color: var(--brand);
}

.button:hover {
  background-color: var(--brand-dark);
}

แนวทางที่ช่วยให้ดูแลสีได้ง่ายกำหนดสีหลักไว้ใน CSS Custom Properties ภายใน :root แล้วนำตัวแปรไปใช้ซ้ำ จะช่วยให้เปลี่ยนชุดสีของเว็บไซต์ได้จากจุดเดียว

3. สร้างสีพื้นหลังด้วย Background

background-color เหมาะสำหรับพื้นหลังสีเดียว ขณะที่ background-image ใช้กับภาพพื้นหลังหรือ Gradient ได้ หากต้องการสร้าง Hero Section ที่โดดเด่นโดยไม่ต้องใช้ภาพขนาดใหญ่ เราสามารถสร้างพื้นหลังไล่ระดับสีด้วย linear-gradient() ได้โดยตรง

.hero {
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  padding: 48px 24px;
  border-radius: 20px;
}

.soft-section {
  background: linear-gradient(180deg, #eff6ff, #ffffff);
}

.pattern-card {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
}

ตัวเลของศาใน linear-gradient() ใช้กำหนดทิศทางการไล่ระดับสี ตัวอย่าง 135deg จะทำให้สีเปลี่ยนไปตามแนวทแยง ส่วนการใช้สีอ่อนกับสีขาวสามารถช่วยแยกพื้นที่ของหน้าเว็บโดยไม่ทำให้เนื้อหาดูหนักเกินไป

ภาพพื้นหลังและการควบคุมขนาด

หากใช้ภาพเป็นพื้นหลัง คุณสมบัติ background-size: cover จะช่วยให้ภาพครอบคลุมพื้นที่ทั้งหมด แต่อาจตัดบางส่วนของภาพออกตามอัตราส่วนของกล่อง ส่วน background-position ใช้กำหนดตำแหน่งของภาพ และ background-repeat ใช้ควบคุมว่าภาพจะทำซ้ำหรือไม่

.banner {
  background-image: linear-gradient(
    rgba(15, 23, 42, 0.45),
    rgba(15, 23, 42, 0.45)
  ), url("banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  padding: 64px 24px;
}

เมื่อวางข้อความบนภาพพื้นหลัง ควรตรวจสอบว่าข้อความยังอ่านได้ชัดเจนในบริเวณที่มีทั้งส่วนสว่างและส่วนมืด การเพิ่มชั้นสีโปร่งใสไว้เหนือภาพเป็นวิธีหนึ่งที่ช่วยเพิ่มความชัดเจน แต่ควรตรวจสอบผลลัพธ์บนภาพจริงทุกขนาดหน้าจอ

4. เลือก Font Family ให้เหมาะกับภาษาไทย

font-family ใช้กำหนดตระกูลแบบอักษรที่เบราว์เซอร์จะพยายามใช้ตามลำดับ หากแบบอักษรแรกไม่มีในเครื่อง ระบบจะลองใช้แบบถัดไป จึงควรกำหนดรายการสำรองไว้เสมอ โดยเฉพาะเว็บไซต์ที่มีข้อความภาษาไทยและต้องแสดงผลได้บนหลายระบบปฏิบัติการ

body {
  font-family: "Noto Sans Thai", Tahoma, sans-serif;
}

code,
pre {
  font-family: Consolas, "Courier New", monospace;
}

ตัวอย่างนี้ระบุ Noto Sans Thai เป็นแบบอักษรหลัก ตามด้วย Tahoma และ sans-serif เป็นตัวเลือกสำรอง ส่วนโค้ดใช้แบบอักษร monospace เพื่อช่วยจัดแนวตัวอักษรให้เหมาะกับการอ่านคำสั่งโปรแกรม ทั้งนี้การใช้ชื่อแบบอักษรไม่ได้รับประกันว่าเครื่องของผู้ใช้จะมีแบบอักษรนั้นติดตั้งอยู่

5. ควบคุมขนาดและน้ำหนักตัวอักษร

font-size ใช้กำหนดขนาดตัวอักษร และ font-weight ใช้กำหนดน้ำหนัก เช่น 400 สำหรับน้ำหนักปกติ และ 700 สำหรับตัวหนาในแบบอักษรที่รองรับ ตัวเลขที่ใช้ได้จริงขึ้นอยู่กับไฟล์ฟอนต์ที่โหลดและความสามารถของแบบอักษรนั้น

h1 {
  font-size: 2.5rem;
  font-weight: 800;
}

h2 {
  font-size: 1.75rem;
  font-weight: 700;
}

p {
  font-size: 1rem;
  font-weight: 400;
}

หน่วย rem อ้างอิงขนาดตัวอักษรของ root element โดยทั่วไปคือ html จึงเหมาะสำหรับสร้างขนาดที่ปรับได้ตามการตั้งค่าของผู้ใช้ ส่วน px เป็นหน่วยที่กำหนดขนาดแบบพิกเซล CSS เหมาะกับงานที่ต้องการค่าตายตัวบางประเภท การเลือกใช้ควรคำนึงถึงการเข้าถึงและความยืดหยุ่นของเว็บไซต์

6. ทำให้ข้อความอ่านง่ายด้วย Line Height และ Letter Spacing

line-height ใช้กำหนดความสูงของบรรทัดข้อความ การตั้งค่าสูงเกินไปอาจทำให้เนื้อหากระจาย ส่วนค่าที่ต่ำเกินไปทำให้บรรทัดชิดกันจนอ่านยาก สำหรับข้อความบทความมักเริ่มทดลองด้วยค่า line-height ประมาณ 1.6 ถึง 1.9 แล้วปรับตามแบบอักษรและขนาดข้อความจริง

.article-body {
  font-size: 1rem;
  line-height: 1.8;
  color: #334155;
}

.eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

letter-spacing ใช้เพิ่มหรือลดระยะห่างระหว่างตัวอักษร โดยมักเห็นผลชัดกับข้อความภาษาอังกฤษที่ใช้เป็นป้ายกำกับสั้น ๆ แต่สำหรับภาษาไทยควรใช้ด้วยความระมัดระวัง เพราะการเพิ่มช่องว่างมากเกินไปอาจทำให้คำอ่านยากและดูไม่เป็นธรรมชาติ

7. จัดลำดับเนื้อหาด้วย Typography Scale

Typography Scale คือการกำหนดชุดขนาดตัวอักษรที่สัมพันธ์กัน เช่น ขนาดสำหรับหัวข้อหลัก หัวข้อรอง คำอธิบาย และข้อความทั่วไป เมื่อใช้ขนาดอย่างเป็นระบบ หน้าเว็บจะมีลำดับการอ่านที่ชัดเจน ผู้ใช้สามารถกวาดสายตาเพื่อหาเนื้อหาสำคัญได้ง่ายขึ้น

องค์ประกอบ	ตัวอย่างขนาด	การใช้งาน
หัวข้อหลัก	clamp(2rem, 5vw, 3.25rem)	หัวข้อ Hero หรือชื่อหน้า
หัวข้อระดับสอง	1.75rem	แบ่งส่วนเนื้อหาหลัก
หัวข้อระดับสาม	1.25rem	หัวข้อย่อยภายในส่วน
ข้อความทั่วไป	1rem	เนื้อหาที่ต้องอ่านต่อเนื่อง
ข้อความรอง	0.875rem	คำอธิบายหรือข้อมูลประกอบ

ค่าในตารางเป็นจุดเริ่มต้นสำหรับทดลอง ไม่ใช่กฎตายตัว ควรตรวจสอบความเหมาะสมกับแบบอักษรภาษาไทย ความยาวของข้อความ และขนาดหน้าจอจริง โดยเฉพาะหัวข้อที่มีข้อความยาวซึ่งอาจตัดบรรทัดหลายครั้งบนมือถือ

8. ใช้ CSS Custom Properties สร้าง Design Tokens

เมื่อเว็บไซต์มีหลายหน้า การกำหนดค่าสีและระยะห่างซ้ำ ๆ ทำให้การดูแลรักษายากขึ้น CSS Custom Properties หรือ CSS Variables ช่วยเก็บค่าที่ใช้ร่วมกันไว้ในตัวแปร เช่น สีหลัก สีข้อความ สีพื้นหลัง และระยะห่างมาตรฐาน

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-text: #172033;
  --color-muted: #64748b;
  --color-surface: #ffffff;
  --color-page: #f3f6fb;
  --radius-card: 16px;
  --space-section: 24px;
}

body {
  color: var(--color-text);
  background: var(--color-page);
}

.card {
  padding: var(--space-section);
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

ตัวแปรช่วยให้เปลี่ยนสีหลักหรือระยะห่างได้จากจุดเดียว และสามารถนำไปต่อยอดกับระบบธีมได้ อย่างไรก็ตาม ควรตั้งชื่อตัวแปรให้สื่อความหมาย เช่น --color-primary แทนชื่อที่ผูกกับค่าปัจจุบันอย่าง --blue เพื่อให้เข้าใจง่ายเมื่อเปลี่ยนชุดสีในอนาคต

9. คำนึงถึง Contrast และการเข้าถึง

สีที่ดูสวยอาจอ่านยากหากข้อความและพื้นหลังมีความสว่างใกล้เคียงกัน ควรเลือกคู่สีที่มีความแตกต่างเพียงพอ โดยแนวทาง WCAG สำหรับข้อความทั่วไปกำหนดอัตราส่วน Contrast อย่างน้อย 4.5:1 ในระดับ AA และข้อความขนาดใหญ่มีเกณฑ์อย่างน้อย 3:1 ทั้งนี้ยังมีข้อกำหนดอื่นสำหรับองค์ประกอบและสถานะต่าง ๆ

อย่าใช้สีเพียงอย่างเดียวเพื่อบอกสถานะ เช่น แสดงข้อผิดพลาดด้วยสีแดงโดยไม่มีข้อความประกอบ ควรเพิ่มคำอธิบาย ไอคอน หรือสัญลักษณ์ที่เหมาะสม เพื่อให้ผู้ใช้ที่แยกสีได้ยากยังเข้าใจข้อมูลได้

ตรวจสอบก่อนเผยแพร่ทดสอบสีข้อความบนพื้นหลังจริง รวมถึงสถานะ hover, focus, disabled และข้อความในปุ่ม อย่าสมมติว่าสีที่อ่านง่ายบนหน้าจอหนึ่งจะชัดเจนเท่ากันในทุกอุปกรณ์

10. ปรับ Typography ให้เหมาะกับมือถือ

หน้าจอมือถือมีพื้นที่แนวนอนจำกัด หัวข้อที่ใหญ่เกินไปอาจตัดบรรทัดมากจนรบกวนการอ่าน ขณะที่ข้อความที่เล็กเกินไปทำให้ต้องเพ่ง การใช้ clamp() ช่วยกำหนดขนาดขั้นต่ำ ขนาดที่ปรับตาม viewport และขนาดสูงสุดได้ในคำสั่งเดียว

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
}

.article-content {
  width: min(100%, 720px);
  margin-inline: auto;
  line-height: 1.8;
}

clamp() รับค่าขั้นต่ำ ค่าที่ต้องการให้ปรับเปลี่ยน และค่าสูงสุดตามลำดับ ส่วน min() ในตัวอย่างช่วยจำกัดความกว้างของเนื้อหาไม่ให้เกิน 720px แต่ยังยืดหยุ่นตามพื้นที่ที่มี การกำหนดขนาดควรทดสอบกับข้อความภาษาไทยที่ยาวจริง ไม่ใช่ดูเฉพาะหัวข้อสั้น ๆ

11. สรุปแนวทางการออกแบบสีและตัวอักษร

เป้าหมาย	คุณสมบัติ CSS ที่เกี่ยวข้อง	แนวทาง
กำหนดสีข้อความ	color	ใช้สีที่อ่านง่ายบนพื้นหลัง
กำหนดพื้นหลัง	background-color, background-image	เลือกสีหรือ Gradient ให้เหมาะกับเนื้อหา
กำหนดแบบอักษร	font-family	ระบุฟอนต์สำรองสำหรับระบบที่ต่างกัน
กำหนดขนาดตัวอักษร	font-size, clamp()	สร้างลำดับขนาดและรองรับหน้าจอหลายขนาด
ควบคุมน้ำหนักตัวอักษร	font-weight	ใช้ตัวหนาเพื่อเน้นส่วนสำคัญอย่างพอดี
เพิ่มความอ่านง่าย	line-height, letter-spacing	ทดลองกับข้อความจริงและภาษาไทย
จัดการชุดสี	CSS Custom Properties	รวมค่าสีและระยะห่างไว้ในตัวแปรกลาง

12. ทดลองสร้างหน้าเว็บด้วยตัวเอง

ตัวอย่างต่อไปนี้เป็นหน้า HTML แบบเต็มที่มี CSS ภายในไฟล์เดียว สามารถบันทึกเป็น index.html แล้วเปิดด้วยเบราว์เซอร์ได้ทันที มีชุดสีพื้นฐาน การ์ดข้อมูล ปุ่มพร้อมสถานะ hover และ focus รวมถึงการปรับขนาดหัวข้อให้เหมาะกับหน้าจอ ทดลองแก้ตัวแปรสีใน :root และสังเกตการเปลี่ยนแปลงขององค์ประกอบต่าง ๆ

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color & Typography Studio</title>
  <style>
    :root {
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --accent: #7c3aed;
      --text: #172033;
      --muted: #64748b;
      --page: #f3f6fb;
      --surface: #ffffff;
      --border: #dbe3ef;
      --soft-blue: #eff6ff;
      --radius: 18px;
      --space: 24px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 28px 16px;
      font-family: "Noto Sans Thai", Tahoma, sans-serif;
      font-size: 16px;
      line-height: 1.75;
      color: var(--text);
      background: var(--page);
    }

    .container {
      width: min(100%, 1000px);
      margin-inline: auto;
    }

    .hero {
      padding: clamp(24px, 5vw, 52px);
      color: #ffffff;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      border-radius: 24px;
      margin-bottom: var(--space);
      box-shadow: 0 16px 38px rgba(37, 99, 235, 0.18);
    }

    .eyebrow {
      margin: 0 0 8px;
      color: #dbeafe;
      font-size: 0.875rem;
      font-weight: 700;
    }

    h1 {
      margin: 0 0 14px;
      font-size: clamp(2rem, 5vw, 3.25rem);
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .hero p {
      max-width: 680px;
      margin: 0;
      color: #eff6ff;
    }

    .section-heading {
      margin: 30px 0 14px;
      font-size: 1.5rem;
      line-height: 1.4;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .card {
      padding: 22px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
    }

    .swatch {
      width: 100%;
      height: 76px;
      margin-bottom: 16px;
      border-radius: 12px;
    }

    .swatch-blue {
      background: var(--primary);
    }

    .swatch-purple {
      background: var(--accent);
    }

    .swatch-gradient {
      background: linear-gradient(135deg, var(--primary), var(--accent));
    }

    .card h3 {
      margin: 0 0 8px;
      font-size: 1.15rem;
      line-height: 1.5;
    }

    .card p {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .code-label {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 7px;
      background: var(--soft-blue);
      color: var(--primary-dark);
      font-family: Consolas, monospace;
      font-size: 0.82rem;
      overflow-wrap: anywhere;
    }

    .sample {
      margin-top: var(--space);
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

    .sample h2 {
      margin: 0 0 8px;
      font-size: 1.5rem;
      line-height: 1.4;
    }

    .sample p {
      color: var(--muted);
      margin: 0 0 18px;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 10px 18px;
      border: 2px solid transparent;
      border-radius: 10px;
      background: var(--primary);
      color: #ffffff;
      text-decoration: none;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .button:hover {
      background: var(--primary-dark);
      transform: translateY(-2px);
    }

    .button:focus-visible {
      outline: 3px solid #93c5fd;
      outline-offset: 3px;
    }

    .button.secondary {
      background: #ffffff;
      color: var(--primary-dark);
      border-color: var(--border);
    }

    .button.secondary:hover {
      background: var(--soft-blue);
    }

    .message {
      margin-top: 18px;
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--soft-blue);
      color: #1e40af;
    }

    .footer {
      padding: 24px 8px 4px;
      text-align: center;
      color: var(--muted);
      font-size: 0.875rem;
    }

    @media (max-width: 760px) {
      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 520px) {
      body {
        padding: 16px 12px;
      }

      .grid {
        grid-template-columns: 1fr;
      }

      .card,
      .sample {
        padding: 18px;
      }

      .actions .button {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
    }
  </style>
</head>
<body>
  <main class="container">
    <header class="hero">
      <p class="eyebrow">HTML & CSS LEARNING LAB</p>
      <h1>สีสันและตัวอักษรที่ทำให้เว็บไซต์น่าอ่าน</h1>
      <p>ทดลองใช้ชุดสี พื้นหลังไล่ระดับ และ Typography เพื่อสร้างหน้าเว็บที่ดูสะอาด อ่านง่าย และปรับตามขนาดหน้าจอได้</p>
    </header>

    <h2 class="section-heading">ตัวอย่างชุดสี</h2>
    <section class="grid" aria-label="ตัวอย่างชุดสี">
      <article class="card">
        <div class="swatch swatch-blue" aria-hidden="true"></div>
        <h3>Primary Blue</h3>
        <p>ใช้กับปุ่มหลัก ลิงก์ และส่วนที่ต้องการเน้น</p>
        <span class="code-label">var(--primary)</span>
      </article>

      <article class="card">
        <div class="swatch swatch-purple" aria-hidden="true"></div>
        <h3>Accent Purple</h3>
        <p>ใช้เพิ่มความแตกต่างให้ส่วนสำคัญของหน้าเว็บ</p>
        <span class="code-label">var(--accent)</span>
      </article>

      <article class="card">
        <div class="swatch swatch-gradient" aria-hidden="true"></div>
        <h3>Gradient Blend</h3>
        <p>ผสมสีสองเฉดเพื่อสร้างพื้นหลังที่มีมิติ</p>
        <span class="code-label">linear-gradient()</span>
      </article>
    </section>

    <section class="sample" aria-labelledby="sample-title">
      <h2 id="sample-title">ทดลองปุ่มและข้อความ</h2>
      <p>ตัวอย่างนี้ใช้สีข้อความที่อ่านง่าย ระยะห่างบรรทัดที่เหมาะสม และปุ่มที่มีสถานะ Hover กับ Focus สำหรับผู้ใช้เมาส์และคีย์บอร์ด</p>
      <div class="actions">
        <button class="button" id="primaryButton" type="button">ทดลองปุ่มหลัก</button>
        <button class="button secondary" id="secondaryButton" type="button">ทดลองปุ่มรอง</button>
      </div>
      <div class="message" id="message" role="status" aria-live="polite">เลือกปุ่มเพื่อดูข้อความตัวอย่าง</div>
    </section>

    <footer class="footer">Color & Typography Studio · ออกแบบเพื่อการเรียนรู้ HTML และ CSS</footer>
  </main>

  <script>
    const message = document.getElementById('message');

    document.getElementById('primaryButton').addEventListener('click', function () {
      message.textContent = 'ปุ่มหลักใช้สี Primary เพื่อเน้นการกระทำที่สำคัญ';
    });

    document.getElementById('secondaryButton').addEventListener('click', function () {
      message.textContent = 'ปุ่มรองใช้พื้นหลังสีอ่อนและเส้นขอบ เพื่อแสดงลำดับความสำคัญที่รองลงมา';
    });
  </script>
</body>
</html>

13. แบบฝึกหัดท้ายบท

คำถามที่ 1: หากต้องการกำหนดสีข้อความ ควรใช้คุณสมบัติใด

คำตอบ: ใช้ color เช่น color: #172033; เพื่อกำหนดสีของข้อความ

คำถามที่ 2: ต้องการสร้างพื้นหลังไล่ระดับสีควรใช้คำสั่งใด

คำตอบ: ใช้ background-image หรือ background พร้อม linear-gradient() เช่น background: linear-gradient(135deg, #2563eb, #7c3aed);

คำถามที่ 3: line-height มีหน้าที่อะไร

คำตอบ: ใช้กำหนดความสูงของบรรทัดข้อความ ซึ่งช่วยควบคุมระยะห่างระหว่างบรรทัดและความอ่านง่ายของเนื้อหา

คำถามที่ 4: CSS Custom Properties มีประโยชน์อย่างไร

คำตอบ: ช่วยเก็บค่าสี ขนาด หรือระยะห่างที่ใช้ซ้ำไว้ในตัวแปร ทำให้แก้ไขและดูแลรูปแบบเว็บไซต์ได้สะดวกขึ้น

คำถามที่ 5: เหตุใดจึงต้องตรวจสอบ Contrast

คำตอบ: เพื่อให้ข้อความและองค์ประกอบสำคัญมองเห็นได้ชัดเจนบนพื้นหลัง และช่วยให้ผู้ใช้หลากหลายกลุ่มเข้าถึงเนื้อหาได้ดีขึ้น

ภารกิจฝึกปฏิบัติเปลี่ยนสีหลักใน :root ทดลองปรับ font-size และ line-height จากนั้นเปิดหน้าเว็บบนมือถือหรือปรับความกว้างเบราว์เซอร์ เพื่อดูว่า Layout และข้อความเปลี่ยนแปลงอย่างไร

การออกแบบที่ดีไม่ใช่การใช้สีให้มากที่สุด แต่คือการใช้สีและตัวอักษรเพื่อช่วยให้ผู้ใช้เข้าใจสิ่งสำคัญได้เร็วขึ้น

อ่านจนถึงระยะ 500px ก่อนท้ายหน้าและอยู่ในหน้านี้อย่างน้อย 5 นาที เพื่อรับ EXP วันละครั้ง

⏳ กำลังจับเวลาอ่าน...