เว็บไซต์จะดูดีกว่าถ้า Logo เลื่อน 5px ขวา หรือพื้นหลังสีน้ำเงิน? เพิ่ม Border/Shadow ให้รูป Featured Posts ทำให้เด่นขึ้น? เบราว์เซอร์สมัยใหม่อย่าง Firefox มี Web Developer Tools ให้ Inspect โครงสร้างเว็บ และ Live-edit ดูผล Real-time
บทช่วยสอนนี้: ใช้ Firefox Web Developer Tools Live-edit เว็บไซต์ใดๆ
หมายเหตุ: ใช้ได้กับ Browser อื่นๆ: Chrome, Opera, Safari
รู้จัก Web Developer Tools
Firefox Web Developer Tools = ชุดเครื่องมือครบ: แสดง DOM Elements ทั้งหมด, วัด Speed สำหรับบทช่วยสอน ต้องใช้ "Inspector" และ "Style Editor" เท่านั้น
เปิด Firefox -> เข้าเว็บไหนก็ได้ -> Hamburger Menu (มุมขวาบน) -> Web Developer -> Style Editor หรือ กด Shift+F7
Panel ปรากฏด้านข้าง (มักด้านล่าง) เปลี่ยนตำแหน่ง: คลิก 3 จุดมุมขวาบน Panel -> "Dock to Right/Left" หรือ "Separate Window"
หมายเหตุ: บทช่วยสอนไม่สอน HTML/CSS เรียนพื้นฐานได้ที่นี่
Inspect Element (ตรวจสอบองค์ประกอบ)
ต้องการเปลี่ยนลักษณะ Element -> ต้องระบุ Identity คลิกปุ่มแรก Toolbar หรือ Ctrl+Shift+C -> เปล้ Element-picker Mode
เลื่อนเมาส์รอบเว็บ -> Element ต่างๆ Highlight -> Primary Identifier โผล่ Pop-up
คลิก Element -> ถูก Select ใน Inspector Tab ของ Developer Tools
เจอ Element ที่อยากแก้ -> Right-click Entry ใน Inspector -> "Copy -> CSS Selector"
เริ่ม Live Edit
Copy CSS Selector แล้ว -> กลับไป Style Editor Tab -> คลิก "+" มุมซ้ายบน "Create and append a new stylesheet to the document"
Paste CSS Selector ใน Stylesheet ใหม่ -> Space -> Curly Brackets { }
ใน CSS: ลักษณะ Element = "Target" ด้วย Identifier (CSS Selector) -> ใส่ Rules ใส่ Curly Brackets ทุกอย่างระหว่าง {} ส่งผลต่อ "Targeted Element"
ตัวอย่าง Rule:
display: none;-> ซ่อน Element นั้น หายไป = Target ถูกต้อง -> ลบ Rule ลอง Rule อื่น หากไม่หาย -> กลับไป Inspector เลือกใหม่
ไม่สอน CSS ที่นี่ แต่เล่น Rules ยอดนิยมได้:
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
จะเห็น Element เปลี่ยน Real-time ขณะเพิ่ม Rules
สำคัญ: ไม่มีการ Save หากชอบการแก้ไข -> Copy Code ไปเก็บ (Notepad/Note App) ให้ Designer/Dev นำไปใส่ Stylesheet จริง อยากเรียน CSS? ลองเกมออนไลน์ช่วยฝึกทักษะ
