Web App - CSS Part 03

1. Responsive Web Design (RWD)

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

หลักการสำคัญของ RWD

Viewport Meta Tag: การกำหนดค่า viewport ใน <head> เป็นสิ่งแรกที่ต้องทำ เพื่อบอกให้เบราว์เซอร์ปรับขนาดหน้าเว็บให้พอดีกับความกว้างของอุปกรณ์

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Fluid Grids: การใช้หน่วยวัดแบบ Relative (เช่น %) แทน Absolute (เช่น px) ในการกำหนดความกว้างของ layout เพื่อให้องค์ประกอบต่างๆ ยืดหยุ่นตามขนาดหน้าจอ
Flexible Images: การทำให้รูปภาพสามารถยืดหดได้ตามขนาด container โดยมักใช้ CSS property max-width: 100%; เพื่อป้องกันไม่ให้รูปภาพขยายเกินขนาดจริงและล้นออกจากกรอบ

2. Media Queries

Media Queries คือหัวใจสำคัญของ RWD เป็นเครื่องมือใน CSS ที่ทำให้เราสามารถกำหนดสไตล์ที่แตกต่างกันตามเงื่อนไขของอุปกรณ์ เช่น ความกว้างของหน้าจอ (viewport), ความสูง, หรือการวางแนว (portrait/landscape)

เราใช้ @media rule เพื่อสร้าง "breakpoint" ซึ่งเป็นจุดที่ layout จะเปลี่ยนรูปแบบการแสดงผล

/* สำหรับหน้าจอที่มีความกว้างสูงสุด 600px (มือถือ) */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* สำหรับหน้าจอที่มีความกว้างอย่างน้อย 992px (เดสก์ท็อป) */
@media screen and (min-width: 992px) {
  .container {
    width: 80%;
  }
}

ตัวอย่าง Media Query: ลองปรับขนาดหน้าต่างเบราว์เซอร์ดู

สีพื้นหลังของกล่องนี้จะเปลี่ยนไปตามความกว้างของหน้าจอ

3. Bootstrap Framework

Bootstrap เป็น Front-end Framework ที่ได้รับความนิยมสูงสุด ช่วยให้นักพัฒนาสร้างเว็บไซต์แบบ Responsive ได้อย่างรวดเร็วและง่ายดาย โดยมีชุดเครื่องมือสำเร็จรูปทั้ง CSS และ JavaScript สำหรับสร้างองค์ประกอบต่างๆ บนหน้าเว็บ

ส่วนประกอบหลักของ Bootstrap

Grid System: ระบบ Grid แบบ 12 คอลัมน์ที่ยืดหยุ่นสูง ทำให้การจัดวาง layout สำหรับหน้าจอขนาดต่างๆ ทำได้ง่ายมาก
Components: มีส่วนประกอบ (Component) สำเร็จรูปมากมาย เช่น Navbar, Buttons, Cards, Forms, Modals ซึ่งออกแบบมาอย่างสวยงามและพร้อมใช้งาน
Utilities: มีคลาส (class) อำนวยความสะดวกสำหรับจัดการเรื่องต่างๆ เช่น ระยะห่าง (spacing), สี (colors), การจัดตำแหน่ง (alignment) โดยไม่ต้องเขียน CSS เอง

ตัวอย่างปุ่ม (Buttons) และ Grid System จาก Bootstrap

4. Font Awesome

Font Awesome เป็นชุดเครื่องมือที่รวบรวมไอคอน (Icon) แบบเวกเตอร์ไว้มากมาย ทำให้เราสามารถนำไอคอนไปใช้ในเว็บไซต์ได้อย่างง่ายดาย เพียงแค่เพิ่ม class เข้าไปในแท็ก <i>

การใช้งานทำได้โดยการเชื่อมโยงไฟล์ CSS ของ Font Awesome เข้ามาในโปรเจกต์ผ่าน CDN หรือดาวน์โหลดมาไว้ในเครื่อง

ตัวอย่างไอคอนจาก Font Awesome:

5. Google Fonts

Google Fonts เป็นบริการคลังฟอนต์ฟรีจาก Google ที่มีฟอนต์สวยงามให้เลือกใช้หลายพันแบบ รวมถึงฟอนต์ภาษาไทยด้วย เราสามารถนำฟอนต์เหล่านี้มาใช้ในเว็บไซต์ได้ง่ายๆ โดยการเพิ่มโค้ด <link> ที่ได้จาก Google Fonts เข้าไปในส่วน <head> ของ HTML แล้วเรียกใช้ผ่าน CSS property font-family

ตัวอย่างการใช้ฟอนต์ 'Kanit' จาก Google Fonts

ทำให้เราสามารถออกแบบเว็บไซต์ให้มีเอกลักษณ์และสวยงามยิ่งขึ้น