CSS Foundation

Day 1 - ชั่วโมงที่ 3: CSS Foundation and Responsive Form Layout

เป้าหมายของชั่วโมงนี้

หลังจบชั่วโมงที่สาม ผู้เรียนควรสามารถ:

1. เข้าใจว่า CSS ทำหน้าที่อะไรในหน้าเว็บ
2. ใช้ selector พื้นฐานเพื่อเลือก element ที่ต้องการตกแต่งได้
3. เข้าใจ box model ได้แก่ content, padding, border และ margin
4. จัด layout หน้าเว็บด้วย Flexbox และ Grid ในระดับพื้นฐานได้
5. ตกแต่ง form ให้ใช้งานง่ายและอ่านง่ายขึ้น
6. ทำ responsive layout เบื้องต้นสำหรับ mobile และ desktop ได้
7. เข้าใจ state สำคัญของ UI เช่น hover และ focus

ไฟล์ที่ใช้ในชั่วโมงนี้

CSS ทั้งหมดใส่ใน:

style.css

HTML ที่ต้องเพิ่ม class เช่น form-group หรือ form-row อยู่ใน:

index.html

ถ้า slide เป็น CSS ให้ระบุ:

File: style.css

โครงสร้างเวลา 60 นาที

Slide 1: จากโครงสร้าง HTML สู่หน้าที่อ่านง่าย

Hour 2 เราสร้าง index.html ที่มีส่วนหัว Form แจ้งปัญหา และส่วนท้ายแล้ว

Hour นี้เราจะสร้างไฟล์ style.css เพื่อ:

• จัดระยะห่างและสีของหน้า
• ทำให้ Form อ่านและกรอกได้ง่าย
• แสดง Focus เมื่อผู้ใช้ใช้ Keyboard
• ปรับ Layout ให้เหมาะกับมือถือและหน้าจอกว้าง

CSS เปลี่ยนการแสดงผล แต่ไม่เปลี่ยนความหมายของ HTML หรือข้อมูลใน Form

Slide 2: CSS ทำงานร่วมกับ HTML อย่างไร

CSS ย่อมาจาก Cascading Style Sheets ใช้กำหนดหน้าตาและการจัดวางของ HTML

• HTML สร้างหัวข้อด้วย <h1>
• CSS ใช้ Selector h1 เลือกหัวข้อนั้น แล้วเปลี่ยนสีด้วย color

CSS เปลี่ยนเฉพาะหน้าตา ข้อความ “รายการปัญหา” และความหมายของ <h1> ยังเหมือนเดิม

Slide 3: เชื่อม style.css เข้ากับหน้าเว็บ

project/
  index.html
  style.css

+<link rel="stylesheet" href="style.css" />

หากชื่อไฟล์หรือ Path ไม่ตรง Browser จะเปิด HTML ได้ แต่ Style จะไม่แสดง

Slide 4: CSS Rule และ Selector

selector {
  property: value;
}

h1 {
  color: #0f172a;
  font-size: 32px;
}

• h1 คือ Selector ที่เลือก Element
• color และ font-size คือ Properties
• ค่าด้านหลัง : คือ Values

Selector แบบ Tag เช่น h1 เลือกทุก Tag ชนิดนั้น ส่วน Selector แบบ Class เช่น .form-group เลือกทุก Element ที่มี Class ตรงกัน

Slide 5: เข้าใจ Box Model ก่อนจัดระยะห่าง

ทุก Element บนหน้าเว็บมีลักษณะเป็นกล่อง

• Content คือข้อความหรือเนื้อหาด้านใน
• Padding คือระยะจาก Content ถึง Border
• Border คือขอบของกล่อง
• Margin คือระยะห่างจากกล่องอื่น

Slide 6: ตั้งค่า Box Model และล้างระยะเริ่มต้น

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

box-sizing: border-box ทำให้ Width ที่กำหนดรวม Padding และ Border อยู่ภายในกล่องแล้ว

* เลือกทุก Element ส่วน margin: 0 และ padding: 0 ล้างระยะห่างเริ่มต้นของ Browser จากนั้นเราจะกำหนดระยะที่ต้องการเองในแต่ละส่วน

Slide 7: กำหนด Style พื้นฐานของหน้า

body {
  font-family: Arial, sans-serif;
  background-color: #f6f7fb;
  color: #111827;
  line-height: 1.5;
}
 
main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
}

