BLOG

Reading

เทคนิค เขียน Layout HTML/CSS

HTML / CSS - 08 Feb 2021
Author: Born Scream



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

ในภาพตัวอย่างคือ Basic Layout ที่ผมนิยมนำมาฝึกซ้อม และแนะนำผู้ที่กำลังเริ่มต้นเขียนเว็บ ให้ลองฝึกดู
การจะเขียน Layout แบบนี้ขึ้นมานั้น สามารถทำได้หลายวิธี ขึ้นอยู่กับความเข้าใจในพื้นฐาน HTML CSS ที่แต่ละคนจะมีสไตล์การเขียนไม่เหมือนกัน

สำหรับในบทความนี้ จะนำเสนอ 4 วิธีสากลที่ทั่วโลกยอมรับ และเป็นมาตรฐานต่อการเขียน Layout
ซึ่งผมได้นำมาเรียบเรียงและสรุปให้ใหม่ให้เข้าใจง่าย พร้อมกับเขียนให้ดูด้วยว่าสามารถเขียนในแต่ละแบบได้อย่างไร ในบทความถัดไป บทนี้จึงขอพูดถึงภาพรวมก่อน

เทคนิคการเขียน Layout HTML

  1. CSS Framework (Bootstrap)
  2. CSS Float & Clear
  3. CSS Flex
  4. CSS Grid

เทคนิคที่ 1 การใช้ CSS Framework

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 เลื่อนมาเข้ามาด้านในของบริเวณหน้าเพจ ก็ถือว่าใช้ได้ สามารถเริ่มเขียนได้เลย

เทคนิคที่ 2 การใช้ Float & Clear

สำหรับแนวคิดของเทคนิคนี้ จะทำการมองว่า 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 ถูกนำมาลอยต่อกัน 

เทคนิคที่ 3 การใช้ Flexbox

เป็นคำสั่ง 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

ชุดคำสั่ง (Property) ของกลุ่ม CSS FLEX ที่มีการใช้งานบ่อย

Justify-content : ระบุว่าเนื้อหาจะถูกจัดวางโดยลักษณะไหน ท่ามกลางระนาบแนวนอน มี Value สำคัญดังนี้
Space-between - แยกวัตถุให้อยู่ห่างจากกัน อันแรกและอันสุดท้ายชิดติดกับขอบ
Space-around - แยกวัตถุให้ห่างเท่าๆกัน แต่ไม่ชิดขอบ
Center - เรียกรวมวัตถุให้มาอยู่กึ่งกลางทั้งหมด

Align-items ระบุว่าจะให้เนื้อหาอยู่ในส่วน บน กลาง หรือ ล่าง
Center - เอาไว้ตรงกลาง
Flex-start - เอาไว้บนสุด
Flex-end - เอาไว้ล่างสุด

การทำ Vertical Align 

ประโยชน์มหาศาลของ flex คือการทำให้ข้อความอยู่กึ่งกลางของตัว div ได้ ด้วยการใช้ สามคำสั่งพร้อมกัน ใส่ไปที่ Element ที่ต้องการ
display:flex;
justify-content:center;   <<ให้เนื้อหาอยู่กึ่งกลางซ้าย-ขวา
Align-items:center << ให้เนื้อหาอยู่กึ่งกลาง บน-ล่าง

1
      <div style=" display:flex; justify-content:center; Align-items:center; height:200px; width:300px; background:gold;">1</div>
    

เทคนิคที่ 4 การใช้ Grid

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 จะเป็นการเพิ่มประสิทธิภาพต่อการเขียนโค้ด ซึ่งถ้าหากเข้าใจและนำมาปรับใช้ จะสามารถสร้างงานได้อย่างมีประสิทธิภาพมากขึ้นอย่างน่าใจหาย

Series 4 Layout Techniques

  1. Overview
  2. วิธีเขียน Layout ด้วย Bootstrap