การปรับแต่ง List ด้วย CSS

การปรับแต่ง List ด้วย CSS

ในบทเรียนนี้ เราจะมาเรียนรู้วิธีการปรับแต่ง List (<ul> สำหรับ unordered list และ <ol> สำหรับ ordered list) ด้วย CSS เพื่อให้ List ของเราดูสวยงามและตรงกับความต้องการของเว็บไซต์ของเรา

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

พื้นฐานเกี่ยวกับ List

ก่อนที่เราจะเริ่มปรับแต่ง List ด้วย CSS เรามาทบทวนพื้นฐานเกี่ยวกับ List ใน HTML กันก่อน

Unordered List (<ul>)

Unordered List ใช้สำหรับแสดงรายการที่ไม่มีลำดับความสำคัญ โดยแต่ละรายการจะถูกแสดงด้วย bullet (จุด)

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List (<ol>)

Ordered List ใช้สำหรับแสดงรายการที่มีลำดับความสำคัญ โดยแต่ละรายการจะถูกแสดงด้วยตัวเลขหรือตัวอักษร

<ol>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

การปรับแต่ง List ด้วย CSS

CSS มี properties หลายตัวที่ช่วยให้เราสามารถปรับแต่ง List ได้อย่างหลากหลาย ในบทนี้เราจะเน้นไปที่ properties หลักๆ ที่ใช้บ่อย ได้แก่ list-style-type, list-style-position, และ list-style-image

list-style-type

list-style-type ใช้สำหรับกำหนดรูปแบบของ marker (bullet หรือ ตัวเลข/ตัวอักษร) ที่แสดงหน้าแต่ละรายการใน List

สำหรับ <ul> (unordered list) ค่าที่เป็นไปได้ของ list-style-type ได้แก่:

• disc: (ค่าเริ่มต้น) แสดงเป็นวงกลมทึบ
• circle: แสดงเป็นวงกลมโปร่ง
• square: แสดงเป็นสี่เหลี่ยมทึบ
• none: ไม่แสดง marker ใดๆ

ul {
  list-style-type: square; /* เปลี่ยน bullet เป็นสี่เหลี่ยม */
}

ul.no-bullets {
  list-style-type: none; /* ซ่อน bullet ทั้งหมด */
}

<ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="no-bullets">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

สำหรับ <ol> (ordered list) ค่าที่เป็นไปได้ของ list-style-type มีหลากหลายกว่า ได้แก่:

• decimal: (ค่าเริ่มต้น) แสดงเป็นตัวเลข (1, 2, 3, ...)
• lower-alpha: แสดงเป็นตัวอักษรภาษาอังกฤษตัวเล็ก (a, b, c, ...)
• upper-alpha: แสดงเป็นตัวอักษรภาษาอังกฤษตัวใหญ่ (A, B, C, ...)
• lower-roman: แสดงเป็นเลขโรมันตัวเล็ก (i, ii, iii, ...)
• upper-roman: แสดงเป็นเลขโรมันตัวใหญ่ (I, II, III, ...)
• none: ไม่แสดง marker ใดๆ

ol {
  list-style-type: upper-roman; /* เปลี่ยนเป็นเลขโรมันตัวใหญ่ */
}

<ol style="list-style-type: upper-roman;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

list-style-position

list-style-position ใช้สำหรับกำหนดตำแหน่งของ marker (bullet หรือ ตัวเลข/ตัวอักษร) เทียบกับเนื้อหาของรายการ

ค่าที่เป็นไปได้ของ list-style-position ได้แก่:

• outside: (ค่าเริ่มต้น) marker จะอยู่ด้านนอกเนื้อหาของรายการ
• inside: marker จะอยู่ด้านในเนื้อหาของรายการ

ul {
  list-style-position: inside; /* ให้ bullet อยู่ข้างใน */
}

<ul style="list-style-position: inside;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

การใช้ list-style-position: inside; จะทำให้ข้อความในแต่ละ <li> เริ่มต้นที่ตำแหน่งเดียวกับ bullet ทำให้ List ดูเป็นระเบียบมากขึ้น โดยเฉพาะอย่างยิ่งเมื่อข้อความในแต่ละ <li> มีความยาวไม่เท่ากัน

list-style-image

list-style-image ใช้สำหรับกำหนดรูปภาพที่จะใช้เป็น marker แทน bullet หรือ ตัวเลข/ตัวอักษร

ค่าของ list-style-image คือ URL ของรูปภาพ

ul {
  list-style-image: url('bullet.png'); /* ใช้รูป bullet.png แทน bullet */
}

<ul style="list-style-image: url('bullet.png');">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

**ข้อควรจำ:** ตรวจสอบให้แน่ใจว่ารูปภาพ bullet.png มีอยู่ในตำแหน่งที่ถูกต้อง และมีขนาดที่เหมาะสมเพื่อให้แสดงผลได้สวยงาม

Short Hand Property: list-style

เราสามารถใช้ short hand property list-style เพื่อกำหนดค่าของ list-style-type, list-style-position, และ list-style-image ได้ในบรรทัดเดียว

รูปแบบการใช้งานคือ: list-style: list-style-type list-style-position list-style-image;

ตัวอย่าง:

ul {
  list-style: square inside url('bullet.png');
}

ในตัวอย่างนี้ เราได้กำหนดให้ <ul> แสดงผลเป็นสี่เหลี่ยม (square) ที่อยู่ด้านใน (inside) โดยใช้รูปภาพ bullet.png เป็น marker

หากเราไม่ต้องการกำหนดค่าใดค่าหนึ่ง เราสามารถละเว้นค่านั้นได้ เช่น:

ul {
  list-style: inside; /* กำหนดเฉพาะ list-style-position */
}

การปรับแต่งเพิ่มเติม

นอกเหนือจาก properties ที่กล่าวมาข้างต้น เรายังสามารถปรับแต่ง List ด้วย properties อื่นๆ เช่น margin, padding, font-size, และ color เพื่อให้ List ของเราดูสวยงามและเข้ากับดีไซน์ของเว็บไซต์

ul {
  margin-left: 20px; /* เพิ่ม margin ด้านซ้าย */
  padding-left: 0; /* ลบ padding ด้านซ้าย */
  font-size: 16px; /* กำหนดขนาดตัวอักษร */
  color: #333; /* กำหนดสีตัวอักษร */
}

li {
  margin-bottom: 5px; /* เพิ่ม margin ด้านล่างระหว่างแต่ละรายการ */
}

การปรับแต่ง margin และ padding จะช่วยให้เราควบคุมระยะห่างระหว่าง marker และเนื้อหาของรายการ รวมถึงระยะห่างระหว่างรายการต่างๆ ใน List ได้

สรุป

ในบทเรียนนี้ เราได้เรียนรู้วิธีการปรับแต่ง List ด้วย CSS โดยใช้ properties list-style-type, list-style-position, และ list-style-image รวมถึงการใช้ short hand property list-style และการปรับแต่งเพิ่มเติมด้วย properties อื่นๆ

การปรับแต่ง List ด้วย CSS เป็นทักษะพื้นฐานที่สำคัญสำหรับนักพัฒนาเว็บไซต์ทุกคน การเข้าใจและใช้งาน properties เหล่านี้จะช่วยให้เราสามารถสร้าง List ที่สวยงามและตรงกับความต้องการของเว็บไซต์ของเราได้

ในบทเรียนต่อไป เราจะมาเรียนรู้วิธีการสร้าง Table ที่สวยงามด้วย CSS