• width: 100% ให้ main ใช้พื้นที่เท่าที่หน้าจอมี
• max-width จำกัดความกว้างไม่ให้เนื้อหาอ่านยาก
• margin: 0 auto จัด main ให้อยู่กลางหน้า

เมื่อใช้ร่วมกับ box-sizing: border-box ค่า padding จะถูกรวมอยู่ภายในความกว้างของ main จึงไม่ดันหน้าให้กว้างเกิน Viewport

Slide 8: แยกส่วนหัวและพื้นที่ Form

header {
  background-color: #0f766e;
  color: #fff;
  padding: 32px 24px;
}
 
header h1 {
  margin-bottom: 8px;
}
 
section {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
}

สีพื้นและ Border ช่วยแยกพื้นที่ แต่ข้อความยังต้องมี Contrast เพียงพอให้อ่านง่าย

Slide 9: ตกแต่งส่วนท้ายของหน้า

footer {
  color: #64748b;
  font-size: 14px;
  padding: 24px;
  text-align: center;
}

text-align: center จัดข้อความไว้กึ่งกลาง ส่วนสีและขนาดตัวอักษรที่เบาลงช่วยให้ Footer อ่านได้โดยไม่เด่นกว่าส่วนหลัก

Slide 10: จัด Field ใน Form ให้เป็นกลุ่ม

fieldset {
  border: 0;
}
 
legend {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
}
 
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
 
label {
  font-weight: 600;
}

form-group ใช้ Style ชุดเดียวกับทุก Field ทำให้ Form มีรูปแบบสม่ำเสมอ

Slide 11: ตกแต่ง Input และ Textarea

input,
textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
  background-color: #fff;
}
 
textarea {
  resize: vertical;
}

• width: 100% ทำให้ Field กว้างตามพื้นที่ของ Form
• font: inherit ใช้ Font เดียวกับส่วนอื่นของหน้า
• resize: vertical ให้ผู้ใช้ขยาย Textarea ได้เฉพาะแนวตั้ง

Slide 12: แสดง Focus ให้รู้ว่ากำลังกรอก Field ใด

input:focus,
textarea:focus {
  outline: 3px solid #99f6e4;
  border-color: #0f766e;
}

:focus คือ State ที่เกิดขึ้นเมื่อผู้ใช้คลิกหรือใช้ Keyboard มายัง Field

ลองกด Tab เพื่อเลื่อนผ่านแต่ละ Field หากไม่เห็นตำแหน่ง Focus ชัดเจน ผู้ใช้ Keyboard จะใช้งาน Form ได้ยาก

Slide 13: ทำให้ปุ่ม Submit มองเห็นและตอบสนอง

button {
  border: 0;
  border-radius: 6px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 700;
  background-color: #0f766e;
  color: #fff;
  cursor: pointer;
}
 
button:hover {
  background-color: #115e59;
}

:hover แสดงผลเมื่อ Pointer อยู่เหนือปุ่ม ช่วยบอกว่าปุ่มนี้โต้ตอบได้ แต่ข้อความบนปุ่มยังต้องบอกการทำงานให้ชัดเจนด้วย

Slide 14: เตรียมสอง Field สำหรับหน้าจอกว้าง

+<div class="form-row">   <div class="form-group">     <label for="reporterName">ชื่อผู้แจ้ง</label>     <input id="reporterName" name="reporterName" type="text" required />   </div>     <div class="form-group">     <label for="reporterEmail">อีเมลผู้แจ้ง</label>     <input id="reporterEmail" name="reporterEmail" type="email" required />   </div>+</div>

ตอนนี้หน้าตายังเหมือนเดิม เพราะเรายังไม่ได้กำหนด Style ให้ form-row

Slide 15: เปลี่ยนเป็นสองคอลัมน์ด้วย Media Query

@media (min-width: 720px) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

บนหน้าจอเล็ก Field ยังคงเรียงจากบนลงล่างตาม HTML เดิม เมื่อหน้าจอกว้างอย่างน้อย 720px Media Query จึงเปลี่ยน form-row เป็น Grid สองคอลัมน์

แนวทางนี้เรียกว่า Mobile-first เพราะ Style พื้นฐานรองรับจอเล็กก่อน แล้วค่อยเพิ่ม Layout สำหรับจอกว้าง

Slide 16: ผลลัพธ์เมื่อจบชั่วโมงนี้

เมื่อเปิด index.html ใน Browser หน้าตาจะได้ประมาณนี้ โดยชื่อและอีเมลจะแสดงสองคอลัมน์บนหน้าจอกว้าง