พัฒนาเว็บไซต์ · WDC-01-23

Basic Responsive Web Design

หลักสูตร Basic Responsive Web Design เป็นการอบรมเทคนิคออกแบบเว็บให้แสดงผลดีทุกขนาดจอด้วย CSS ปัจจุบัน ทั้ง Mobile-first, Media Queries, Flexbox, CSS Grid, Container Queries และรูปภาพแบบ Responsive เหมาะกับ Web Designer และ Web Developer ที่เคยเขียน CSS มาบ้าง จบแล้วสร้างและเผยแพร่เว็บ Responsive ของตัวเองได้

อัปเดตล่าสุด 9 ต.ค. 2569

ราคาเริ่มต้น 3,510 บาท / ท่าน 3,900 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา12 ชั่วโมง · 2 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

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

หลักสูตรนี้สอนหลักการและเทคนิค Responsive ด้วย HTML และ CSS ที่เบราว์เซอร์รองรับในปัจจุบัน ตั้งแต่แนวคิด Mobile-first, Viewport, Media Queries, Fluid Layout, Flexbox และ CSS Grid ไปจนถึง Container Queries ตัวอักษรแบบยืดหยุ่น รูปภาพ ตาราง และเมนูบนมือถือ พร้อมตรวจ Accessibility และ Performance แล้วปิดท้ายด้วยการสร้างเว็บไซต์ Responsive จริง (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Basic)

สิ่งที่คุณจะได้รับ

เข้าใจหลักการทำงานของ Responsive Web Design และแนวคิด Mobile-first
ใช้ Viewport, Media Queries และ Feature Queries ได้ถูกต้อง
จัด Layout แบบ Responsive ด้วย Fluid Layout, Flexbox, CSS Grid และ Container Queries
ทำตัวอักษร รูปภาพ ตาราง และเมนูให้แสดงผลดีบนอุปกรณ์พกพา
ตรวจการแสดงผล Accessibility และ Performance บนหลายขนาดจอได้
สร้างและเผยแพร่เว็บไซต์ Responsive ได้ด้วยตัวเอง

หลักสูตรนี้เหมาะสำหรับ

ผู้ที่เคยสร้างเว็บไซต์ด้วย HTML และ CSS มาบ้าง
Web Designer ที่ต้องการออกแบบหน้าเว็บให้รองรับทุกขนาดจอ
Web Developer ที่ต้องการทำ Responsive ด้วย CSS โดยไม่พึ่ง Framework
ผู้ที่ดูแลเว็บไซต์องค์กรและต้องการปรับเว็บเดิมให้ใช้งานบนมือถือได้ดี

พื้นฐานของผู้เข้าอบรม

ใช้งานคอมพิวเตอร์และอินเทอร์เน็ตเบื้องต้นได้
เขียน HTML พื้นฐานได้ เช่น Heading, รายการ, ลิงก์ และรูปภาพ
เขียน CSS พื้นฐานได้ เช่น Selector, สี, ฟอนต์ และ Box Model
ไม่จำเป็นต้องมีพื้นฐาน JavaScript

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic Responsive Web Design อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Basic ฉบับนี้ยังคงแกนเดิมคือการทบทวน CSS หลักการ Responsive เทียบกับ Adaptive, Viewport, Media Queries, Box Model, Fixed, Fluid และ Elastic Layout, Flexbox, Grid, Multi-column, รูปภาพและตารางแบบ Responsive

และเปลี่ยนเทคนิคเดิมมาใช้ CSS ที่เบราว์เซอร์รองรับในปัจจุบัน ได้แก่ Feature Queries แทน Modernizr, Media Queries แบบ Range Syntax, Container Queries, clamp() และไฟล์รูปแบบ WebP กับ AVIF พร้อมเพิ่มการตรวจ Accessibility และ Core Web Vitals หลักสูตรนี้เน้น CSS ล้วน ต่างจาก Basic HTML+CSS และ Basic Responsive Web Design with Bootstrap 5 ผู้เรียนได้ Lab Guide และ Template เว็บไซต์ Responsive กลับไปใช้งานต่อ

Day 1 หลักการ Responsive และการจัด Layout

Section 1: Lab: รู้จัก Responsive Web Design

Responsive Web Design คืออะไร และทำไมทุกเว็บต้องรองรับ
Responsive, Adaptive และการตรวจอุปกรณ์ฝั่ง Server ต่างกันอย่างไร
แนวคิด Mobile-first และ Progressive Enhancement
Lab: วิเคราะห์เว็บจริงด้วย Device Mode ใน DevTools

