|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "92c4431eac70670b0450b02c1d11279a",
|
|
|
"translation_date": "2025-10-23T21:04:32+00:00",
|
|
|
"source_file": "3-terrarium/2-intro-to-css/README.md",
|
|
|
"language_code": "th"
|
|
|
}
|
|
|
-->
|
|
|
# โครงการ Terrarium ตอนที่ 2: แนะนำ CSS
|
|
|
|
|
|
|
|
|
> ภาพวาดโดย [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
จำได้ไหมว่า HTML terrarium ของคุณดูเรียบง่ายแค่ไหน? CSS คือสิ่งที่จะเปลี่ยนโครงสร้างธรรมดานั้นให้กลายเป็นสิ่งที่ดูน่าสนใจและสวยงาม
|
|
|
|
|
|
ถ้า HTML เปรียบเสมือนการสร้างโครงบ้าน CSS ก็คือทุกสิ่งที่ทำให้บ้านนั้นรู้สึกเหมือนบ้านจริงๆ - สีของผนัง การจัดวางเฟอร์นิเจอร์ แสงไฟ และการจัดวางห้องให้ไหลลื่นไปด้วยกัน ลองนึกถึงพระราชวังแวร์ซายที่เริ่มต้นจากการเป็นที่พักล่าสัตว์ธรรมดา แต่ด้วยการตกแต่งและการจัดวางที่พิถีพิถัน ทำให้มันกลายเป็นหนึ่งในอาคารที่งดงามที่สุดในโลก
|
|
|
|
|
|
วันนี้เราจะเปลี่ยน terrarium ของคุณจากที่ใช้งานได้ให้กลายเป็นงานที่ดูดี คุณจะได้เรียนรู้วิธีการจัดวางองค์ประกอบอย่างแม่นยำ ทำให้เลย์เอาต์ตอบสนองต่อขนาดหน้าจอที่แตกต่างกัน และสร้างความดึงดูดทางสายตาที่ทำให้เว็บไซต์น่าสนใจ
|
|
|
|
|
|
เมื่อจบบทเรียนนี้ คุณจะเห็นว่าการออกแบบ CSS อย่างมีกลยุทธ์สามารถปรับปรุงโครงการของคุณได้อย่างมากมาย มาเพิ่มสไตล์ให้กับ terrarium ของคุณกันเถอะ
|
|
|
|
|
|
## แบบทดสอบก่อนเรียน
|
|
|
|
|
|
[แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app/web/quiz/17)
|
|
|
|
|
|
## เริ่มต้นกับ CSS
|
|
|
|
|
|
CSS มักถูกมองว่าเป็นแค่ "การทำให้สิ่งต่างๆ ดูสวยงาม" แต่จริงๆ แล้วมันมีบทบาทที่กว้างกว่านั้น CSS เปรียบเสมือนผู้กำกับภาพยนตร์ - คุณควบคุมไม่เพียงแค่รูปลักษณ์ของทุกสิ่ง แต่ยังรวมถึงการเคลื่อนไหว การตอบสนองต่อการโต้ตอบ และการปรับตัวให้เข้ากับสถานการณ์ต่างๆ
|
|
|
|
|
|
CSS สมัยใหม่มีความสามารถที่น่าทึ่ง คุณสามารถเขียนโค้ดที่ปรับเลย์เอาต์โดยอัตโนมัติสำหรับโทรศัพท์ แท็บเล็ต และคอมพิวเตอร์เดสก์ท็อป คุณสามารถสร้างแอนิเมชันที่ลื่นไหลซึ่งนำสายตาผู้ใช้ไปยังจุดที่ต้องการได้ ผลลัพธ์ที่ได้จะน่าประทับใจเมื่อทุกอย่างทำงานร่วมกันอย่างลงตัว
|
|
|
|
|
|
> 💡 **เคล็ดลับมือโปร**: CSS มีการพัฒนาอย่างต่อเนื่องด้วยฟีเจอร์และความสามารถใหม่ๆ อย่าลืมตรวจสอบ [CanIUse.com](https://caniuse.com) เพื่อดูการรองรับของเบราว์เซอร์สำหรับฟีเจอร์ CSS ใหม่ๆ ก่อนใช้งานในโครงการจริง
|
|
|
|
|
|
**สิ่งที่เราจะทำในบทเรียนนี้:**
|
|
|
- **สร้าง** การออกแบบภาพที่สมบูรณ์สำหรับ terrarium ของคุณโดยใช้เทคนิค CSS สมัยใหม่
|
|
|
- **สำรวจ** แนวคิดพื้นฐาน เช่น cascade, inheritance และ CSS selectors
|
|
|
- **นำไปใช้** กลยุทธ์การจัดวางและการวางตำแหน่งที่ตอบสนอง
|
|
|
- **สร้าง** ภาชนะ terrarium โดยใช้รูปทรงและการออกแบบ CSS
|
|
|
|
|
|
### สิ่งที่ต้องเตรียม
|
|
|
|
|
|
คุณควรสร้างโครงสร้าง HTML สำหรับ terrarium ของคุณจากบทเรียนก่อนหน้าและเตรียมพร้อมที่จะเพิ่มสไตล์
|
|
|
|
|
|
> 📺 **แหล่งข้อมูลวิดีโอ**: ดูวิดีโอแนะนำที่มีประโยชน์นี้
|
|
|
>
|
|
|
> [](https://www.youtube.com/watch?v=6yIdOIV9p1I)
|
|
|
|
|
|
### การตั้งค่าไฟล์ CSS ของคุณ
|
|
|
|
|
|
ก่อนที่เราจะเริ่มเพิ่มสไตล์ เราต้องเชื่อมต่อ CSS กับ HTML ของเรา การเชื่อมต่อนี้จะบอกเบราว์เซอร์ว่าให้ไปที่ไหนเพื่อค้นหาคำสั่งการออกแบบสำหรับ terrarium ของเรา
|
|
|
|
|
|
ในโฟลเดอร์ terrarium ของคุณ สร้างไฟล์ใหม่ชื่อ `style.css` จากนั้นเชื่อมโยงไฟล์นี้ในส่วน `<head>` ของเอกสาร HTML:
|
|
|
|
|
|
```html
|
|
|
<link rel="stylesheet" href="./style.css" />
|
|
|
```
|
|
|
|
|
|
**สิ่งที่โค้ดนี้ทำ:**
|
|
|
- **สร้าง** การเชื่อมต่อระหว่างไฟล์ HTML และ CSS ของคุณ
|
|
|
- **บอก** เบราว์เซอร์ให้โหลดและใช้สไตล์จาก `style.css`
|
|
|
- **ใช้** แอตทริบิวต์ `rel="stylesheet"` เพื่อระบุว่าเป็นไฟล์ CSS
|
|
|
- **อ้างอิง** เส้นทางไฟล์ด้วย `href="./style.css"`
|
|
|
|
|
|
## ทำความเข้าใจ CSS Cascade
|
|
|
|
|
|
เคยสงสัยไหมว่าทำไม CSS ถึงเรียกว่า "Cascading" Style Sheets? สไตล์จะไหลลงมาเหมือนน้ำตก และบางครั้งก็เกิดการขัดแย้งกัน
|
|
|
|
|
|
ลองนึกถึงโครงสร้างคำสั่งในกองทัพ - คำสั่งทั่วไปอาจบอกว่า "ทหารทุกคนใส่ชุดสีเขียว" แต่คำสั่งเฉพาะสำหรับหน่วยของคุณอาจบอกว่า "ใส่ชุดสีฟ้าสำหรับพิธี" คำสั่งที่เฉพาะเจาะจงมากกว่าจะมีความสำคัญกว่า CSS ก็ใช้ตรรกะเดียวกันนี้ และการเข้าใจลำดับชั้นนี้จะช่วยให้การแก้ไขข้อผิดพลาดง่ายขึ้นมาก
|
|
|
|
|
|
### ทดลองกับลำดับความสำคัญของ Cascade
|
|
|
|
|
|
มาลองดูการทำงานของ cascade โดยสร้างความขัดแย้งของสไตล์กันเถอะ ก่อนอื่น เพิ่มสไตล์แบบ inline ในแท็ก `<h1>` ของคุณ:
|
|
|
|
|
|
```html
|
|
|
<h1 style="color: red">My Terrarium</h1>
|
|
|
```
|
|
|
|
|
|
**สิ่งที่โค้ดนี้ทำ:**
|
|
|
- **ใช้** สีแดงโดยตรงกับองค์ประกอบ `<h1>` โดยใช้สไตล์แบบ inline
|
|
|
- **ใช้** แอตทริบิวต์ `style` เพื่อฝัง CSS โดยตรงใน HTML
|
|
|
- **สร้าง** กฎสไตล์ที่มีลำดับความสำคัญสูงสุดสำหรับองค์ประกอบนี้โดยเฉพาะ
|
|
|
|
|
|
จากนั้นเพิ่มกฎนี้ในไฟล์ `style.css` ของคุณ:
|
|
|
|
|
|
```css
|
|
|
h1 {
|
|
|
color: blue;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**ในโค้ดด้านบน เราได้:**
|
|
|
- **กำหนด** กฎ CSS ที่กำหนดเป้าหมายองค์ประกอบ `<h1>` ทั้งหมด
|
|
|
- **ตั้งค่า** สีข้อความเป็นสีน้ำเงินโดยใช้สไตล์ชีตภายนอก
|
|
|
- **สร้าง** กฎที่มีลำดับความสำคัญต่ำกว่าสไตล์แบบ inline
|
|
|
|
|
|
✅ **ตรวจสอบความรู้**: สีใดที่แสดงในแอปเว็บของคุณ? ทำไมสีนี้ถึงชนะ? คุณสามารถคิดถึงสถานการณ์ที่คุณอาจต้องการแทนที่สไตล์ได้หรือไม่?
|
|
|
|
|
|
> 💡 **ลำดับความสำคัญของ CSS (จากสูงไปต่ำ):**
|
|
|
> 1. **สไตล์แบบ inline** (แอตทริบิวต์ style)
|
|
|
> 2. **IDs** (#myId)
|
|
|
> 3. **Classes** (.myClass) และแอตทริบิวต์
|
|
|
> 4. **ตัวเลือกองค์ประกอบ** (h1, div, p)
|
|
|
> 5. **ค่าเริ่มต้นของเบราว์เซอร์**
|
|
|
|
|
|
## การทำงานของ CSS Inheritance
|
|
|
|
|
|
CSS inheritance ทำงานเหมือนพันธุกรรม - องค์ประกอบจะรับคุณสมบัติบางอย่างจากองค์ประกอบแม่ของมัน หากคุณตั้งค่าฟอนต์ในองค์ประกอบ body ข้อความทั้งหมดภายในจะใช้ฟอนต์เดียวกันโดยอัตโนมัติ มันคล้ายกับลักษณะใบหน้าที่โดดเด่นของครอบครัวที่ส่งต่อกันมาหลายรุ่นโดยไม่ต้องระบุสำหรับแต่ละบุคคล
|
|
|
|
|
|
อย่างไรก็ตาม ไม่ใช่ทุกอย่างที่ได้รับการสืบทอด สไตล์ข้อความ เช่น ฟอนต์และสีจะได้รับการสืบทอด แต่คุณสมบัติการจัดวาง เช่น ระยะขอบและเส้นขอบจะไม่ได้รับการสืบทอด เช่นเดียวกับที่ลูกอาจได้รับลักษณะทางกายภาพแต่ไม่ใช่รสนิยมการแต่งตัวของพ่อแม่
|
|
|
|
|
|
### สังเกตการสืบทอดฟอนต์
|
|
|
|
|
|
มาดูการสืบทอดโดยตั้งค่าฟอนต์ในองค์ประกอบ `<body>`:
|
|
|
|
|
|
```css
|
|
|
body {
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**การทำงานของโค้ดนี้:**
|
|
|
- **ตั้งค่า** ฟอนต์สำหรับทั้งหน้าโดยกำหนดเป้าหมายองค์ประกอบ `<body>`
|
|
|
- **ใช้** ฟอนต์สำรองเพื่อความเข้ากันได้ของเบราว์เซอร์ที่ดีขึ้น
|
|
|
- **ใช้** ฟอนต์ระบบที่ทันสมัยซึ่งดูดีในระบบปฏิบัติการต่างๆ
|
|
|
- **ทำให้**องค์ประกอบลูกทั้งหมดรับฟอนต์นี้โดยอัตโนมัติ เว้นแต่จะถูกแทนที่โดยเฉพาะ
|
|
|
|
|
|
เปิดเครื่องมือพัฒนาเบราว์เซอร์ของคุณ (F12) ไปที่แท็บ Elements และตรวจสอบองค์ประกอบ `<h1>` ของคุณ คุณจะเห็นว่ามันรับฟอนต์จาก body:
|
|
|
|
|
|
|
|
|
|
|
|
✅ **ทดลอง**: ลองตั้งค่าคุณสมบัติที่สามารถสืบทอดได้อื่นๆ ใน `<body>` เช่น `color`, `line-height` หรือ `text-align` จะเกิดอะไรขึ้นกับหัวข้อและองค์ประกอบอื่นๆ ของคุณ?
|
|
|
|
|
|
> 📝 **คุณสมบัติที่สามารถสืบทอดได้**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
|
|
|
>
|
|
|
> **คุณสมบัติที่ไม่สามารถสืบทอดได้**: `margin`, `padding`, `border`, `width`, `height`, `position`
|
|
|
|
|
|
## การใช้ CSS Selectors อย่างเชี่ยวชาญ
|
|
|
|
|
|
CSS selectors คือวิธีการกำหนดเป้าหมายองค์ประกอบเฉพาะเพื่อการออกแบบ พวกมันทำงานเหมือนการให้คำแนะนำที่แม่นยำ - แทนที่จะพูดว่า "บ้าน" คุณอาจพูดว่า "บ้านสีฟ้าที่มีประตูสีแดงบนถนนเมเปิล"
|
|
|
|
|
|
CSS มีวิธีการต่างๆ ในการกำหนดเป้าหมาย และการเลือก selector ที่เหมาะสมก็เหมือนการเลือกเครื่องมือที่เหมาะสมสำหรับงาน บางครั้งคุณต้องการออกแบบประตูทุกบานในละแวกนั้น และบางครั้งแค่ประตูบานเดียว
|
|
|
|
|
|
### Element Selectors (Tags)
|
|
|
|
|
|
Element selectors กำหนดเป้าหมายองค์ประกอบ HTML โดยใช้ชื่อแท็ก เหมาะสำหรับการตั้งค่าสไตล์พื้นฐานที่ใช้ทั่วทั้งหน้า:
|
|
|
|
|
|
```css
|
|
|
body {
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
color: #3a241d;
|
|
|
text-align: center;
|
|
|
font-size: 2.5rem;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**การทำงานของสไตล์เหล่านี้:**
|
|
|
- **ตั้งค่า** การพิมพ์ที่สม่ำเสมอทั่วทั้งหน้าโดยใช้ selector `body`
|
|
|
- **ลบ** ระยะขอบและการเว้นระยะห่างเริ่มต้นของเบราว์เซอร์เพื่อการควบคุมที่ดีขึ้น
|
|
|
- **ออกแบบ** องค์ประกอบหัวข้อทั้งหมดด้วยสี การจัดตำแหน่ง และการเว้นระยะห่าง
|
|
|
- **ใช้** หน่วย `rem` สำหรับขนาดฟอนต์ที่ปรับขยายได้และเข้าถึงได้
|
|
|
|
|
|
ในขณะที่ element selectors ทำงานได้ดีสำหรับการออกแบบทั่วไป คุณจะต้องใช้ selectors ที่เฉพาะเจาะจงมากขึ้นเพื่อออกแบบส่วนประกอบเฉพาะ เช่น พืชใน terrarium ของคุณ
|
|
|
|
|
|
### ID Selectors สำหรับองค์ประกอบเฉพาะ
|
|
|
|
|
|
ID selectors ใช้สัญลักษณ์ `#` และกำหนดเป้าหมายองค์ประกอบที่มีแอตทริบิวต์ `id` เฉพาะ เนื่องจาก ID ต้องไม่ซ้ำกันในหน้า จึงเหมาะสำหรับการออกแบบองค์ประกอบเฉพาะ เช่น ภาชนะพืชด้านซ้ายและขวาใน terrarium ของเรา
|
|
|
|
|
|
มาสร้างสไตล์สำหรับภาชนะด้านข้างของ terrarium ที่พืชจะอยู่กันเถอะ:
|
|
|
|
|
|
```css
|
|
|
#left-container {
|
|
|
background-color: #f5f5f5;
|
|
|
width: 15%;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
height: 100vh;
|
|
|
padding: 1rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
#right-container {
|
|
|
background-color: #f5f5f5;
|
|
|
width: 15%;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
height: 100vh;
|
|
|
padding: 1rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**สิ่งที่โค้ดนี้ทำ:**
|
|
|
- **จัดตำแหน่ง** ภาชนะที่ขอบซ้ายและขวาโดยใช้การจัดตำแหน่งแบบ `absolute`
|
|
|
- **ใช้** หน่วย `vh` (viewport height) สำหรับความสูงที่ตอบสนองและปรับให้เข้ากับขนาดหน้าจอ
|
|
|
- **ใช้** `box-sizing: border-box` เพื่อให้ padding รวมอยู่ในความกว้างทั้งหมด
|
|
|
- **ลบ** หน่วย `px` ที่ไม่จำเป็นออกจากค่าศูนย์เพื่อให้โค้ดสะอาดขึ้น
|
|
|
- **ตั้งค่า** สีพื้นหลังที่นุ่มนวลซึ่งดูสบายตากว่าสีเทาเข้ม
|
|
|
|
|
|
✅ **ความท้าทายด้านคุณภาพโค้ด**: สังเกตว่า CSS นี้ละเมิดหลักการ DRY (Don't Repeat Yourself) คุณสามารถปรับปรุงโค้ดโดยใช้ทั้ง ID และ class ได้หรือไม่?
|
|
|
|
|
|
**วิธีการปรับปรุง:**
|
|
|
```html
|
|
|
<div id="left-container" class="container"></div>
|
|
|
<div id="right-container" class="container"></div>
|
|
|
```
|
|
|
|
|
|
```css
|
|
|
.container {
|
|
|
background-color: #f5f5f5;
|
|
|
width: 15%;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
height: 100vh;
|
|
|
padding: 1rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
#left-container {
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
#right-container {
|
|
|
right: 0;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### Class Selectors สำหรับสไตล์ที่นำกลับมาใช้ใหม่
|
|
|
|
|
|
Class selectors ใช้สัญลักษณ์ `.` และเหมาะเมื่อคุณต้องการใช้สไตล์เดียวกันกับองค์ประกอบหลายๆ ตัว ต่างจาก ID classes สามารถนำกลับมาใช้ใหม่ได้ทั่วทั้ง HTML ของคุณ ทำให้เหมาะสำหรับรูปแบบการออกแบบที่สม่ำเสมอ
|
|
|
|
|
|
ใน terrarium ของเรา พืชแต่ละต้นต้องการสไตล์ที่คล้ายกัน แต่ยังต้องการการจัดตำแหน่งเฉพาะ เราจะใช้ class สำหรับสไตล์ที่ใช้ร่วมกันและ ID สำหรับการจัดตำแหน่งเฉพาะ
|
|
|
|
|
|
**นี่คือโครงสร้าง HTML สำหรับพืชแต่ละต้น:**
|
|
|
```html
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.th.png" />
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
**องค์ประกอบสำคัญที่อธิบาย:**
|
|
|
- **ใช้** `class="plant-holder"` สำหรับการออกแบบภาชนะที่สม่ำเสมอในพืชทั้งหมด
|
|
|
- **ใช้** `class="plant"` สำหรับการออกแบบและพฤติกรรมของภาพที่ใช้ร่วมกัน
|
|
|
- **รวม** `id="plant1"` ที่ไม่ซ้ำกันสำหรับการจัดตำแหน่งเฉพาะและการโต้ตอบ JavaScript
|
|
|
- **ให้** ข้อความ alt ที่อธิบายเพื่อการเข้าถึงสำหรับ screen reader
|
|
|
|
|
|
ตอนนี้เพิ่มสไตล์เหล่านี้ในไฟล์ `style.css` ของคุณ:
|
|
|
|
|
|
```css
|
|
|
.plant-holder {
|
|
|
position: relative;
|
|
|
height: 13%;
|
|
|
left: -0.6rem;
|
|
|
}
|
|
|
|
|
|
.plant {
|
|
|
position: absolute;
|
|
|
max-width: 150%;
|
|
|
max-height: 150%;
|
|
|
z-index: 2;
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.plant:hover {
|
|
|
transform: scale(1.05);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**การทำงานของสไตล์เหล่านี้:**
|
|
|
- **สร้าง** การจัดตำแหน่งแบบ relative สำหรับ plant holder เพื่อสร้างบริบทการจัดตำแหน่ง
|
|
|
- **ตั้งค่า** plant holder แต่ละตัวให้มีความสูง 13% เพื่อให้พืชทั้งหมดพอดีในแนวตั้งโดยไม่ต้องเลื่อน
|
|
|
- **เลื่อน** holder ไปทางซ้ายเล็กน้อยเพื่อให้พืชอยู่ตรงกลางภายในภาชนะ
|
|
|
- **อนุญาต** ให้พืชปรับขนาดได้ด้วยคุณสมบัติ `max-width` และ `max-height`
|
|
|
- **ใช้** `z-index` เพื่อวางพืชเหนือองค์ประกอบอื่นๆ ใน terrarium
|
|
|
- **เพิ่ม** เอฟเฟกต์ hover ที่ละเอียดอ่อนด้วย CSS transitions เพื่อการโต้ตอบที่ดีขึ้น
|
|
|
|
|
|
✅ **คิดวิเคราะห์**: ทำไมเราต้องใช้ทั้ง `.plant-holder` และ `.plant` selectors? จะเกิดอะไรขึ้นถ้าเราพยายามใช้แค่ตัวเดียว?
|
|
|
|
|
|
> 💡 **รูปแบบการออกแบบ**: ภาชนะ (`.plant-holder`) ควบคุมเลย์เอาต์และการจัดตำแหน่ง ในขณะที่เนื้อหา (`.plant`) ควบคุมรูปลักษณ์และการปรับขนาด การแยกส่วนนี้ทำให้โค้ดดูแลรักษาและยืดหยุ่นได้ง่ายขึ้น
|
|
|
|
|
|
## การทำความเข้าใจการจัดตำแหน่ง CSS
|
|
|
|
|
|
การจัดตำแหน่ง CSS เปรียบเสมือนการเป็นผู้กำกับเวทีสำหรับการแสดง - คุณกำหนดว่าแต่ละนักแสดงจะยืนอยู่ที่ไหนและเคลื่อนไหวอย่างไรบนเวที นักแสดงบางคนอาจอยู่ในตำแหน่งปกติ ในขณะที่บางคนต้องการการจัดตำแหน่งเฉพาะเพื่อสร้างความโดดเด่น
|
|
|
|
|
|
เมื่อคุณเข้าใจการจัดตำแหน่งแล้ว ความท้าทายในการจัดเลย์เอาต์หลายๆ อย่างจะกลายเป็นเรื่องง่ายขึ้น ต้องการแถบนำทางที่อยู่ด้านบนขณะที่ผู้ใช้เลื่อนหน้าจอใช่ไหม? การจัดตำแหน่งช่วยได้ ต้องการ tooltip ที่ปรากฏในตำแหน่งเฉพาะใช่ไหม? นั่นก็เป็นหน้าที่ของการจัดตำแหน่งเช่นกัน
|
|
|
|
|
|
### ค่าการจัดตำแหน่งทั้งห้า
|
|
|
|
|
|
| ค่า Position | พฤติกรรม | กรณีการใช้งาน |
|
|
|
|---------------|-----------|----------------|
|
|
|
| `static` | การจัดวางเริ่มต้น ไม่สนใจ top/left/right/bottom | เลย์เอาต์เอกสารปกติ |
|
|
|
| `relative` | จัดตำแหน่งตามตำแหน่งปกติ | การปรับเล็กน้อย สร้างบริบทการจัดตำแหน่ง |
|
|
|
| `absolute` | จัดตำแหน่งตาม ancestor ที่มีการจัดตำแหน่ง | การวางตำแหน่งที่แม่นยำ การซ้อนทับ |
|
|
|
| `fixed` | จัดตำแหน่งตาม viewport | แถบนำทาง องค์ประกอบลอย |
|
|
|
| `sticky` | สลับระหว่าง relative
|
|
|
มาสร้างโหลเทอร์ราเรียมทีละส่วนกันเถอะ แต่ละส่วนจะใช้การกำหนดตำแหน่งแบบสัมบูรณ์และการปรับขนาดด้วยเปอร์เซ็นต์เพื่อการออกแบบที่ตอบสนอง:
|
|
|
|
|
|
```css
|
|
|
.jar-walls {
|
|
|
height: 80%;
|
|
|
width: 60%;
|
|
|
background: #d1e1df;
|
|
|
border-radius: 1rem;
|
|
|
position: absolute;
|
|
|
bottom: 0.5%;
|
|
|
left: 20%;
|
|
|
opacity: 0.5;
|
|
|
z-index: 1;
|
|
|
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.jar-top {
|
|
|
width: 50%;
|
|
|
height: 5%;
|
|
|
background: #d1e1df;
|
|
|
position: absolute;
|
|
|
bottom: 80.5%;
|
|
|
left: 25%;
|
|
|
opacity: 0.7;
|
|
|
z-index: 1;
|
|
|
border-radius: 0.5rem 0.5rem 0 0;
|
|
|
}
|
|
|
|
|
|
.jar-bottom {
|
|
|
width: 50%;
|
|
|
height: 1%;
|
|
|
background: #d1e1df;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 25%;
|
|
|
opacity: 0.7;
|
|
|
border-radius: 0 0 0.5rem 0.5rem;
|
|
|
}
|
|
|
|
|
|
.dirt {
|
|
|
width: 60%;
|
|
|
height: 5%;
|
|
|
background: #3a241d;
|
|
|
position: absolute;
|
|
|
border-radius: 0 0 1rem 1rem;
|
|
|
bottom: 1%;
|
|
|
left: 20%;
|
|
|
opacity: 0.7;
|
|
|
z-index: -1;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**ทำความเข้าใจการสร้างเทอร์ราเรียม:**
|
|
|
- **ใช้** ขนาดที่อิงตามเปอร์เซ็นต์เพื่อการปรับขนาดที่ตอบสนองต่อทุกขนาดหน้าจอ
|
|
|
- **กำหนดตำแหน่ง** องค์ประกอบแบบสัมบูรณ์เพื่อจัดเรียงและวางซ้อนกันอย่างแม่นยำ
|
|
|
- **ปรับใช้** ค่า opacity ต่างๆ เพื่อสร้างเอฟเฟกต์ความโปร่งใสของแก้ว
|
|
|
- **ใช้** `z-index` เพื่อจัดลำดับชั้นให้องค์ประกอบของพืชอยู่ภายในโหล
|
|
|
- **เพิ่ม** เงาแบบกล่องและมุมโค้งที่ละเอียดอ่อนเพื่อให้ดูสมจริงยิ่งขึ้น
|
|
|
|
|
|
### การออกแบบที่ตอบสนองด้วยเปอร์เซ็นต์
|
|
|
|
|
|
สังเกตว่าขนาดทั้งหมดใช้เปอร์เซ็นต์แทนค่าพิกเซลที่ตายตัว:
|
|
|
|
|
|
**เหตุผลที่สำคัญ:**
|
|
|
- **ช่วยให้** เทอร์ราเรียมปรับขนาดได้อย่างสัดส่วนบนหน้าจอทุกขนาด
|
|
|
- **รักษา** ความสัมพันธ์ทางภาพระหว่างส่วนประกอบของโหล
|
|
|
- **มอบ** ประสบการณ์ที่สม่ำเสมอจากโทรศัพท์มือถือไปจนถึงจอคอมพิวเตอร์ขนาดใหญ่
|
|
|
- **ทำให้** การออกแบบปรับตัวได้โดยไม่ทำให้เลย์เอาต์เสียหาย
|
|
|
|
|
|
### หน่วย CSS ในการใช้งาน
|
|
|
|
|
|
เราใช้หน่วย `rem` สำหรับมุมโค้ง (border-radius) ซึ่งปรับขนาดตามขนาดฟอนต์ของราก (root font size) เพื่อสร้างการออกแบบที่เข้าถึงได้มากขึ้นและเคารพการตั้งค่าฟอนต์ของผู้ใช้ เรียนรู้เพิ่มเติมเกี่ยวกับ [หน่วย CSS แบบสัมพัทธ์](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ในเอกสารสเปคอย่างเป็นทางการ
|
|
|
|
|
|
✅ **การทดลองทางภาพ**: ลองปรับค่าเหล่านี้และสังเกตผลลัพธ์:
|
|
|
- เปลี่ยนค่า opacity ของโหลจาก 0.5 เป็น 0.8 – สิ่งนี้ส่งผลต่อรูปลักษณ์ของแก้วอย่างไร?
|
|
|
- ปรับสีดินจาก `#3a241d` เป็น `#8B4513` – ผลกระทบทางภาพเป็นอย่างไร?
|
|
|
- เปลี่ยนค่า `z-index` ของดินเป็น 2 – สิ่งนี้ส่งผลต่อการจัดลำดับชั้นอย่างไร?
|
|
|
|
|
|
---
|
|
|
|
|
|
## ความท้าทาย GitHub Copilot Agent 🚀
|
|
|
|
|
|
ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้:
|
|
|
|
|
|
**คำอธิบาย:** สร้าง CSS animation ที่ทำให้พืชในเทอร์ราเรียมแกว่งไปมาเบาๆ เพื่อจำลองเอฟเฟกต์ลมธรรมชาติ สิ่งนี้จะช่วยให้คุณฝึกการใช้ CSS animations, transforms และ keyframes พร้อมทั้งเพิ่มความน่าสนใจให้กับเทอร์ราเรียมของคุณ
|
|
|
|
|
|
**คำสั่ง:** เพิ่ม CSS keyframe animations เพื่อทำให้พืชในเทอร์ราเรียมแกว่งเบาๆ จากด้านหนึ่งไปอีกด้านหนึ่ง สร้างแอนิเมชันการแกว่งที่หมุนพืชแต่ละต้นเล็กน้อย (2-3 องศา) ซ้ายและขวา โดยมีระยะเวลา 3-4 วินาที และนำไปใช้กับคลาส `.plant` ให้แน่ใจว่าแอนิเมชันวนซ้ำอย่างไม่มีที่สิ้นสุดและมีฟังก์ชัน easing เพื่อการเคลื่อนไหวที่ดูเป็นธรรมชาติ
|
|
|
|
|
|
เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่
|
|
|
|
|
|
## 🚀 ความท้าทาย: เพิ่มการสะท้อนของแก้ว
|
|
|
|
|
|
พร้อมที่จะเพิ่มความสมจริงให้กับเทอร์ราเรียมของคุณด้วยการสะท้อนของแก้วหรือยัง? เทคนิคนี้จะเพิ่มความลึกและความสมจริงให้กับการออกแบบ
|
|
|
|
|
|
คุณจะสร้างไฮไลต์ที่ละเอียดอ่อนเพื่อจำลองแสงที่สะท้อนจากพื้นผิวแก้ว วิธีนี้คล้ายกับที่จิตรกรยุคเรอเนซองส์อย่าง Jan van Eyck ใช้แสงและการสะท้อนเพื่อทำให้แก้วที่วาดดูมีมิติสามมิติ นี่คือสิ่งที่คุณต้องการ:
|
|
|
|
|
|
|
|
|
|
|
|
**ความท้าทายของคุณ:**
|
|
|
- **สร้าง** รูปทรงวงรีสีขาวหรือสีอ่อนสำหรับการสะท้อนของแก้ว
|
|
|
- **วางตำแหน่ง** รูปทรงเหล่านี้อย่างมีกลยุทธ์ทางด้านซ้ายของโหล
|
|
|
- **ปรับใช้** ค่า opacity และเอฟเฟกต์เบลอที่เหมาะสมเพื่อการสะท้อนแสงที่สมจริง
|
|
|
- **ใช้** `border-radius` เพื่อสร้างรูปทรงที่ดูเป็นธรรมชาติคล้ายฟองอากาศ
|
|
|
- **ทดลอง** ใช้ gradients หรือ box-shadows เพื่อเพิ่มความสมจริง
|
|
|
|
|
|
## แบบทดสอบหลังการบรรยาย
|
|
|
|
|
|
[แบบทดสอบหลังการบรรยาย](https://ff-quizzes.netlify.app/web/quiz/18)
|
|
|
|
|
|
## ขยายความรู้ CSS ของคุณ
|
|
|
|
|
|
CSS อาจดูซับซ้อนในตอนแรก แต่การเข้าใจแนวคิดหลักเหล่านี้จะช่วยสร้างพื้นฐานที่แข็งแกร่งสำหรับเทคนิคขั้นสูง
|
|
|
|
|
|
**พื้นที่การเรียนรู้ CSS ถัดไปของคุณ:**
|
|
|
- **Flexbox** - ช่วยให้ง่ายต่อการจัดตำแหน่งและการกระจายองค์ประกอบ
|
|
|
- **CSS Grid** - มอบเครื่องมือที่ทรงพลังสำหรับการสร้างเลย์เอาต์ที่ซับซ้อน
|
|
|
- **CSS Variables** - ลดการทำซ้ำและปรับปรุงการดูแลรักษา
|
|
|
- **การออกแบบที่ตอบสนอง** - ทำให้เว็บไซต์ทำงานได้ดีในขนาดหน้าจอที่แตกต่างกัน
|
|
|
|
|
|
### แหล่งเรียนรู้แบบโต้ตอบ
|
|
|
|
|
|
ฝึกฝนแนวคิดเหล่านี้ด้วยเกมที่สนุกและมีส่วนร่วม:
|
|
|
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - เรียนรู้ Flexbox ผ่านความท้าทายที่สนุกสนาน
|
|
|
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - เรียนรู้ CSS Grid โดยการปลูกแครอทเสมือนจริง
|
|
|
- 🎯 [CSS Battle](https://cssbattle.dev/) - ทดสอบทักษะ CSS ของคุณด้วยความท้าทายการเขียนโค้ด
|
|
|
|
|
|
### การเรียนรู้เพิ่มเติม
|
|
|
|
|
|
สำหรับพื้นฐาน CSS ที่ครอบคลุม ให้ทำโมดูล Microsoft Learn นี้ให้เสร็จ: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
|
|
|
|
|
## งานที่ได้รับมอบหมาย
|
|
|
|
|
|
[CSS Refactoring](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |
