Layout คือ เค้าโครงของหน้าเว็บเพจที่ร่างไว้ อาจร่างเป็นเพียงตารางสี่เหลี่ยมลงบนกระดาษ หรือจะร่างบนคอมพิวเตอร์ก็ได้
จุดประสงค์เพื่อการนำไปออกแบบเป็น Design ที่ลงรายละเอียดสวยงาม หรือนำเป็นแบบเอาไว้สำหรับเขียนโค้ด HTML CSS ในภายหลัง
ในภาพตัวอย่างคือ Basic Layout ที่ผมนิยมนำมาฝึกซ้อม และแนะนำผู้ที่กำลังเริ่มต้นเขียนเว็บ ให้ลองฝึกดู
การจะเขียน Layout แบบนี้ขึ้นมานั้น สามารถทำได้หลายวิธี ขึ้นอยู่กับความเข้าใจในพื้นฐาน HTML CSS ที่แต่ละคนจะมีสไตล์การเขียนไม่เหมือนกัน
สำหรับในบทความนี้ จะนำเสนอ 4 วิธีสากลที่ทั่วโลกยอมรับ และเป็นมาตรฐานต่อการเขียน Layout
ซึ่งผมได้นำมาเรียบเรียงและสรุปให้ใหม่ให้เข้าใจง่าย พร้อมกับเขียนให้ดูด้วยว่าสามารถเขียนในแต่ละแบบได้อย่างไร ในบทความถัดไป บทนี้จึงขอพูดถึงภาพรวมก่อน
Framework คือ กรอบการทำงาน หรือ ชุดคำสั่งที่มีคนพัฒนาเอาไว้ให้เราสามารถนำไปใช้งาน โดยมีจุดประสงค์เพื่ออำนวยความสะดวกในการเขียน ลดเวลาในการทำงาน ช่วยให้เราไม่ต้องเขียนโค้ดพื้นฐานด้วยตัวเองทั้งหมด
สำหรับ Framework ในที่นี้ เราจะใช้ตัวที่ชื่อว่า Bootstrap ซึ่งเป็น เฟรมเวิร์คยอดนิยมสำหรับการเขียน Front-End เว็บเพจ มีความสามารถเด่นๆคือการทำ Responsive Layout โดยที่ไม่ต้องกำหนด CSS Media Query ด้วยตัวเอง
Bootstrap Logo
ปัจจุบัน (2021) Bootstrap กำลังอยู่ในเวอร์ชั่นที่ 5
ทุกคนสามารถเข้าไปหา url ดาวโหลดได้ที่ https://getbootstrap.com/
แล้วสามารถศึกษาการใช้งานได้ที่เมนู Documentation
เมื่อเราต้องการใช้งาน Bootstrap จะมีวิธีที่รวดเร็วที่สุดคือการทำ CDN ซึ่งเป็นการเรียกหาไฟล์คำสั่งจาก server ภายนอกเข้ามาภายในไฟล์ html โดยวิธีทำคือ ให้ใส่ Code นี้ลงไปในส่วนของ <head></head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
เพียงเท่านี้ก็จะสามารถใช้ Bootstrap ได้ทันที หากต้องการทดสอบว่า Bootstrap เข้ามาหรือยัง ก็สามารถทดสอบได้ง่ายๆด้วยการเขียน Code เพื่อเช็ค container ดังนี้
<div class=”container”>Hello Bootstrap</div>
ถ้าข้อความ Hello Bootstrap เลื่อนมาเข้ามาด้านในของบริเวณหน้าเพจ ก็ถือว่าใช้ได้ สามารถเริ่มเขียนได้เลย
สำหรับแนวคิดของเทคนิคนี้ จะทำการมองว่า Element เป็นวัตถุ 1 ชิ้น ที่จับต้องได้ เคลื่อนที่ไปมาได้ เป็นวิธีการเขียน CSS ในอดีตช่วงที่ยุค Responsive กำลังเริ่มบุกเบิก
ใช้เทคนิคนี้โดยการพิมพ์ CSS ไปที่ selector ที่ต้องการแล้วพิมพ์ คำสั่ง float:left เพื่อสั่งให้วัตถุลอยต่อกัน และ clear:both เพื่อสั่งไม่ให้ตัวของมัน ไม่ชิดกับวัตถุอื่น
พื้นฐานในการเข้าใจ Float คือต้องทราบว่า Tag ตัวไหนมีการแสดงผลเป็น Block Level Element บ้าง
Block Level Element คือการที่ วัตถุจะขึ้นบรรทัดใหม่เสมอ และจะมีความยาวเป็น 100% ของ Parent Element
ต่อไปนี้คือ Tag ที่มีการใช้งานบ่อยและควรจะต้องจดจำให้ได้
| กลุ่มทั่วไป | กลุ่ม List | กลุ่ม Semantic Tag |
|---|---|---|
| <h1></h1> (h1-h6) <p></p> <td></td> <table></table> <form></form> <hr> |
<ol></ol> <ul></ul> <li></li> |
<header></header> <footer></footer> <aside></aside> <section></section> <article></article> <nav></nav> |
การทดสอบ Float ให้ลองเขียน โค้ดดังนี้
HTML
<h1>Float</h1>
<p>Float is fun</p>
CSS
h1,p {float:left}
จะพบว่า h1 และ p ถูกนำมาลอยต่อกัน
เป็นคำสั่ง CSS ที่ถูกอัพเดตเข้ามาใหม่ และเริ่มใช้อย่างแพร่หลายในช่วง 2-3 ปีก่อน เนื่องจาก Browser ต่างๆ เพิ่งสามารถรองรับคำสั่งนี้ได้ถึง 99% เมื่อปี 2020 ที่ผ่านมา
การเริ่มใช้งาน Flexbox สามารถเริ่มที่การ ทำ Div ครอบ กลุ่มของ child Element ขึ้นมาก่อน แล้วใช้คำสั่ง display:flex ไปที่ตัว Parent Element ที่ครอบอยู่ เช่น
HTML
<section> ←-Parent ใช้ display:flex ที่นี่
<div>1</div> ←-Child
<div>2</div>
<div>3</div>
</section>
CSS
section {display:flex}
div {width:100%; background:red;}
จะพบว่า DIV ถูกนำมาเรียงต่อกัน และมีขนาดความยาวเท่ากันพอดี
สำหรับการตั้งชื่อ class ให้กับ parent กรณีที่ใช้ div มักจะตั้งกันว่า .flex-container
Justify-content : ระบุว่าเนื้อหาจะถูกจัดวางโดยลักษณะไหน ท่ามกลางระนาบแนวนอน มี Value สำคัญดังนี้
Space-between - แยกวัตถุให้อยู่ห่างจากกัน อันแรกและอันสุดท้ายชิดติดกับขอบ
Space-around - แยกวัตถุให้ห่างเท่าๆกัน แต่ไม่ชิดขอบ
Center - เรียกรวมวัตถุให้มาอยู่กึ่งกลางทั้งหมด
Align-items ระบุว่าจะให้เนื้อหาอยู่ในส่วน บน กลาง หรือ ล่าง
Center - เอาไว้ตรงกลาง
Flex-start - เอาไว้บนสุด
Flex-end - เอาไว้ล่างสุด
ประโยชน์มหาศาลของ flex คือการทำให้ข้อความอยู่กึ่งกลางของตัว div ได้ ด้วยการใช้ สามคำสั่งพร้อมกัน ใส่ไปที่ Element ที่ต้องการ
display:flex;
justify-content:center; <<ให้เนื้อหาอยู่กึ่งกลางซ้าย-ขวา
Align-items:center << ให้เนื้อหาอยู่กึ่งกลาง บน-ล่าง
<div style=" display:flex; justify-content:center; Align-items:center; height:200px; width:300px; background:gold;">1</div>
Grid คือเส้นตาราง ที่ถูกแบ่งออกเป็นช่องสี่เหลี่ยม ซึ่งจะมีหลักคิดคือ Element 1 ตัว จะเข้าไปอยู่ใน 1 ช่อง
หากดูตามภาพประกอบ ด้านบน
ส่วนของ Header / Footer ทำการลาก span ถึง 12 ช่อง ได้เป็นแนวยาว 1 แถว (span 12)
ส่วนของ Aside ทำการลาก span เป็น 4 ช่อง (span 4)
และส่วนของ Section ทำการลาก span เป็น 8 ช่อง (span 8)
เราสามารถแบ่งช่อง Grid ได้ด้วยตัวเอง ไม่จำเป็นต้องใช้คอลัมน์ 12 ช่องก็ได้ ขึ้นอยู่กับความต้องการ เช่น
ตัวอย่างการสร้าง 4*4 Grid
grid-template-columns: repeat(4,auto); เลข 4 คือ จำนวนช่อง auto คือไม่กำหนดค่าความยาวคงที่
grid-template-rows:repeat(4,100px); เลข 4 คือ จำนวนแถว 100px คือค่าความสูงของช่อง
Repeat คือการทำให้ทุกช่อง มีขนาดเท่าๆกันหมด แต่ถ้าจะระบุเจาะจงเป็นช่องๆไป จะเขียนเลข เรียงต่อกัน
เช่น ช่องที่ 1 กว้าง 100 ช่องที่ 2 กว้าง 150 ช่องที่ 3 กว้าง 100 ช่องที่ 4 กว้าง 200
grid-template-columns: 100px 150px 100px 200px;
ทั้ง 4 วิธีนั้น มีสไตล์การออกแบบโครงสร้างที่ไม่เหมือนกัน โดยส่วนตัวผมคิดว่าไม่ได้มีอันไหนดีที่สุดหรือแย่ที่สุด แต่มันขึ้นอยู่กับวิธีคิดและสถานการณ์ที่เหมาะสม และขึ้นอยู่กับความเข้าใจของแต่ละบุคคล
ประสบการณ์ของผม เริ่มต้นจากการรู้จักกับ Float ก่อน แล้วจึงรู้จักกับ Bootstrap ซึ่งใช้เพียง 2 อย่างนี้ก็สามารถเขียนLayout ทุกแบบได้แล้ว ส่วนเทคนิค Flexbox และ Grid จะเป็นการเพิ่มประสิทธิภาพต่อการเขียนโค้ด ซึ่งถ้าหากเข้าใจและนำมาปรับใช้ จะสามารถสร้างงานได้อย่างมีประสิทธิภาพมากขึ้นอย่างน่าใจหาย
สาธิตวิธีการเขียน Basic Layout ด้วย Bootstrap
