Cheat Sheet

Cascading Style Sheets หรือที่เราเรียกแบบย่อว่า CSS เป็นเครื่องมือสำคัญในการปรับแต่งเว็บไซต์ให้เป็นไปในรูปแบบต่างๆ เทคโนโลยีการจัดทำเว็บไซต์ในปัจจุบัน จะพยายามแยกโครงสร้างเนื้อหา HTML ออกจากสีสันหน้าตาของเว็บไซต์ CSS เพื่อให้ข้อมูลที่อยู่ภายในเว็บเป็นข้อมูลที่เราต้องการสื่อสาร

ช่วงนี้เว็บ Facebook ปรับปรุงเยอะมาก จนหลายคนปรับตัวตามไม่ทัน ล่าสุด Timeline ก็กำลังเปิดใช้งานกับบัญชีผู้ใช้ทุกคน รวมทั้งปรับมาอยู่ใน Facebook Page ต่างๆ ภายในเดือนมีนาคมนี้อีกด้วย (ขณะเขียนบล็อกนี้ ผู้ดูแลเพจสามารถกด Preview เพื่อเปิดใช้งานได้ก่อนกำหนด) รวมทั้งหน้าตาของ Group ที่จับเอารูปโปรไฟล์ของสมาชิกมาเรียงกันด้านบน โดยถ้าใครเบื่อก็สามารถเอารูปปก Cover เข้าไปใส่แทนได้เช่นกัน (เหมือนกับ Timeline และหน้าเพจ ที่สามารถใส่รูปปก Cover)

คราวนี้เมื่อเราต้องจัดการกับรูปภาพขนาดต่างๆ มากขึ้น เลยคิดว่าลองเจาะมาดูสิว่าแต่ละส่วนนั้น ออกแบบมาเพื่อให้ใช้กับรูปภาพแบบไหน แนวตั้ง แนวนอน ขนาดภาพเท่าไหร่กันบ้าง

เริ่มจากรูปภาพใน Timeline และ Facebook Page

• ภาพปก Cover [แนวนอน] = 851 x 315 พิกเซล
• รูปประจำตัว [สี่เหลียมจตุรัส] = 125 x 125 พิกเซล
• รูปประจำตัว ที่จะไปแสดงในหน้า Timeline [สี่เหลี่ยมจตุรัส] = 50 x 50 พิกเซล
• รูปภาพ ถ้าเป็นรูปขนาดใหญ่ 1 อัน [สี่เหลี่ยมจตุรัส] = 403 x 403 พิกเซล
• รูปภาพ ถ้าเป็นรูปขนาดกลาง 2 อัน [สี่เหลี่ยมจตุรัส] = 200 x 200 พิกเซล
• รูปภาพ ถ้าเป็นรูปขนาดเล็ก 3 อัน [สี่เหลี่ยมจตุรัส] = 133 x 133 พิกเซล (อันขวาสุด แอบหดไปนิดนึง คือ = 131 x 133 พิกเซล)