How to Layout Accurately 101
เมื่อพูดถึงการจัดวาง layout ของหน้าเว็บไซต์ ถือเป็นเรื่องพื้นฐานที่สำคัญมากสำหรับนักพัฒนาเว็บไซต์ที่เป็น Frontend เพราะการที่จะจัด layout หน้าเว็บให้สวยงามและเหมาะสมกับเนื้อหาได้นั้น หมายความว่า นักพัฒนาท่านนั้นต้องเข้าใจพื้นฐานการเขียนเว็บได้ระดับนึง ซึ่งบทความนี้จะมาอธิบายว่า กว่าเนื้อหาพื้นฐานโดยเน้นไปทางเรื่องการตัดหน้าเว็บไซต์ให้ออกมาสวยงาม ขั้นตอนนั้นเป็นอย่างไร You need to know basic HTML
HTML หรือเรียกชื่อเต็มว่า HyperText Markup Language เป็นเรื่องที่นักพัฒนาเว็บไซต์ต้องรู้จักเป็นอย่างแรก ต้องทำความเข้า tag ของ HTML ที่จำเป็นเบื่องต้นสำหรับการใช้วางโครงสร้างของเว็บไซต์
ขอยกตัวอย่างของ tag ของ HTML ที่ใช้บ่อยๆ
- <html>
- <head>
- <body>
- <title>
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- <div>
- <p>
- <span>
- <br/>
- <hr/>
- <table>และ tag อื่นๆอีกมายมาก ดูเนื้อหาเพิ่มเติมเกี่ยวกับ HTML tag ได้ที่
แต่ถ้าอยากเข้าใจ HTML อย่างลึกซึ้ง เรื่อง HTML Semantic Elements ก็เป็นเรื่องที่สำคัญที่ควรรู้เรียนเพิ่มเติมด้วยเช่นกัน
What is a semantic tag?
Semantic tag คือ html tag ที่มีความหมายและบอกหน้าที่ของตัวมันเองว่า tag นี้ควรใช้กับเนื้อหาส่วนไหน
ตัวอย่าง Semantic tag
- <header>
- <footer>
- <aside>
- <nav>
- <figure>
- <section>ประโยชน์ของ Semanttic tag
ทำให้ developper อ่าน code ได้ง่ายขึ้น เข้าใจเนื้อหาภายใน tag นั้นได้ไวดูเนื้อหาเพิ่มเติมเกี่ยวกับ Semantic tag ได้ที่
You need to know basic CSS
การที่นักพัฒนาเว็บไซต์แค่ HTML แต่ไม่รู้จัก CSS เปรียบเหมือนการวาดภาพที่ยังไม่ได้ลงสี เพราะจุดที่สำคัญที่สุดของเรื่องการจัด Layout ของเว็บไซต์นั้นอยู่ที่ CSS
CSS หรือเรียกชื่อเต็มว่า Cascading Style Sheets เป็นภาษาที่ช่วยเต็มเต็มความสวยงามให้กับ HTML เป็นอย่างมาก เพราะ CSS ช่วยกำหนด ทั้ง การจัดวาง Layout ระยะห่างของ Element การเลือกสีของข้อความ ความหนาของข้อความ และอื่นๆอีกมากมาย
ตัวอย่าง CSS Property ที่ใช้สำหรับจัดวาง Layout
- display
- position
- text-align
- margin
- padding
- padding
- border
- background
- font-size
- Z-indexและ css property อื่นๆอีกมากมาย สามารถเรียนรู้เพิ่มเติมได้ที่
Understand the structure of layout before coding
ก่อนที่นักพัฒนาเว็บไซต์ลงมือเริ่ม code จริง จะต้องมองภาพให้ออกก่อนว่า จะวางโครงสร้าง HTML อย่างไร ใช้ tag อะไรบ้าง รวมถึงจะใช้ CSS property อะไรมากำหนดการจัดวาง layout
ในบทความนี้ขอยกตัวอย่างขั้นตอนอย่างคร่าวๆเพื่อให้เข้าใจง่ายที่สุด
ภาพตั้งต้น
1. มอง design แล้วแบ่งกลุ่มของโครงสร้างให้ออก 2. เริ่ม code html ตาม โครงสร้างของภาพ
2. เริ่ม code html ตาม โครงสร้างของภาพ
ผลลัพธ์
จะแสดงเป็น text ธรรมดาต่อกัน layout และ style ยังไม่มีความสวยงาม ดังนั้นจะต้องเพิ่ม CSS เข้าไปเพื่อเติมเต็มในสิ่งที่ขาดหาย
3. จัด layout ด้วย css
ในบทความนี้ขอยกตัวอย่างด้วย การใช้ CSS property ที่ชื่อว่า display:flexbox เพราะเป็น property ที่ใช้เริ่มต้นเรียนรู้การการจัด Layout ได้ง่าย และ เรียนรู้ได้เร็ว
ผลลัพธ์ก็จะได้ภาพที่สวยงามตามภาพตั้งต้นแล้ว
Finally don’t forget to support responsive
และสุดท้าย การจัด layout ให้ดีนั้น ต่อให้เราทำเร็ว ทำดีแค่ไหน แต่ไม่รองรับ responsive ก็ถือว่าไม่จบงาน ดังนั้น ทุกครั้ง (ย้ำ)ทุกครั้ง ต้องตัด Layout ให้รองรับ Responsive หน้าจอต่างๆด้วย เพราะปัจจุบันผู้คนนิยมเปิดเว็บไซต์ผ่าน Tablet และ mobile มากขึ้น
โดยในบทความนี้จะใช้ Media Queries เข้ามาจัดการ CSS ให้รองรับ responsive
เขียน css ชุดนี้เข้าไปเพิ่มเติม เพื่อกำหนดการแสดงผลของหน้าจอที่มีขนาดน้อยกว่าหรือเท่ากับ 960px ให้แสดงผลเป็น column แนวตั้ง
ดู code พร้อมผลลัพท์การแสดงผลได้ที่
และนี่คือทั้งหมดของ How to Layout Accurately 101 ไว้เจอใหม่ใน blog ถัดไปครับ
หากชอบบทความของ FlowAccount Tech Blog อย่าลืมกด Follow นะครับ ติดตามบทความอื่นจาก FlowAccount Tech Blog ได้ที่ https://medium.com/flowaccount-tech
Open Positions jobs available on FlowAccount > https://flowaccount.com/en/jobs