Section 2: ทบทวน CSS สำหรับงาน Responsive

Selector, Cascade และ Specificity ที่ใช้บ่อย
box-sizing, CSS Reset และค่าเริ่มต้นของเบราว์เซอร์
หน่วยวัดแบบคงที่และแบบสัมพัทธ์ เช่น px, %, rem, vw และ dvh
Custom Properties สำหรับสีและระยะห่างทั้งเว็บ

Section 3: Viewport, Media Queries และ Feature Queries

meta viewport และความกว้างของ Viewport บนมือถือ
Media Queries แบบ Range Syntax เช่น (width >= 48rem)
เลือก Breakpoint จากเนื้อหาแทนรุ่นอุปกรณ์
ตรวจความสามารถของเบราว์เซอร์ด้วย @supports แทน Modernizr
Lab: หน้าเว็บที่เปลี่ยนการจัดวางตามขนาดจอ

Section 4: Lab: Fluid Layout

Fixed, Fluid, Elastic และ Adaptive Layout ข้อดีข้อเสีย
Container ที่จำกัดความกว้างด้วย max-width
ฟังก์ชัน min(), max() และ clamp() สำหรับขนาดที่ยืดหยุ่น
Lab: Layout บทความที่อ่านสบายทุกขนาดจอ

Section 5: Lab: Flexbox แบบ Responsive

Flex Container, Flex Item และการจัดแนว
flex-wrap, flex-basis และ gap สำหรับแถวที่ขึ้นบรรทัดใหม่เอง
สลับลำดับและทิศทางตามขนาดจอ
Lab: แถบเมนูและแถวการ์ดที่ยุบตามจอ

Section 6: Lab: CSS Grid แบบ Responsive

grid-template-columns, หน่วย fr และ gap
repeat(), auto-fit และ minmax() สำหรับ Grid ที่ไม่ต้องเขียน Media Query
เปลี่ยน grid-template-areas ตาม Breakpoint
Lab: Layout ทั้งหน้าที่มี Header, Sidebar และ Footer

Day 2 Component, สื่อ, คุณภาพ และ Workshop

Section 7: Lab: Container Queries

Media Queries กับ Container Queries ต่างกันอย่างไร
container-type และ @container
หน่วย cqi สำหรับขนาดที่อิงกับ Container
Lab: การ์ดชุดเดียวที่แสดงผลดีทั้งในคอลัมน์แคบและกว้าง

Section 8: ตัวอักษรและระยะห่างแบบยืดหยุ่น

ขนาดตัวอักษรแบบ Fluid ด้วย clamp()
ความยาวบรรทัดและระยะบรรทัดที่อ่านสบายสำหรับภาษาไทย
ระบบระยะห่างที่สม่ำเสมอด้วย Custom Properties
Multi-column Layout สำหรับเนื้อหายาว

Section 9: Lab: รูปภาพและสื่อแบบ Responsive

รูปที่ยืดหดตามพื้นที่ด้วย max-width, aspect-ratio และ object-fit
เลือกไฟล์ตามขนาดจอด้วย srcset และ sizes
เปลี่ยนการครอปภาพตามจอด้วย picture
ไฟล์ WebP และ AVIF, loading="lazy" และวิดีโอแบบ Responsive
Lab: Hero Banner และแกลเลอรีที่โหลดเร็ว

Section 10: Lab: ตารางและเมนูนำทางบนมือถือ

ตารางที่เลื่อนแนวนอนได้ และตารางที่แปลงเป็นการ์ดบนจอเล็ก
รูปแบบเมนูบนมือถือ เช่น ปุ่มเมนูและเมนูแบบซ่อนได้
Header แบบ sticky และขนาดปุ่มที่แตะง่าย
Lab: เมนูเว็บไซต์และตารางราคาที่ใช้ได้ทุกจอ

Section 11: Accessibility และ Performance

รองรับการซูมและผู้ใช้ที่ขยายตัวอักษร
Contrast, Focus และ prefers-reduced-motion
Core Web Vitals: LCP, CLS และ INP
Lab: ตรวจและแก้ปัญหาด้วย Lighthouse

Section 12: Workshop: เว็บไซต์ Responsive ตั้งแต่ต้น

วาง Wireframe แบบ Mobile-first สำหรับจอเล็กและจอใหญ่
สร้างหน้าเว็บด้วยเทคนิคที่เรียนมาทั้งหมด
ทดสอบบนมือถือจริงและหลายเบราว์เซอร์
เผยแพร่ผ่าน GitHub Pages หรือ Netlify
Workshop: นำเสนอเว็บไซต์ของตัวเองและรับคำแนะนำ

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

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

