สร้างคอลัมน์บนเว็บไซต์ด้วย 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 ไว้นะครับ

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

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

<article class="=เขียนโค๊ดแบบยาว">
<p>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า กว่าบรรดา ฝูงสัตว์ เดรัจฉาน จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ 
ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย เหมือนกีฬา อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ 
พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
<figure class="จัดกลาง"><img src="images/sam-01.jpg" alt="ภาพภายในวัดพระสิงห์วรวิหาร
"></figure>
<p>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า กว่าบรรดา ฝูงสัตว์ เดรัจฉาน จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ 
ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย เหมือนกีฬา อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ 
พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
<h2>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า</h2>
<p>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า กว่าบรรดา ฝูงสัตว์ เดรัจฉาน จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ 
ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย เหมือนกีฬา อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
<figure class="จัดซ้าย"><img src="images/sam-02.jpg" 
alt="ภาพภายในวัดพระสิงห์วรวิหาร"></figure>
<p><strong>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า</strong> กว่าบรรดา ฝูงสัตว์ เดรัจฉาน 
จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย เหมือนกีฬา 
อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
<p>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า กว่าบรรดา ฝูงสัตว์ เดรัจฉาน จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ 
ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย เหมือนกีฬา อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ 
พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
</article>
<h2 class="พาดหัว-ตรงกลาง">กำหนดใจ พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</h2>
<article class="=เขียนโค๊ดแบบสั้น">
<p><strong>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า</strong> กว่าบรรดา ฝูงสัตว์ 
เดรัจฉาน จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย 
เหมือนกีฬา อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
<p>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า กว่าบรรดา ฝูงสัตว์ เดรัจฉาน จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ 
ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย เหมือนกีฬา อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ 
พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
<h3>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า</h3>
<figure class="จัดขวา"><img src="images/sam-03.jpg" 
alt="ภาพภายในวัดพระสิงห์วรวิหาร"></figure>
<p>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า กว่าบรรดา ฝูงสัตว์ เดรัจฉาน จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ 
ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย เหมือนกีฬา อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ 
พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
<p><strong>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า</strong> กว่าบรรดา ฝูงสัตว์ เดรัจฉาน 
จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย เหมือนกีฬา 
อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
<p>เป็นมนุษย์ สุดประเสริฐ เลิศคุณค่า กว่าบรรดา ฝูงสัตว์ เดรัจฉาน จงฝ่าฟัน พัฒนา วิชาการ อย่าล้างผลาญ 
ฤๅเข่นฆ่า บีฑาใคร ไม่ถือโทษ โกรธแช่งซัด ฮึดฮัดด่า หัดอภัย เหมือนกีฬา อัชฌาสัย ปฏิบัติ ประพฤติกฎ กำหนดใจ 
พูดจาให้ จ๊ะๆ จ๋า น่าฟังเอยฯ</p>
</article>

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

figure {
margin: 0;
padding: 0;
}
img {
display: block;
padding: 3px;
background: #FFF;
}
*[class="พาดหัว-ตรงกลาง"] {
text-align: center;
background: #333;
padding: 20px;
}
*[class*="เขียนโค๊ดแบบสั้น"] {
-moz-column-count: 4;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid #FFF;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid #FFF;
column-count: 4;
column-gap: 1em;
column-rule: 1px solid #FFF;
}
*[class*="เขียนโค๊ดแบบยาว"] {
-moz-column-width: 170px;
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1px;
-moz-column-rule-color: pink;
-webkit-column-width: 170px;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid #FFF;
-webkit-column-rule-style: solid;
-webkit-column-rule-width: 1px;
-webkit-column-rule-color: pink;
column-width: 170px;
column-count: 3;
column-gap: 1em;
column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: pink;
background: #666;
padding: 10px;
}
figure[class="จัดกลาง"]>img {
width: 100%;
margin: 10px auto;
}
figure[class="จัดซ้าย"]>img {
width: 60%;
display: block;
float: left;
margin: 0 5px 5px 0;
}
figure[class="จัดขวา"]>img {
width: 60%;
display: block;
float: right;
margin: 0 0 5px 5px;
}

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

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