บทความ "Basic Layout with CSS" นี้เป็นบทความที่กล่าวถึงพื้นฐานการจัดเลย์เอาท์ด้วย CSS ซึ่งครอบคลุมพื้นฐาน CSS ที่จำเป็นต่อการจัดเลย์เอาท์ หากคุณยังไม่รู้จัก CSS หรือไม่มีพื้นฐานมาก่อนเลย แนะนำว่าให้ไปอ่านบทความ "CSS เบื้องต้น" ก่อน

Introduction

หากคุณมีความรู้เกี่ยวกับ HTML หรือสามารถใช้ Tools ที่ช่วยสร้างเว็บเพจได้เช่น Dreamweaver แต่ยังไม่เคยเรียนรู้ CSS คุณก็คงสงสัยว่าเวบไซต์ที่มีการออกแบบที่สวยงามหรือมีการจัดแบ่งเลย์เอาท์อย่างเป็นรูปแบบเขาทำกันอย่างไร เราอาจพยายามใช้แท็ก <table> เข้าช่วยแล้ว แต่ยิ่งทำก็ยิ่งยุ่งเพราะใช้แท็ก <table> ซ้อนแล้วซ้อนอีกจนการเปลี่ยนแปลงแก้ไขเป็นไปด้วยความยากลำบาก ในบทความนี้ผมจะมาแนะนำวิธีการจัดเลย์เอาท์ให้กับ HTML ด้วย CSS โดยเริ่มต้นจากแท็ก <div> ซึ่งถือได้ว่าเป็นส่วนประกอบสำคัญในการจัดเลย์เอาท์ หากไม่มีแท็ก <div> แล้วเราอาจไม่สามารถทำเลย์เอาท์ที่สวยงามได้เลย จากนั้นจึงไปเรียนรู้สไตล์พื้นฐานที่จำเป็นต่อการจัดเลยเอาท์เช่น Width, Border, Margin, และ Padding เป็นต้น ต่อด้วยการจัด Position แบบต่างๆ แล้วจึงนำความรู้ทั้งหมดมาประยุกต์เป็นเลย์เอาท์ที่ใช้ได้จริงในตอนท้าย

Basic Building Blocks

Divisions (<div>)

Division Element หรือแท็ก <div> ใช้สำหรับแบ่งเว็บเพจออกเป็นพื้นที่ต่างๆ เช่นการแบ่งเว็บเพจออกเป็นส่วน Header, ส่วน Menu, ส่วน Sidebar, ส่วน Content, ส่วน Footer เป็นต้น หากเราไม่ทำการแบ่งพื้นที่เสียก่อน เราก็ไม่สามารถจัดรูปแบบเลย์เอาท์ (โดยเฉพาะในรูปแบบ Box) ได้ ตัวอย่างเช่น

<div id="content">
  <p>Welcome to my site</p>
</div>
<div id= "footer">
  <p>Copyright 2011</p>
</div>

ตัวอย่างข้างต้นมีการแบ่งพื้นที่ออกเป็นสองส่วนคือ ส่วน content และ footer โปรดสังเกตว่ามีการใช้แอททริบิวท์ id ช่วย ดังนั้นเราสามารถกำหนดสไตล์ให้กับแต่ละพื้นที่ได้ แท็ก <div> ยังสามารถประกอบไปด้วยแท็ก <div> ย่อยได้อีกด้วย ตัวอย่างเช่น

<div id="header">
  <div id= "logo">
    . . .
  </div>
  <div id= "banner">
    . . .
  </div>
</div>

จากตัวอย่างข้างต้นพื้นที่ Header ยังถูกแบ่งออกเป็น 2 พื้นที่ย่อยอีกคือ ส่วนที่ใช้แสดง Logo และส่วนที่ใช้แสดง Banner แต่ทั้งสองส่วนก็อยู่ภายใต้แท็ก <div id="header"> เช่นกัน

Width และ Height

พร็อพเพอร์ตี้ width ใช้สำหรับกำหนดความกว้างให้กับ HTML Elements ต่างๆ เช่นเราอยากให้พื้นที่แสดง Logo ของเรามีความกว้าง 200 พิกเซล แทนที่จะขยายพื้นที่จนเต็มความกว้างของเบราว์เซอร์เป็นต้น ตัวอย่างเช่น

HTML:
<div id="logo">
  <h1>My Logo</h1>
</div>

CSS:
#logo {
  width: 200px;
  background-color: #BBBBBB;
}

รูปที่ 1