Responsive Design กับ Adaptive Design ต่างกันอย่างไร

Responsive Design ใช้หน้าเว็บชุดเดียวที่ยืดหดอย่างต่อเนื่องตามพื้นที่ ด้วย Layout แบบยืดหยุ่น Media Queries และ Container Queries จึงรองรับจอทุกขนาดรวมถึงอุปกรณ์ใหม่ที่ยังไม่มีในวันนี้ ส่วน Adaptive Design เตรียม Layout แบบคงที่ไว้หลายชุดสำหรับขนาดจอที่กำหนด แล้วเลือกชุดที่ใกล้ที่สุดมาแสดง ปัจจุบันเว็บส่วนใหญ่ใช้ Responsive เป็นหลัก และใช้แนวคิด Adaptive เฉพาะบางส่วนที่จำเป็น

เขียน Media Query ใน CSS อย่างไร

ใส่ meta viewport ในหน้า HTML ก่อน แล้วเขียน @media ตามด้วยเงื่อนไข เช่น @media (width >= 48rem) { ... } สำหรับจอที่กว้างตั้งแต่ 48rem ขึ้นไป รูปแบบ Range Syntax นี้อ่านง่ายกว่า min-width แบบเดิมและเบราว์เซอร์ปัจจุบันรองรับแล้ว แนวทาง Mobile-first คือเขียนสไตล์สำหรับจอเล็กเป็นค่าเริ่มต้น แล้วเพิ่ม Media Query สำหรับจอที่กว้างขึ้น และเลือก Breakpoint จากจุดที่เนื้อหาเริ่มดูไม่ดี ไม่ใช่จากรุ่นอุปกรณ์

ทำรูปภาพให้ Responsive ทำอย่างไร

ขั้นแรกกำหนด max-width: 100% และ height: auto ให้รูปยืดหดตามพื้นที่ ใช้ aspect-ratio และ object-fit คุมสัดส่วนไม่ให้รูปเสียทรง จากนั้นใช้ srcset กับ sizes ให้เบราว์เซอร์เลือกไฟล์ที่ขนาดพอดีกับจอ ใช้แท็ก picture เมื่อต้องการครอปภาพต่างกันบนมือถือและจอใหญ่ เลือกไฟล์ WebP หรือ AVIF ที่เล็กกว่า และใส่ loading="lazy" ให้รูปที่อยู่ด้านล่างของหน้า

Container Queries คืออะไร ต่างจาก Media Queries อย่างไร

Media Queries ตรวจขนาดของหน้าจอทั้งหน้า ส่วน Container Queries ตรวจขนาดของกล่องที่ครอบ Component อยู่ โดยกำหนด container-type ให้กล่องแม่แล้วเขียนเงื่อนไขด้วย @container Component เดียวกันจึงปรับรูปแบบเองได้ตามพื้นที่ที่ได้รับ เช่น การ์ดที่วางในคอลัมน์แคบกับคอลัมน์กว้างในหน้าเดียวกัน เบราว์เซอร์หลักรองรับแล้ว และหลักสูตรนี้มี Lab ให้ฝึกใช้งานจริง

หลักสูตร Basic Responsive Web Design เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับผู้ที่เคยสร้างเว็บด้วย HTML และ CSS มาบ้าง Web Designer และ Web Developer ที่ต้องการทำเว็บให้รองรับทุกขนาดจอด้วย CSS โดยไม่พึ่ง Framework และผู้ดูแลเว็บองค์กรที่ต้องการปรับเว็บเดิมให้ใช้งานบนมือถือได้ดี ควรเขียน HTML และ CSS พื้นฐานได้ ไม่จำเป็นต้องรู้ JavaScript ผู้ที่ยังไม่เคยเขียน HTML และ CSS ควรเริ่มจาก Basic HTML+CSS

เรียนจบหลักสูตร Basic Responsive Web Design แล้วทำอะไรได้บ้าง

ออกแบบและสร้างเว็บไซต์ที่แสดงผลดีทั้งมือถือ แท็บเล็ต และจอใหญ่ได้เอง วาง Layout ด้วย Flexbox และ CSS Grid ทำ Component ที่ปรับตัวเองด้วย Container Queries จัดการรูปภาพ ตาราง และเมนูบนมือถือ ตรวจ Accessibility และความเร็วด้วย Lighthouse และเผยแพร่เว็บผ่าน GitHub Pages หรือ Netlify พร้อม Template ไว้ใช้กับงานถัดไป