ปรับแต่ง CSS ของเว็บง่ายๆ ด้วย Firebug Firefox

คนทำเว็บหลายๆคนคงมีปัญหากับการปรับแต่ง style css ของ เว็บหรือ template ว่าไม่รู้จะแก้ตำแหน่งไหน จะแก้สีตัวอักษรตรงไหน , เปลี่ยนรูป background ยังไง , ปรับขนาดตารางยังไง , เปลี่ยนสี link ยังไง เห็นโค้ดแล้วตาลายไปหมด วันนี้ผมมาแนะนำเครื่องมือเจ๋งๆตัวนึงชื่อว่า firebug เป็น plugin ของ firefox ที่มีคุณสมบัติ ที่สามารถแสดงและแก้ไขพร้อมแสดงผลลัพท์ของ CSS , Java , Html , DOM และอีกหลายๆคุณสมบัติ ของหน้า template ที่เราจะแก้ไขแบบง่ายๆ มองเห็นภาพ เรามาเริ่มกันเลยครับ

1. ก่อนอื่นต้อง install firebug ก่อนสามารถโหลดจาก plugin ของ firefox ที่นี่ https://addons.mozilla.org/en-US/firefox/addon/1843/ กด Add to Firefox เพื่อ install …หลังจาก install ให้คุณทำการ restart firefox ใหม่เพื่อเริ่มการใช้งาน

2. หลังจาก install firebug และ restart firefox เรียบร้อยแล้ว คุณจะสังเกตุเห็นปุ่ม icon รูปแมลงที่ด้านขวาล่าง ให้คุณเปิดหน้าเว็บที่คุณจะทำการปรับแต่ง css แล้วกดที่ปุ่ม firebug

3.คุณจะเห็นหน้าต่างใหม่เลื่อนขึ้นมาในกรอบสีแดง ส่วนนี้เองที่เป็นส่วนใช้งานปรับแต่งของ firebug ผมจะยกตัวอย่าง เช่น ผมต้องการจะเปลี่ยน background ของเมนูจากสีน้ำเงินเป็นสีชุม ถ้าหากเราแก้ css เอง คงนั่งงมหาแน่ๆ แต่ firebug ช่วยคุณให้ง่ายขึ้น

4.ตัวอย่างตอนนี้ผมจะลองเปลี่ยน background menu จากสีน้ำเงินเป็นสีชมพูโดยให้คุณเริ่มตามรูปด้านล่าง หมายเลข 1 คลิกที่ปุ่มลูกศร เพื่อเริ่มจับรูปแบบ css ของเว็บ โดยให้คุณลองเอาเมาส์ไปวางบนหน้าเว็บเพจในส่วนที่คุณอยากจะลองแก้ไข เช่น สี ขนาดตัวอักษร ความกว้าง ยาวตาราง เป็นต้น หมายเลข 2 ตอนนี้ผมลองจะเอาเมาส์ไปจับที่ตารางของเมนู โดยให้สังเกตุว่าจะมีกรอบขึ้นบริเวณที่เราจะแก้ไข เมื่อกรอบขึ้นตรงที่จะแก้ไขแล้ว ให้เราคลิกหนึ่งครั้ง แล้วให้มองที่หมายเลข 3 ในส่วนของ Style box ด้านขวาลาง firebug จะดึง css ของตารางเมนูนี้มา

5.ตรง หมายเลข 1 เราสามารถเปลี่ยนสีโดยใส่ code สีลงไป พอใส่ลงไปแล้ว หมายเลข 2 สี background เมนูก็จะเปลี่ยน แบบเห็นจะๆ เป็นไงครับง่ายไหมคับ พอรู้ตำแหน่งแล้วเราก็เปิด css ใน server ของเราแล้วก็แก้ตรงตำแหน่งที่เราต้องการ เสร็จแล้วคร๊าป

6. อีกตัวอย่างนะครับแบบรวดเร็ว ผมต้องการขยายความสูงของตาราง logo ของผมเพราะมันติดกับเมนูมากไป ผมเลยอยากรู้ว่าจะไปแก้ความสูงตรงไหน ผมก็แค่ กดที่หมายเลข 1 เอาเมาส์ไปวางแถวๆหมายเลข 2 มันก็มีกรอกขึ้นมา แล้วก็คลิกหนึ่งครั้ง มองไปที่ box style ด้านขวาล่าง เราก็เจอระ Height 95px เราก็สามารถเปลี่ยนจากตรงนี้ได้เลยโดยเปรียบเทียบกับ css ใน server นะคร๊าป … จริงๆคุณสมบัติมีอีกเยอะครับ ผมใช้ไม่หมด ยังไงก็ลองดูคับ เป็นเครื่องมือที่คนทำเว็บต้องมีไว้ อิอิ