ตัวอย่างข้างต้นกำหนดให้ Logo ใช้พื้นที่เพียง 200 พิกเซลเท่านั้นดังแสดงในรูปที่ 1 ในตัวอย่างนี้เรากำหนดให้หน่วยเป็นพิกเซล (px) เราอาจใช้หน่วยอื่นเช่นเปอร์เซ็นต์ (%) ก็ได้ โปรดสังเกตว่าเรากำหนดสีพื้นหลังให้เป็นสีเทาอ่อนก็เพื่อให้เห็นผลลัพธ์ของการกำหนดค่าความกว้าง

พร็อพเพอร์ตี้ height ก็เช่นเดียวกับ width คือใช้กำหนดความสูงของ HTML Elements ต่างๆ เช่นถ้าเราต้องการกำหนดความสูงให้กับ Logo ในตัวอย่างที่ผ่านมาก็ทำได้ดังนี้

#logo {
  width: 200px;
  height: 150px;
  background-color: #BBBBBB;
}

รูปที่ 2

และผลลัพธ์ที่ได้ก็จะได้ดังปรากฏในรูปที่ 2 หากเราไม่รู้จักการกำหนดค่า width และ height องค์ประกอบต่างๆของเว็บเพจอาจจะทับซ้อนหรือเหลื่อมล้ำกันได้นั่นเอง

Border

ในหัวข้อที่ผ่านมาเราใช้พร็อพเพอร์ตี้ background-color ในการแสดงพื้นที่ของ HTML Element อันที่จริงเราสามารถใช้ Border เพื่อแสดงขอบเขตของ HTML Elements ต่างๆได้ แล้วทำไมเราต้องแสดงขอบเขตด้วย เราอาจใช้ Border เพื่อเรื่องของความสวยงาม และที่สำคัญ Border ยังช่วยในการจัดเลย์เอาท์อีกด้วย เพราะบางครั้งเราต้องการเห็นเส้นขอบเขตของแต่ละ Element ในแต่ละรูปแบบที่เราจัด Border ช่วยให้เราเห็นการเปลี่ยนแปลงที่เกิดขึ้นได้ พร็อพเพอร์ตี้ที่เกี่ยวข้องกับ Border มีอยู่หลายตัวด้วยกัน ตัวที่ใช้กันอยู่เป็นหลักคือ border

พร็อพเพอร์ตี้ border เป็นพร็อพเพอร์ตี้ที่ใช้ในการกำหนดความหนาของเส้นขอบ ลักษณะเส้นขอบและสี ตัวอย่างเช่น

HTML:
<div id="logo">
  <h1>My Logo</h1>
</div>

CSS:
#logo {
  width: 200px;
  height: 150px;
  border: 1px solid #000000;
}

รูปที่ 3

ตัวอย่างข้างต้นเป็นการตีกรอบด้วยเส้นความหนาขนาด 1 พิกเซล เป็นแบบเรียบ (solid) และใช้สีดำดังแสดงในรูปที่ 3 ลักษณะของการวาดเส้นมีได้หลายรูปแบบได้แก่ dotted, dashed, solid, double, groove, ridge, inset, และ outset ก็ลองเปลี่ยนเป็นรูปแบบต่างๆดูนะครับ นอกจากนี้เรายังสามารถที่จะตีเส้นกรอบเฉพาะเพียงบางด้านเท่านั้นก็ได้ ในกรณีนี้เราจะต้องใช้พร็อพเพอร์ตี้ border-top, border-right, border-bottom, และ border-left แทน ซึ่งก็จะเป็นการระบุแบบเจาะจงลงไป เราสามารถเอาพร็อพเพอร์ตี้เหล่านี้มาประยุกต์กับการตกแต่งเว็บเพจได้ เช่นใช้กรอบไฮไลท์เมนูปัจจุบันเป็นต้น

Margin และ Padding

Margin และ Padding เป็นอีกสองพร็อพเพอร์ตี้ที่สำคัญมากในการจัดเลย์เอาท์ Margin และ Padding เป็นพร็อพเพอร์ตี้ที่เกี่ยวกับการจัดแบ่งช่องไฟหรือระยะห่างระหว่าง HTML Element

พร็อพเพอร์ตี้ margin ใช้ในการกำหนดความห่างหรือช่องว่างระหว่างเส้นขอบของ HTML Element ตัวมันเองกับ Element ชั้นนอก ดูตัวอย่างเลยแล้วกัน

<body>
  <div id="logo">
    <h1>My Logo</h1>
  </div>
</body>

