Advertisement
  1. Web Design
  2. Kids
Webdesign

การทำเว็บไซต์สำหรับเด็ก - การจัดเลย์เอ้าท์ด้วย CSS (CSS Layout)

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS
Web Design for Kids: Images

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

ยินดีต้อนรับสู่บทเรียนที่หกของเราในซีรีย์ การทำเว็บไซต์สำหรับเด็ก วันนี้เราจะมาพูดถึงการจัดเลย์เอ้าท์ด้วย CSS กัน

วันนี้เราจะสามารถขยับหรือจัดวางอิลิเมนต์ทุกตัวที่เราต้องการได้อย่างอิสระบนหน้าจอ เราจะเพิ่มโค้ดของไฟล์ HTML และไฟล์ CSS เข้าไปเพิ่มเติมด้วย

เพื่อเทียบกับผลงานคุณเอง ดูผลลัพธ์ที่เรากำลังจะทำ ในบทเรียนนี้ สำหรับไฟล์ในบทเรียนนี้ คุณสามารถดาวน์โหลดได้ที่นี่ และอย่าลืมที่จะถามคำถามหรือเขียนคอมเม้นต์ใต้บทเรียนนี้ได้เลย

ก่อนที่เราจะเริ่ม

ยังมีส่วนเล็กน้อยที่เราต้องรู้ก่อนที่จะกระโดดตรงไปที่คำว่าเลย์เอ้าท์ (layout) ในส่วนแรกนี้เราจะมองว่าเรานั้นจะจัดการอย่างไร เนื้อหาเราได้ครอบคลุมถึงพื้นฐานการจัดตำแหน่ง (position) และเรายังพูดถึง CSS property ที่ใช้สำหรับการจัดเลย์เอ้าท์ด้วย

ลำดับความสำคัญของ CSS (CSS Ordering)

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

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

เกี่ยวกับ Box Model

อิลิเมนต์ HTML แต่ละอันนั้นเหมือนกับกล่องสี่เหลี่ยม เราเรียกมันว่า CSS box model โดยมันทำงานกับช่องว่างต่างๆ ที่อยู่รอบๆ กล่องเหล่านั้น

แต่ละกล่องมีด้านสี่ด้าน เราสามารถใส่ค่าในแต่ละด้านในครั้งเดียวที่ CSS ด้วย padding, border, และ/หรือ margin อย่างไรก็ตาม ถ้าเราต้องการสไตล์เฉพาะด้านๆ เดียวของอิลิเมนต์เราก็สามารถทำได้ ดังตัวอย่าง

ลองคิดว่ากล่องสีชมพูด้านบนนั้นเป็นตัวอักษร จากโค้ดเราสามารถเห็นว่า padding นั้นเพิ่มช่องว่างเพียงแค่ด้านซ้าย และเส้นขอบหนาสีน้ำเงินก็ครอบทั้งสี่ด้านของเนื้อหา

Flexbox

CSS นั้นมีชุดของพร้อพเพอร์ตี้ที่สร้างมาช่วยเราจัดเลย์เอ้าท์โดยเฉพาะ ขณะที่ box model นั้นจะเกี่ยวกับช่องว่าง (spacing) รอบๆ อิลิเมนต์ HTML แต่ flexbox นั้นจะเป็นตัวช่วยให้เราจัดวางอิลิเมนต์เหล่านี้ได้โดยง่ายดาย

เมื่อเราใช้ flexbox ภายในอิลิเมนต์คอนเทนเนอร์ อิลิเมนต์ตัวนั้นจะกลายเป็น flex container และอิลิเมนต์ทั้งหมดในนั้นจะกลายเป็น flex item

เมื่อเราใส่ flexbox ไปที่คอนเทนเนอร์ มันจะจัด item ต่างๆ เรียงตามแนวนอน (horizontally) ให้โดยอัตโนมัติ และจากนั้นเราเพียงแค่ใส่ค่ารายละเอียด property ของ flexbox เท่านั้น

เราไม่ต้องการใช้ flexbox มากมายในเว็บไซต์ของเรา แต่มันก็สำคัญที่จะเรียนรู้แนวคิดเพราะว่ามันเป็น แนวทางที่ดีสำหรับเบราว์เซอร์รุ่นใหม่ที่ใช้ในการจัดเรียงอิลิเมนต์ย่อยต่างๆ ให้กับเว็บไซต์

ส่วน Header

อิลิเมนต์ h1 และรูปเมืองภายใน header จะถูกจัดกึ่งกลาง (center) บนหน้าเพจ นี่คือวิธีการหลากหลายที่เราจะจัดกึ่งกลางโดยใช้ CSS แต่สำหรับตอนนี้ เราจะใช้ text-align: center; บนลง header

เราจะยิงตรงไปที่ header โดยใช้ชื่อ class ที่เราเพิ่งใส่ไป

อย่าลืม! เซฟงานและรีเฟรชเบราว์เซอร์เพื่อเห็นการเปลี่ยนแปลงที่เราได้ทำไป

ส่วนของ section

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

เพื่อให้งานสำเร็จ เราจะใช้คำสั่ง flexbox Flexbox นั้นถูกใส่ไว้ที่ item ภายในอิลิเมนต์คอนเทนเนอร์โดยใช้คำสั่ง display: flex; ที่คอนเทนเนอร์

เพื่อนำสิ่งที่เราเคยคุยกันกลับมา รูปภาพและ div ของรายการร้านค้าตอนนี้เป็น flex item เพราะว่าพวกมันอยู่ภายใต้ flex container

