CSS Responsive Design และการ์ดบริการ

HTML & CSS

บทเรียน HTML และ CSS EP27 เรียนรู้ Responsive Design, Flexbox, CSS Grid, Media Queries และการสร้างการ์ดบริการที่นำไปประยุกต์ใช้กับเว็บไซต์ธุรกิจและพอร์ตโฟลิโอได้จริง พร้อมตัวอย่าง Full-page HTML ที่ทดลองได้ทันที

1. Responsive Design คืออะไร

2. เทคนิค CSS ที่ควรรู้

2.1 Flexbox สำหรับการจัดแนว

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.navigation a {
  text-decoration: none;
  padding: 8px 12px;
}

@media (max-width: 600px) {
  .navigation {
    flex-direction: column;
    align-items: stretch;
  }
}

2.2 CSS Grid สำหรับการ์ดหลายคอลัมน์

.service-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 230px), 1fr)
  );
  gap: 20px;
}

.service-card {
  min-width: 0;
  padding: 24px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #dbe4f0;
}

2.3 Media Queries สำหรับหน้าจอขนาดเล็ก

3. ตัวอย่างจริง: หน้าแสดงการ์ดบริการแบบ Responsive

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ตัวอย่างหน้าแสดงบริการด้วย Responsive Design">
  <title>Responsive Service Studio</title>
  <style>
    :root {
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --text: #172033;
      --muted: #64748b;
      --surface: #ffffff;
      --background: #f1f5f9;
      --border: #dbe4f0;
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: Tahoma, Arial, sans-serif;
      color: var(--text);
      background: var(--background);
      line-height: 1.7;
    }

    a {
      color: inherit;
    }

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

    .site-header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    .nav {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      color: var(--primary);
      font-size: 1.25rem;
      font-weight: 800;
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
    }

    .nav-links a {
      text-decoration: none;
      font-weight: 600;
    }

    .nav-links a:hover {
      color: var(--primary);
    }

    .hero {
      padding: clamp(48px, 8vw, 88px) 0;
      background: linear-gradient(135deg, #dbeafe, #f8fafc 75%);
    }

    .hero-inner {
      max-width: 760px;
      text-align: center;
      margin-inline: auto;
    }

    .eyebrow {
      color: var(--primary);
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    h1 {
      margin: 12px 0;
      font-size: clamp(2rem, 5vw, 3.5rem);
      line-height: 1.2;
    }

    .hero p {
      color: var(--muted);
      font-size: clamp(1rem, 2vw, 1.125rem);
      margin: 16px 0 24px;
    }

    .button {
      display: inline-block;
      padding: 12px 20px;
      border-radius: 10px;
      background: var(--primary);
      color: #ffffff;
      text-decoration: none;
      font-weight: 700;
      transition: background .2s ease, transform .2s ease;
    }

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

    .button:focus-visible,
    .nav-links a:focus-visible {
      outline: 3px solid #f59e0b;
      outline-offset: 4px;
    }

    .services {
      padding-block: 60px;
    }

    .section-heading {
      max-width: 680px;
      margin: 0 auto 30px;
      text-align: center;
    }

    .section-heading h2 {
      margin: 0 0 10px;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      line-height: 1.3;
    }

    .section-heading p {
      margin: 0;
      color: var(--muted);
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
      gap: 20px;
    }

    .service-card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
      transition: transform .2s ease, box-shadow .2s ease;
    }

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

    .service-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: #dbeafe;
      color: var(--primary);
      font-size: 1.4rem;
      font-weight: 800;
    }

    .service-card h3 {
      margin: 18px 0 8px;
      font-size: 1.25rem;
    }

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

    .service-card a {
      margin-top: auto;
      color: var(--primary);
      font-weight: 700;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }

    .contact {
      margin-bottom: 56px;
      padding: clamp(28px, 5vw, 48px);
      border-radius: var(--radius);
      background: #172033;
      color: #ffffff;
      text-align: center;
    }

    .contact h2 {
      margin-top: 0;
      font-size: clamp(1.5rem, 3vw, 2rem);
    }

    .contact p {
      max-width: 620px;
      margin: 0 auto 22px;
      color: #cbd5e1;
    }

    footer {
      padding: 22px 0;
      background: var(--surface);
      border-top: 1px solid var(--border);
      color: var(--muted);
      text-align: center;
    }

    @media (max-width: 600px) {
      .nav {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding-block: 14px;
      }

      .nav-links {
        gap: 12px;
      }

      .hero-inner {
        text-align: left;
      }

      .hero .button {
        text-align: center;
      }

      .service-card {
        padding: 20px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <nav class="container nav" aria-label="เมนูหลัก">
      <a class="brand" href="#home">Responsive Studio</a>
      <div class="nav-links">
        <a href="#services">บริการ</a>
        <a href="#contact">ติดต่อ</a>
      </div>
    </nav>
  </header>

  <main>
    <section class="hero" id="home">
      <div class="container hero-inner">
        <div class="eyebrow">Design for every screen</div>
        <h1>เว็บไซต์ที่ดี ต้องใช้งานง่ายทุกอุปกรณ์</h1>
        <p>สร้างประสบการณ์ออนไลน์ที่ชัดเจนและอ่านง่าย ด้วยการออกแบบที่ปรับตามหน้าจอของผู้ใช้งาน</p>
        <a class="button" href="#services">สำรวจบริการ</a>
      </div>
    </section>

    <section class="container services" id="services">
      <div class="section-heading">
        <h2>บริการของเรา</h2>
        <p>ตัวอย่างการจัดวางการ์ดด้วย CSS Grid ซึ่งจะปรับจำนวนคอลัมน์ตามพื้นที่ที่มี</p>
      </div>

      <div class="service-grid">
        <article class="service-card">
          <div class="service-icon" aria-hidden="true">01</div>
          <h3>Landing Page</h3>
          <p>หน้าเว็บไซต์สำหรับนำเสนอสินค้า แคมเปญ หรือบริการด้วยข้อความที่ตรงเป้าหมาย</p>
          <a href="#contact">สอบถามรายละเอียด</a>
        </article>

        <article class="service-card">
          <div class="service-icon" aria-hidden="true">02</div>
          <h3>Business Website</h3>
          <p>เว็บไซต์แนะนำธุรกิจที่จัดระเบียบข้อมูลบริการ ผลงาน และช่องทางติดต่อ</p>
          <a href="#contact">สอบถามรายละเอียด</a>
        </article>

        <article class="service-card">
          <div class="service-icon" aria-hidden="true">03</div>
          <h3>Responsive Design</h3>
          <p>ปรับการจัดวางให้เหมาะกับหน้าจอหลายขนาด พร้อมคำนึงถึงการเข้าถึง</p>
          <a href="#contact">สอบถามรายละเอียด</a>
        </article>
      </div>
    </section>

    <section class="container contact" id="contact">
      <h2>พร้อมเริ่มต้นโปรเจกต์หรือยัง?</h2>
      <p>เปลี่ยนข้อความตัวอย่างนี้ให้เป็นข้อเสนอของธุรกิจจริง และใส่ช่องทางติดต่อที่ตรวจสอบแล้ว</p>
      <a class="button" href="mailto:[email protected]">ส่งอีเมลสอบถาม</a>
    </section>
  </main>

  <footer>
    <div class="container">© 2026 Responsive Studio — ตัวอย่างสำหรับฝึกพัฒนาเว็บไซต์</div>
  </footer>
</body>
</html>

4. อ่านโค้ดตัวอย่างอย่างเป็นระบบ

4.1 ใช้ตัวแปร CSS เพื่อให้แก้ธีมได้ง่าย

4.2 ใช้ clamp() กับขนาดตัวอักษร

4.3 ใช้ min-width: 0 กับเนื้อหากริด

5. ปรับตัวอย่างให้เป็นเว็บไซต์สำหรับลูกค้าจริง

6. ตรวจสอบ Responsive Design ก่อนส่งมอบ

7. ต่อยอดเป็นโอกาสสร้างรายได้

แผนฝึกทำผลงานใน 5 ขั้นตอน

8. คำถามที่พบบ่อย

สรุป EP27

เรียนรู้ HTML และ CSS เพิ่มเติม