บทความนี้อุทิศให้ไข่แห่ง CPE30 ผู้ขยันทำงาน 😛

การจัดหน้าเว็บไซต์ในปัจจุบันนั้น นอกจากจะต้องคำนึงถึงความสวยงามตามนิยามของแต่ละคนแล้ว ยังต้องพิจารณาปัจจัยหลายๆ อย่างประกอบ

หนึ่งในปัจจัยที่มีผลในปัจจุบันคือขนาดของหน้าจอ ปฏิเสธไม่ได้ว่าขนาดหน้าจอที่ต่างกันนั้นทำให้เกิดความ “หลากหลาย” ของเว็บไซต์

หากทดลองเข้าบล็อกนี้จากโทรศัพท์ จะพบว่าส่วนแถบด้านข้างหายไปอยู่ด้านบน เทคนิกการจัดหน้าแบบนี้เรียกว่า “responsive” ซึ่งโดยเบื้องต้นจะกล่าวถึงการจัดหน้าโดยใช้ระบบ Grid อย่างง่าย

กริดคืออะไร

ในการออกแบบเว็บหลายๆ ครั้ง เราอาจแบ่งเป็น “แถบ” หลายๆ แถบ การออกแบบเว็บที่มีแถบด้านข้าง ก็อาจมองได้ว่าเราแบ่งเว็บในส่วนนอกเหนือจากหัวเป็น “แถบ”

เป็นเรื่องง่ายดายที่ในปัจจุบัน เราสามารถใช้ระบบ “แถบ” ที่คน “ทำ” ไว้ให้ล่วงหน้าแล้ว เราเรียกระบบนี้ว่า “ระบบกริด”

กริดที่จะใช้ในบทความนี้ จะใช้ชุดกริดจาก flexbox grid ซึ่งสามารถแบ่ง “แถบ” ย่อยได้เป็น 12 แถบ

ข้อดีของระบบกริดสมัยใหม่ คือสามารถสั่งให้ความกว้างของแต่ละ “โซน” ต่างกันในแต่ละขนาดหน้าจอได้ เราอาจใช้ความสามารถนี้ในการ “ย้าย” เมนูแถบสีเหลืองไปไว้ต่อบน-ล่างกับเนื้อหาส่วนสีน้ำเงิน

เพื่อไม่ให้เป็นการเสียเวลา จะอธิบายวิธีการใช้ระบบกริดได้ดังนี้

การใช้งานกริด

เริ่มต้นใช้งานกริด

ขั้นแริ่มแรกของการใช้กริด คือการเพิ่มไฟล์ CSS ของกริดไว้ในส่วน HTML Header ทำได้ด้วยการโหลดไฟล์กริดมาไว้ในที่ที่ตายตัวหนึ่งที่ แล้วใช้คำสั่ง <link> เพื่อสร้าง stylesheet

<link href="path/to/flexboxgrid.css" rel="stylesheet" type="text/css">

หากผู้อ่านเป็นนิสิต CPE30 ที่ต้องการสร้างไฟล์เพื่อส่งอาจารย์ อาจทำได้ด้วยการ hotlink (ไม่ต้องอัพไฟล์) ด้วยการแปะโค้ดตามนี้ในส่วน header

<link href="https://srakrn.me/css/flexboxgrid.css" rel="stylesheet" type="text/css">

ออกแบบหน้าเพจ

เราจำเป็นต้อง “คิด” ก่อนว่าจะ “แบ่ง” เว็บของเราเป็นกี่ส่วนตามแนวนอน ซึ่งสมมติว่าหน้าเว็บเป็นทรงมาตรฐานดังรูปข้างบน

เราอาจแบ่งเว็บทรงนี้เป็น 2 แถวตามแนวนอน คือส่วนหัวหนึ่งแถว กับส่วนเนื้อหาและส่วนเมนูด้านข้าง ตามกรอบสีแดงข้างบน

ในการสร้างแถวตามแนวนอนใหม่ สามารถสร้างได้ด้วยคำสั่ง <div class=”row”>

ในที่นี้อาจประกาศ row สองแถวได้ดังนี้

<div class="row">
</div>
<div class="row">
</div>

การประกาศแถว เราจะประกาศด้วย <div> โดยประกาศ class ดังภาพ

โดยที่

• col-xs- คือกินพื้นที่กี่ “แถบ” บนจอขนาดเล็กมาก เช่นโทรศัพท์เก่าๆ
• col-sm-คือกินพื้นที่กี่ “แถบ” บนจอขนาดเล็ก เช่นโทรศัพท์ใหม่ๆ
• col-md- คือกินพื้นที่กี่ “แถบ” บนจอขนาดเล็ก เช่นไอแพดแนวตั้ง
• col-lg- คือกินพื้นที่กี่ “แถบ” บนจอขนาดใหญ่ เช่นคอมพิวเตอร์

ทั้งหมดตามด้วยตัวเลขว่ากินพื้นที่กี่แถบ มากสุดคือ 12

ในส่วนของหัวแถวแรก เราสามารถประกาศ “แถบ” ที่กว้าง 12 หน่วยอย่างเสมอต้นเสมอปลายได้เลย

<div class="row">
    <div class="col-xs-12
                col-sm-12
                col-md-12
                col-lg-12">
        <h1>ส่วนหัว</h1>
    </div>
</div>
<div class="row">
</div>

ในส่วนของหัวแถวแรก เราสามารถประกาศ “แถบ” ที่กว้าง 12 หน่วยอย่างเสมอต้นเสมอปลายได้เลย

<div class="row">
    <div class="col-xs-12
                col-sm-12
                col-md-12
                col-lg-12">
        <h1>ส่วนหัว</h1>
    </div>
</div>
<div class="row">
</div>

และในส่วนเนื้อหา เราอาจประกาศได้ดังนี้

เมนู: เล็กมากๆ ให้กว้างทั้งจอ ถ้าใหญ่ให้กว้าง 3 ส่วน
เนื้อหา: เล็กมากๆ ให้กว้างทั้งจอ ถ้าใหญ่ให้กว้าง 9 ส่วน

อาจเขียนเป็น HTML ได้ดังนี้

<div class="row">
    <div class="col-xs-12
                col-sm-12
                col-md-12
                col-lg-12">
        <h1>ส่วนหัว</h1>
    </div>
</div>
<div class="row">
    <div class="col-xs-12
                col-sm-12
                col-md-3
                col-lg-3">
        <h2>เมนูด้านซ้าย</h2>
    </div>
    <div class="col-xs-12
                col-sm-12
                col-md-9
                col-lg-9">
        <p>เนื้อหา</p>
    </div>
</div>

เป็นการใส่โครงให้กับ HTML เพื่อกำหนดความกว้างโดยคร่าว