ขณะที่ยังมีตัวเลือกมากมายสำหรับการระบุว่าที่ๆ อิลิเมนต์ควรไป flexbox นั้นจะทำงานได้เป็นอย่างไรสำหรับเราและรายการร้านค้า ที่ตอนนี้จะอยู่ทางขวาของรูปร้านค้า

เล็กน้อยเกี่ยวกับ "Vendor Prefix"

แม้ว่า Flexbox นั้นเป็นของใหม่ ใช่ว่าทุกเบราว์เซอร์นั้นจะรู้จักมันและแสดงผลได้อย่างถูกต้อง เพื่อทำงานกับสิ่งเหล่านี้ เราสามารถใส่ vendor prefix เข้าไปที่พร้อพเพอร์ตี้ของ flexbox เพื่อเพิ่มการ support ขอเบราว์เซอร์และรอจนเวลานั้นมาถึง แม้ว่าเราเพียงแค่ตั้งเป้าไปที่เบราว์เซอร์เวอร์ชันล่าสุดสำหรับงานนี้ แต่เราก็ยังต้องการใส่ -webkit- vendor prefix สำหรับ flexbox เพื่อให้แน่ใจว่ามันจะทำงานได้ใน "Safari"

รูปภาพและลิสต์รายการ

เราควรใช้การเว้นว่างระหว่างรูปเล็กน้อยกับอิลิเมนต์ที่ครอบข้อความทั้งหมด ดังนั้นใน HTML ให้เพิ่ม class ชื่อ store-details ไปที่ div ที่มีตัวอักษรพวกนั้น

หลังจากเราเซฟแล้ว เราจะพุ่งตรงไปที่ CSS ของเราและเพิ่มช่องว่าง เพียงแค่ด้านซ้ายของ div เท่านั้น

ค่า default ของระยะห่างระหว่างลิสต์

ยังมีช่องว่างบางอย่างที่ด้านซ้ายของ unordered list ร้านค้าของเรา นี่ก็เพราะมีค่า default style อยู่ที่ติดมากับ HTML list บางครั้งค่า default เหล่านี้ก็ OK และบางเวลาก็ไม่เป็นดังที่เราต้องการ

เราสามารถเอาค่า default เหล่านี้ออกด้วยคำสั่ง padding: 0; บน unordered list แต่นั่นจะทำให้ bullet point ไปด้านซ้ายมากเกินไปเทียบกับหัวข้อลิสต์ของเรา

เราต้องการ padding นิดหน่อยที่นี่ แต่มักจะไม่มากเท่ากับที่ให้มากับ default style ตั้งค่า padding-left ด้วย 15px บนลิสต์จะทำให้ bullet point นั้นแสดงได้ง่ายสวยมากบนหัวข้อ ดังนั้นเราจะเพิ่มนี่เข้าไปในสิ่งที่เรายังไม่ได้ทำในบทเรียนก่อนหน้านี้

ช่องว่างระหว่างลิสต์ไอเท็มแต่ละอัน

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

ระยะ Margin และการจัดกึ่งกลาง

การเพิ่มช่องว่างควรเพิ่มในบริเวณที่ทำให้เนื้อหานั้นอยู่กึ่งกลาง เราจะทำสิ่งนี้ผ่านพร้อพเพอร์ตี้ margin และ width

อีกครั้ง เราจะเพิ่มสไตล์ที่เราได้เขียนไว้แล้ว

ค่า 50px ภายใน margin นั้นคือการใส่จำนวนช่องว่างของด้านบนในแต่ละ store-section ตามด้วย auto บอกว่าเบราว์เซอร์นั้นจะ (ที่ซึ่งเซ็ตไว้ที่ 450px) และจัดกึ่งกลางมันภายในหน้าต่างของเบราว์เซอร์โดยอัตโนมัติ

ส่วน Footer

สำหรับ footer ของเรา เราจะจัดกึ่งกลางข้อความและเพิ่ม padding จำนวนเล็กน้อยเพื่อให้แน่ในว่าข้อความนั้นไม่ใกล้กับขอบของ footer มากเกินไป

ค่า Margin ของ Body

เราได้เคยคุยกับ default styling ที่มันเคยติดมากับ list ในที่นี้ อิลิเมนต์ body จะมากับ default style ของมันเอง หนึ่งในนั้นคือ margin ที่อยู่รอบๆ หน้าเพจ ขณะที่บางทีมันไม่ใช่ปัญหา เราสามารถเห็นมันป้องกัน background-color ของ footer ของเราจากการยืดเต็มจอเลยหน้าต่างของเบราว์เซอร์ออกไป

ซึ่งวิธีแก้ปัญหาก็คือให้กลับไปที่ไฟล์ CSS แล้วเพิ่มบางสิ่งต่อไปนี้

สรุป

ในบทเรียนนี้ เราได้ใช้อิลิเมนต์ทั้งหมดที่เรามีกับเทคนิคการจัดเลย์เอ้าท์ด้วย CSS ขณะที่ยังมีวิธีการที่แตกต่างอื่นๆ ที่จะทำให้เลย์เอ้าท์นั้นสำเร็จ บทเรียนนี้ช่วยให้เกิดความรู้สึกคุ้ยเคยกับ CSS box model และ flexbox จะทำให้เราเข้าใจเทคนิคที่แตกต่างเหล่านี้

หลังจากที่เว็บไซต์เราเสร็จสมบูรณ์ (ยินดีด้วย!) เราจะกลับไปคุยเกี่ยวกับเรื่อง การออกแบบทั่วไป การออกแบบตัวอักษร และ เรื่องของสีในบทเรียนที่ตามมา หวังว่ามันจะเป็นใบเบิกทางให้คุณเป็นนักทำเว็บที่ดีในอนาคตเลย

แล้วเจอกันรอบเมืองเช่นเดิม!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.