วิธีการใช้คอลัมน์ CSS สำหรับรูปแบบเว็บไซต์หลายคอลัมน์

วิธีแบ่งคอลัมน์ [Word] (อาจ 2025)

:

ข้อมูลพื้นฐานเกี่ยวกับคอลัมน์ CSS
ส่วนหัวของบทความของคุณ
เค้าโครงด้วยคอลัมน์ CSS
Latest News
จากบล็อกของเรา
Upcoming Events
คุณสมบัติคอลัมน์อื่น ๆ
เวลาทดลอง

หลายปีที่ผ่านมา CSS floats เป็นส่วนประกอบที่จำเป็นสำหรับการสร้างเค้าโครงเว็บไซต์ หากการออกแบบของคุณเรียกร้องให้มีหลายคอลัมน์คุณหันไปลอยตัว ปัญหาเกี่ยวกับวิธีนี้คือแม้จะมีความเฉลียวฉลาดเหลือเชื่อที่นักออกแบบเว็บ / นักพัฒนาซอฟต์แวร์ได้แสดงให้เห็นในการสร้างเค้าโครงเว็บไซต์ที่ซับซ้อน CSS floats ก็ไม่เคยมีความหมายอย่างแท้จริงที่จะใช้ในลักษณะนี้

ในขณะที่ลอยตัวและตำแหน่ง CSS แน่ใจว่าจะมีสถานที่ในการออกแบบเว็บเป็นเวลาหลายปีมาแล้วเทคนิคการวางผังใหม่รวมทั้ง CSS Grid และ Flexbox ช่วยให้นักออกแบบเว็บสามารถสร้างรูปแบบไซต์ได้ใหม่ อีกเทคนิคการจัดวางใหม่ที่แสดงถึงศักยภาพเป็น CSS หลายคอลัมน์

CSS Columns อยู่ห่างกันเพียงไม่กี่ปี แต่ขาดการสนับสนุนในเบราว์เซอร์รุ่นเก่า (ส่วนใหญ่เป็นเวอร์ชันเก่ากว่าของ Internet Explorer) ทำให้ผู้เชี่ยวชาญด้านเว็บจำนวนมากใช้สไตล์เหล่านี้ในการผลิต

เมื่อสิ้นสุดการสนับสนุน IE รุ่นเก่าเหล่านักออกแบบเว็บบางรายกำลังทดลองใช้ตัวเลือกรูปแบบ CSS ใหม่คอลัมน์ CSS รวมอยู่ด้วยและพบว่าพวกเขามีการควบคุมด้วยวิธีการใหม่ ๆ เหล่านี้มากกว่าที่ใช้กับ floats

ข้อมูลพื้นฐานเกี่ยวกับคอลัมน์ CSS

ตามที่ชื่อว่า CSS หลายคอลัมน์ (หรือที่เรียกว่าเค้าโครงหลายคอลัมน์ CSS3) ช่วยให้คุณสามารถแบ่งเนื้อหาลงในคอลัมน์ที่กำหนดได้ คุณสมบัติ CSS ขั้นพื้นฐานที่สุดที่คุณจะใช้ ได้แก่

คอลัมน์นับ
คอลัมน์ช่องว่าง

สำหรับคอลัมน์นับคุณระบุจำนวนคอลัมน์ที่คุณต้องการ ช่องว่างคอลัมน์จะเป็นรางหรือระยะห่างระหว่างคอลัมน์เหล่านั้น เบราเซอร์จะใช้ค่าเหล่านี้และแบ่งเนื้อหาให้เท่า ๆ กันตามจำนวนคอลัมน์ที่คุณระบุ

ตัวอย่างทั่วไปของ CSS หลายคอลัมน์ในทางปฏิบัติคือการแบ่งบล็อกเนื้อหาข้อความออกเป็นหลายคอลัมน์คล้ายคลึงกับสิ่งที่คุณเห็นในบทความในหนังสือพิมพ์ สมมติว่าคุณมีมาร์กอัป HTML ต่อไปนี้ (โปรดทราบว่าเพื่อวัตถุประสงค์เช่นฉันเพียงวางจุดเริ่มต้นของย่อหน้าหนึ่งในขณะที่ในทางปฏิบัติอาจมีหลายย่อหน้าของเนื้อหาในมาร์กอัปนี้):


ส่วนหัวของบทความของคุณ
ลองจินตนาการดูวรรคส์ของข้อความที่นี่ …

ถ้าคุณเขียนรูปแบบ CSS เหล่านี้แล้ว:

.content {-moz-column-count: 3; -webkit-column-count: 3; คอลัมน์นับ: 3; -moz-column-gap: 30px; - เว็บบล็อกช่องว่าง: 30px; ช่องว่างระหว่างคอลัมน์: 30px; }

กฎ CSS นี้จะแบ่งหมวด "เนื้อหา" ออกเป็น 3 คอลัมน์ที่เท่ากันโดยมีช่องว่างระหว่างพิกเซล 30 พิกเซล หากคุณต้องการสองคอลัมน์แทนที่จะเป็น 3 คุณก็จะเปลี่ยนค่าดังกล่าวและเบราว์เซอร์จะคำนวณความกว้างใหม่ของคอลัมน์เหล่านั้นเพื่อแบ่งเนื้อหาอย่างเท่าเทียมกัน ขอให้สังเกตว่าเราใช้คุณสมบัติ prefixed ของผู้ขายก่อนตามด้วยการประกาศที่ไม่ใช่ prefixed

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

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

