สร้างคอลัมน์บนเว็บไซต์ด้วย CSS Multi-column Layout Module ตอนที่ 1

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

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

Property ที่ใช้ในการจัดหน้าแบบคอลัมน์

  1. column-widthหมายถึงการกำหนดความกว้างของคอลัมน์ว่าจะให้แต่ละคอลัมน์กว้างเท่าไหร่
  2. column-countหมายถึงการระบุจำนวนของคอลัมน์ว่าจะให้มีจำนวนกีคอลัมน์ต่อหน้า
  3. column-gapหมายถึงการกำหนดความกว้างของระยะห่างระหว่างคอลัมน์
  4. column-rule-colorหมายถึงการกำหนดสีของเส้นแบ่งระหว่างคอลัมน์
  5. column-rule-styleหมายถึงการกำหนดรูปแบบของเส้นแบ่งระหว่างโดยเราสามารถกำหนดได้เหมือนกับการกำหนดรูปแบบของ Border
  6. column-rule-widthหมายถึงการกำหนดความหนาของเส้นแบ่งระหว่างคอลัมน์
  7. column-ruleหมายถึงเราสามารถกำหนด ทั้สี ความหนาของเส้นและรูปแบบข้องเส้นพร้อมกันได้เลย

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

ภาพตัวอย่างการใช้งาน Property ต่างๆ ในการจัดหน้า แบบคอลัมน์

ตัวอย่างการใช้งาน CSS Multi-column Layout

ตัวอย่างการเขียน HTML

การเขียน CSS สำหรับ

จะเห็นได้ว่าผมเพียงเขียน HTML ตามปกติเพียงแต่ทำการระบุ ความกว้างของคอลัมน์ และจำนวนของคอลัมน์ให้กับ element ที่เราต้องการให้แสดงผลแบบคอลัมน์เท่านั้นเองนะครับ และเติม -moz- และ -webkit- เข้าไปเพื่อให้ Firefox Chrome และ Safari รู้จัก Property เหล่านี้เท่นั้นนะครับ

ปัจจุบันยังมีแค่ Firefox, Chrome และ Safari เท่านั้นนะครับที่สามารถใช้งานได้ และยังมี Propety อีกหลายตัวที่จะช่วยให้เราสามารถจัดคอลัมน์ ได้สะดวกและสวยงามมากขึ้นซึ่งผมจะเขียนต่ออีกทีในตอนที่ 2 ถึงตอนนั้นหวังว่าเหล่าบราวเซอร์ที่เราใช้งานจะสามารถใช้งานคอลัมน์ได้เช่นกัน ยังไงลองดูโค๊ดและลองใช้งานกันดูก่อนนะครับขอบคุณครับ

Back to Top

4 Responses to สร้างคอลัมน์บนเว็บไซต์ด้วย CSS Multi-column Layout Module ตอนที่ 1

  1. Dussadee Tangthong

    ตอนนี้เว็บและสิ่งพิมพ์ ก็กำลังจะเท่าเทียมกันในการแสดงผลแล้วสิ

    Reply

  2. james

    รักthaicssมากๆ

    Reply

  3. Administrator

    เป็นบทความที่แจ่ม มากครับ ว่างๆ ไป Slim กันเนอะ

    Reply

  4. fatboy

    ทำไมผมไม่เห็นเป็นคอลัมน์เหมือนในรูปเลยครับ(ใช้ firefox แล้ว)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top