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

() translation by (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 อย่างไรก็ตาม ถ้าเราต้องการสไตล์เฉพาะด้านๆ เดียวของอิลิเมนต์เราก็สามารถทำได้ ดังตัวอย่าง

1	padding-left: 20px;
2	border: 4px solid #205D76;

ลองคิดว่ากล่องสีชมพูด้านบนนั้นเป็นตัวอักษร จากโค้ดเราสามารถเห็นว่า 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 ที่เราเพิ่งใส่ไป

1	.primary-header {
2	text-align: center;
3	}

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

ส่วนของ section

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

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

1	.store-section {
2	display: flex;
3	display: -webkit-flex; /* This is a vendor prefix! */
4	}

เพื่อนำสิ่งที่เราเคยคุยกันกลับมา รูปภาพและ 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 เท่านั้น

1	.store-details {
2	margin-left: 30px;
3	}

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

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

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

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

1	.store-list {
2	padding-left: 15px; /* newly added styling */
3	color: #FFC122;
4	}

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

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

1	.store-name {
2	margin-bottom: 10px;
3	}

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

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

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

.store-section {
    display: flex; 
    display: -webkit-flex; 
    margin: 50px auto; 
    width: 450px; 
}

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

ส่วน Footer

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

.primary-footer {
    padding: 2px;
    text-align: center;
    background-color: #FFC122;
}

ค่า Margin ของ Body

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

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

1	body {
2	margin: 0;
3	}

สรุป

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

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

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