เค้าโครงด้วยคอลัมน์ CSS

สมมติว่าคุณมีเว็บเพจที่มีเนื้อหาซึ่งมี 3 คอลัมน์เนื้อหา นี่คือเค้าโครงเว็บไซต์โดยทั่วไปและเพื่อให้ได้ 3 คอลัมน์ดังกล่าวคุณจะลอยส่วนต่างๆที่มีอยู่โดยทั่วไปด้วย CSS หลายคอลัมน์ง่ายกว่าเดิมมาก

นี่คือตัวอย่าง HTML บางส่วน:

 
จากบล็อกของเรา
เนื้อหาจะไปที่นี่ …
  ใช้ความกว้างของคอลัมน์มีคุณสมบัติอื่นนอกเหนือจาก "คอลัมน์นับ" ที่คุณสามารถใช้และขึ้นอยู่กับความต้องการของเค้าโครงของคุณอาจเป็นทางเลือกที่ดีกว่าสำหรับไซต์ของคุณ นี่คือ "ความกว้างของคอลัมน์" การใช้มาร์กอัป HTML เดียวกันดังที่แสดงไว้ก่อนหน้านี้เราสามารถทำสิ่งนี้ได้ด้วย CSS ของเรา:
 .content {-moz-column-width: 500px; - ความกว้างของหน้าเว็บ: 500px; ความกว้างของคอลัมน์: 500px; -moz-column-gap: 30px; - เว็บบล็อกช่องว่าง: 30px; ช่องว่างระหว่างคอลัมน์: 30px; }. div เนื้อหา {display: inline-block; }
วิธีนี้ใช้งานได้ว่าเบราว์เซอร์ใช้ "คอลัมน์กว้าง" นี้เป็นค่าสูงสุดของคอลัมน์นั้น ดังนั้นถ้าหน้าต่างเบราว์เซอร์มีขนาดไม่ถึง 500 พิกเซลทั้ง 3 หน่วยจะปรากฏในคอลัมน์เดียวหนึ่งในท็อปส์ซูของอีกส่วนหนึ่ง นี่คือรูปแบบทั่วไปที่ใช้สำหรับการออกแบบหน้าจอมือถือ / เล็ก ๆ
 






เมื่อความกว้างของเบราว์เซอร์เพิ่มขึ้นเพื่อให้พอดีกับ 2 คอลัมน์พร้อมกับช่องว่างของคอลัมน์ที่ระบุเบราว์เซอร์จะไปจากเค้าโครงคอลัมน์หนึ่งคอลัมน์ไปยังคอลัมน์สองคอลัมน์โดยอัตโนมัติ เพิ่มความกว้างของหน้าจอและในที่สุดคุณจะได้รับการออกแบบคอลัมน์ 3 คอลัมน์โดยแต่ละแผนกของเราจะแสดงในคอลัมน์ของตนเอง 3 แห่ง อีกครั้งนี่เป็นวิธีที่ดีในการตอบสนองรูปแบบที่เป็นมิตรซึ่งมีหลายอุปกรณ์และคุณไม่จำเป็นต้องใช้ข้อความค้นหาสื่อเพื่อเปลี่ยนรูปแบบการจัดวาง!
 คุณสมบัติคอลัมน์อื่น ๆ
นอกเหนือจากคุณสมบัติที่กล่าวถึงในที่นี้แล้วยังมีคุณสมบัติสำหรับ "กฎคอลัมน์" ได้แก่ สีลักษณะและความกว้างที่ช่วยให้คุณสามารถสร้างกฎระหว่างคอลัมน์ได้ เหล่านี้จะใช้แทนเส้นขอบถ้าคุณต้องการมีเส้นบางส่วนแยกคอลัมน์ของคุณ
 เวลาทดลอง
ปัจจุบัน CSS เค้าโครงหลายคอลัมน์ได้รับการสนับสนุนเป็นอย่างดีด้วยคำนำหน้าผู้ใช้เว็บกว่า 94% จะสามารถเห็นลักษณะเหล่านี้ได้และกลุ่มที่ไม่ได้รับการสนับสนุนนั้นจะเป็น Internet Explorer ที่เก่ากว่านี้ซึ่งคุณอาจไม่สามารถสนับสนุนได้อีกต่อไป
ด้วยการสนับสนุนในระดับนี้ในขณะนี้ไม่มีเหตุผลที่จะไม่เริ่มทำการทดลองกับคอลัมน์ CSS และปรับใช้สไตล์เหล่านี้ในเว็บไซต์ที่พร้อมใช้งานสำหรับการผลิต คุณสามารถเริ่มต้นการทดสอบของคุณโดยใช้ HTML และ CSS ที่นำเสนอในบทความนี้และเล่นรอบ ๆ ด้วยค่าที่ต่างกันเพื่อดูว่าอะไรจะดีที่สุดสำหรับรูปแบบของเว็บไซต์ของคุณ