จากตัวอย่าง HTML ข้างต้น
Q: ถ้าเรากำหนด margin ให้กับแท็ก <body> นั่นหมายถึง
A: เรากำหนดความห่างระหว่างเส้นขอบของแท็ก <body> กับขอบของเบราว์เซอร์ เพราะแท็ก <body> ถือเป็นจุดเริ่มต้นของการแสดงผล
Q: และหากกำหนด margin ให้กับแท็ก <div> ก็เท่ากับว่า
A: กำหนดความห่างของเส้นขอบของแท็ก <div> กับแท็ก <body> (ในกรณีนี้คือเส้นขอบของ <body> เว้นเสียแต่ว่ามีข้อความแทรก)
อย่าลืมนะครับว่า margin คือระยะห่างของเส้นขอบตัวมันเองกับ Element ชั้นนอก เอาหล่ะดูตัวอย่างจริงเลยดีกว่า

HTML:
<body>
  <div id="logo">
    <h1>My Logo</h1>
  </div>
</body>

CSS: 
body {
  margin: 10px;
  border: 1px solid #0000FF;  /* blue */
}
#logo {
  width: 200px;
  height: 150px;
  margin: 10px;
  border: 2px dashed #FF0000;  /* red */
  background-color: #BBBBBB;
}

รูปที่ 4

จากตัวอย่างข้างต้นเราก็จะได้ผลลัพธ์ดังรูปที่ 4 ถ้าหากเราละ margin ของแท็ก <body> ไว้ เบราว์เซอร์จะใช้ค่าตั้งต้นที่แตกต่างกันคือประมาณ 5-10 พิกเซล ดังนั้นถ้าไม่ต้องการให้มีช่องว่างระหว่างขอบเบราว์เซอร์กับแท็ก <body> ก็ให้กำหนด margin เป็น 0

ในการกำหนดค่า margin นั้นไม่จำเป็นต้องกำหนดให้มีค่าเท่ากันทุกด้านเสมอไป เราสามารถแยกกำหนดค่า margin ของแต่ละด้านได้โดยใช้พร็อพเพอร์ตี้ดังต่อไปนี้ margin-top, margin-right, margin-bottom, และ margin-left ตัวอย่างเช่น

#logo {
  width: 200px;
  height: 150px;
  margin-top: 25px;
  margin-right: 10px;
  margin-bottom: 40px;
  margin-left: 10px;
  border: 2px dashed #FF0000;  /* red */
  background-color: #BBBBBB;
}

นอกจากนี้ยังสามารถแยกกำหนด margin ของแต่ละด้านด้วยการเขียนภายในบรรทัดเดียวได้ดังนี้

Syntax:
  margin: top right bottom left;

#logo {
  width: 200px;
  height: 150px;
  margin: 25px 10px 40px 10px;
  border: 2px dashed #FF0000;  /* red */
  background-color: #BBBBBB;
}

รูปแบบนี้สั้นดีแต่ต้องจำลำดับของแต่ละด้านให้ได้นะครับ จำง่ายๆเริ่มต้นที่ Top และหมุนวนตามเข็มนาฬิกาดังรูปที่ 5 ครับ

รูปที่ 5

Padding

ในขณะที่ margin คือระยะห่างระหว่างเส้นขอบของตัวมันเองกับ HTML Element ชั้นนอก Padding คือระยะห่างระหว่างเส้นขอบของตัวมันเองกับเนื้อหาภายใน พูดง่ายๆถ้าหากเราตีกรอบแล้วไม่ต้องการให้ข้อความอยู่ติดกับเส้นขอบ อยากให้ข้อความขยับออกห่างเพื่อความสวยงาม นั่นก็คือระยะ Padding นั่นเอง เช่นถ้าต้องการให้ Logo เว้นระยะจากเส้นขอบซัก 10 พิกเซล ก็สามารถเขียนได้ดังนี้

HTML:
<body>
  <div id="logo">
    <h1>My Logo</h1>
  </div>
</body>

CSS:
body {
  margin: 10px;
  border: 1px solid #0000FF;  /* blue */
}
#logo {
  width: 200px;
  height: 150px;
  margin: 10px;
  padding: 10px;
  border: 2px dashed #FF0000;  /* red */
  background-color: #BBBBBB;
}

รูปที่ 6

ผลลัพธ์ที่ได้ก็เป็นไปตามรูปที่ 6 โปรดสังเกตดีๆว่าคำว่า "My Logo" ขยับออกห่างจากเส้นป่ะสีแดงไป 10 พิกเซล และเช่นเดียวกับ Margin ค่าที่กำหนดให้กับ Padding ไม่จำเป็นต้องมีค่าที่เท่ากันทุกด้านเสมอไป เราสามารถใช้พร็อพเพอร์ตี้เหล่านี้ได้ padding-top, padding-right, padding-bottom, และ padding-left ได้ หรืออาจกำหนดค่าให้แต่ละด้านภายในบรรทัดเดียวกันก็ได้ดังนี้

Syntax:
  padding: top right bottom left;

เริ่มจากด้าน Top แล้วหมุนวนตามเข็มนาฬิกาเช่นกัน