การจัดรูปแบบรายการโฆษณา

มาดูวิธีที่มีประโยชน์และสร้างสรรค์ในการจัดรูปแบบรายการกัน

Michelle Barker

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

บทความนี้จะเจาะลึกเกี่ยวกับรายการ HTML ประเภทต่างๆ ที่เรามีให้บริการบนเว็บและกรณีที่ควรใช้รายการดังกล่าว รวมถึงแอตทริบิวต์บางอย่างที่คุณอาจยังไม่คุ้นเคย นอกจากนี้ เรายังมาดูวิธีที่เป็นประโยชน์และสร้างสรรค์ในการจัดรูปแบบโฆษณาด้วย CSS กันอีกด้วย

กรณีที่ควรใช้รายการ

ควรใช้องค์ประกอบรายการ HTML เมื่อต้องจัดกลุ่มรายการเชิงความหมาย เทคโนโลยีความช่วยเหลือพิเศษ (เช่น โปรแกรมอ่านหน้าจอ) จะแจ้งให้ผู้ใช้ทราบว่ามีรายการและจํานวนรายการ สมมติว่ามีตารางผลิตภัณฑ์บนเว็บไซต์ช็อปปิ้ง การรู้ข้อมูลนี้จะเป็นประโยชน์อย่างมาก ดังนั้น การใช้องค์ประกอบรายการอาจเป็นตัวเลือกที่ดี

แสดงรายการประเภท

เมื่อพูดถึงมาร์กอัป เราจะมีองค์ประกอบรายการที่แตกต่างกัน 3 ตัวเลือกดังต่อไปนี้

  • รายการที่ไม่เรียงลำดับ
  • รายการตามลำดับ
  • รายการคำอธิบาย

จะเลือกคำตอบใดนั้นขึ้นอยู่กับกรณีการใช้งาน

รายการที่ไม่เรียงลำดับ (ul)

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

รายการช็อปปิ้ง รายการ เช่น ขนมปัง นม แอปเปิ้ล

ตัวอย่างทั่วไปในเว็บคือเมนูการนำทาง เมื่อสร้างเมนู แนวทางปฏิบัติแนะนำคือการรวม ul ในองค์ประกอบ nav และระบุเมนูด้วยป้ายกำกับเพื่อช่วยเทคโนโลยีความช่วยเหลือพิเศษ เราควรระบุหน้าปัจจุบันในเมนูด้วย ซึ่งเราสามารถทำได้โดยใช้แอตทริบิวต์ aria-current ดังนี้

<nav aria-label="Main">  
  <ul>  
    <li>  
      <a href="/page-1" aria-current="page">Menu item 1</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
      …  
    </ul>  
</nav>

บทความเกี่ยวกับโครงสร้างเมนูนี้มีคำแนะนำหลายประการเพื่อให้แน่ใจว่าทุกคนจะเข้าถึงเมนูการนำทางได้

รายการตามลำดับ (ol)

องค์ประกอบรายการที่เรียงลำดับ (<ol>) เป็นตัวเลือกที่ดีที่สุดเมื่อลำดับสินค้ามีความสำคัญ เช่น กระบวนการที่มีหลายขั้นตอน รายการย่อยจะมีลำดับเลขโดยค่าเริ่มต้น เช่น ชุดวิธีการซึ่งต้องดำเนินการตามขั้นตอนให้เสร็จสมบูรณ์

รายการอธิบายขั้นตอนที่จำเป็นในการชงชาด้วยนม

ทั้งองค์ประกอบ <ol> และ <ul> จะมีองค์ประกอบ <li> เป็นองค์ประกอบย่อยโดยตรงได้เท่านั้น

รายการคำอธิบาย (dl)

รายการคำอธิบายประกอบด้วยคำ (<dt> องค์ประกอบ) และคำอธิบาย (<dd>) แต่ละคำอาจมีคำอธิบายมากกว่า 1 รายการ กรณีการใช้งานที่เป็นไปได้อาจรวมถึงอภิธานศัพท์หรือเมนูอาหารของร้านอาหาร รายการคำอธิบายจะไม่แสดงพร้อมเครื่องหมายโดยค่าเริ่มต้น แม้ว่าเบราว์เซอร์มีแนวโน้มที่จะเยื้ององค์ประกอบ <dd>

ใน HTML จะได้รับอนุญาตให้จัดกลุ่มคำศัพท์ที่มีคำอธิบายประกอบโดยใช้ <div> ซึ่งจะเป็นประโยชน์สำหรับวัตถุประสงค์ในการจัดรูปแบบ ซึ่งเราจะดูในภายหลัง

<!-- This is valid --> 
<dl>  
    <dt>Term 1</dt>  
    <dd>This is the first description of the first term in the list</dd>  
    <dd>This is the second description of the first term in the list</dd>  
    <dt>Term 2</dt>  
    <dd>This is the description of the second term in the list</dd>  
</dl>

<!-- This is also valid --> 
<dl>  
    <div>  
        <dt>Term 1</dt>  
        <dd>This is the first description of the first term in the list</dd>  
        <dd>This is the second description of the first term in the list</dd>  
    </div>  
    <div>  
        <dt>Term 2</dt>  
        <dd>This is the description of the second term in the list</dd>  
    </div>  
</dl>

การจัดรูปแบบรายการแบบง่าย

หนึ่งในการใช้งานที่ง่ายที่สุดของรายชื่ออยู่ภายในบล็อกข้อความเนื้อหา บ่อยครั้งที่รายการง่ายๆ เหล่านี้ไม่จำเป็นต้องใช้การจัดรูปแบบที่ซับซ้อน แต่เราอาจต้องการปรับแต่งเครื่องหมายของรายการที่เรียงลำดับหรือไม่เรียงลำดับบางส่วน เช่น แสดงด้วยสีของแบรนด์ หรือโดยใช้รูปภาพที่กำหนดเองสำหรับหัวข้อย่อยของเรา เราทำงานได้หลายอย่างกับ list-style และองค์ประกอบเทียม ::marker

::เครื่องหมาย

นอกจากการระบุการจัดรูปแบบพื้นฐานให้กับเครื่องหมายรายการแล้ว เรายังสามารถสร้างหัวข้อย่อยแบบวนซ้ำได้ด้วย ในตัวอย่างนี้ เราใช้ URL รูปภาพที่แตกต่างกัน 3 รายการสำหรับค่า content ขององค์ประกอบจำลอง ::marker ทำให้ตัวอย่างรายการช้อปปิ้งของเรารู้สึกเหมือนที่เขียนด้วยมือ (ไม่ใช่แค่การใช้รูปภาพเดียวสำหรับทุกคน)

::marker {  
    content: url("/marker-1.svg") ' ';  
}

li:nth-child(3n)::marker {  
    content: url("/marker-2.svg") ' ';  
}

li:nth-child(3n - 1)::marker {  
    content: url("/marker-3.svg") ' ';  
}

ตัวนับที่กำหนดเอง

สำหรับรายการที่เรียงลำดับแล้ว เราอาจต้องการใช้ค่าตัวนับ แล้วเพิ่มค่าอื่นต่อท้าย เราสามารถใช้ตัวนับ list-item เป็นค่าสำหรับพร็อพเพอร์ตี้ content ของเครื่องหมาย และต่อท้ายเนื้อหาอื่นๆ ได้

::marker {  
    content: counter(list-item) '🐈 ';  
}

ตัวนับของเราจะเพิ่มขึ้นทีละ 1 โดยอัตโนมัติ แต่เราอนุญาตให้ตัวนับเพิ่มค่าอื่นได้หากเราเลือก โดยการตั้งค่าพร็อพเพอร์ตี้ counter-increment ในรายการ ตัวอย่างเช่น การกระทำนี้จะเพิ่มตัวนับ 3 ครั้งต่อ:

li {  
    counter-increment: list-item 3;  
}

ยังมีสิ่งอื่นๆ อีกมากมายที่เราสามารถเจาะลึกเกี่ยวกับตัวนับ บทความรายการ CSS, เครื่องหมายและตัวนับ จะอธิบายความเป็นไปได้บางอย่างอย่างละเอียด

ข้อจำกัดของ ::การจัดรูปแบบของเครื่องหมาย

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

การจัดรูปแบบรายการที่ไม่เหมือนรายการ

บางครั้งเราอาจต้องการจัดรูปแบบรายการให้แตกต่างจากการจัดรูปแบบเริ่มต้นโดยสิ้นเชิง กรณีเช่นนี้มักจะใช้กับเมนูการนำทาง เช่น เมื่อเรามักต้องการนำเครื่องหมายทั้งหมดออก และอาจแสดงรายการในแนวนอนโดยใช้ Flexbox แนวทางปฏิบัติทั่วไปคือการตั้งค่าพร็อพเพอร์ตี้ list-style เป็น none ซึ่งหมายความว่าคุณจะเข้าถึงองค์ประกอบเทียมของเครื่องหมายใน DOM ไม่ได้อีกต่อไป

เครื่องหมายที่กำหนดเองที่มี ::before

การจัดรูปแบบองค์ประกอบเทียม ::before เป็นวิธีทั่วไปในการสร้างตัวทำเครื่องหมายรายการที่กำหนดเองก่อนที่จะมี ::marker แต่ถึงตอนนี้ เครื่องมือดังกล่าวยังช่วยให้เรามีความยืดหยุ่นมากขึ้นในเวลาที่ต้องการ สำหรับการจัดรูปแบบลิสต์ที่ซับซ้อนได้ด้วย

เราเพิ่มรูปแบบหัวข้อย่อยที่กำหนดเองได้โดยใช้แอตทริบิวต์ content เช่นเดียวกับ ::marker เราต้องดำเนินการระบุตำแหน่งด้วยตนเอง ซึ่งต่างจากการใช้ ::marker เนื่องจากเราไม่ได้รับประโยชน์โดยอัตโนมัติจาก list-style-position แต่เราวางจุดยืนได้ค่อนข้างง่ายด้วย Flexbox ซึ่งจะเปิดโอกาสต่างๆ ให้สอดคล้องกันมากขึ้น ตัวอย่างเช่น เราสามารถเปลี่ยนตำแหน่งของเครื่องหมายได้ ดังนี้

หากเราจัดรายการที่เรียงลำดับแล้วโดยใช้องค์ประกอบ ::before เราอาจใช้ตัวนับเพื่อเพิ่มตัวทำเครื่องหมายตัวเลขด้วย

li::before {  
  counter-increment: list-item;  
  content: counter(list-item);  
}

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

แอตทริบิวต์รายการ

องค์ประกอบรายการที่เรียงลำดับแล้วจะยอมรับแอตทริบิวต์ที่ไม่บังคับบางรายการ ซึ่งช่วยเราได้ในหลายกรณี

รายการที่เปลี่ยนกลับ

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

ดูการสาธิต 10 อัลบั้มยอดนิยมจากปี 2021 หากตัวนับเพิ่มขึ้นด้วย CSS เท่านั้น ผู้ที่เข้าถึงหน้าเว็บโดยใช้โปรแกรมอ่านหน้าจออาจสรุปว่าตัวเลขที่นับขึ้นนั้นทำให้ตัวเลข 10 เป็นอันดับ 1 จริงๆ

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

li::before {  
  counter-increment: list-item -1;  
  content: counter(list-item);  
}

ซึ่งเพียงพอแล้วใน Firefox แต่ใน Chrome และ Safari เครื่องหมายจะนับถอยหลังจาก 0 ถึง -10 เราแก้ปัญหานี้ได้โดยการเพิ่มแอตทริบิวต์ start ลงในรายการ

แยกรายการ

แอตทริบิวต์ start ช่วยให้เราระบุค่าตัวเลขที่จะใช้เริ่มต้นรายการได้ วิธีหนึ่งที่จะเป็นประโยชน์คือในกรณีที่คุณต้องการแยกรายการเป็นกลุ่ม

มาดูตัวอย่างอัลบั้ม 10 อันดับแรกของเรากัน บางทีเราอาจต้องการนับถอยหลัง 20 อัลบั้มยอดนิยม แต่เป็นกลุ่ม 10 อัลบั้ม ในระหว่าง 2 กลุ่มนี้มีเนื้อหาอื่นๆ อีกจำนวนหนึ่งของหน้า

รายการไวร์เฟรมในคอลัมน์ที่มีองค์ประกอบทอดข้ามคอลัมน์ตรงกลาง

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

<ol reversed start="20">  
  <li>...</li>  
  <li>...</li>  
  <li>...</li>  
</ol>

เลย์เอาต์รายการหลายคอลัมน์

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

ol {  
    columns: 25rem;  
    column-gap: 7rem;  
    column-rule: 4px dotted turquoise;  
}

ในบางครั้ง การใช้คอลัมน์ทำให้รายการของเรามีจุดที่ไม่น่าสนใจเสมอไป ไม่ใช่ผลลัพธ์ที่เราต้องการเสมอไป

การสาธิตวิธีแยกเนื้อหาระหว่าง 2 คอลัมน์

เราป้องกันช่วงพักที่บังคับได้โดยใช้ break-inside: avoid ในรายการของเรา

li {  
    break-inside: avoid;  
}

คุณสมบัติที่กำหนดเอง

พร็อพเพอร์ตี้ที่กำหนดเองของ CSS ช่วยเปิดโอกาสใหม่ๆ สำหรับการจัดรูปแบบรายการ หากเราทราบดัชนีของรายการ ก็จะใช้ในการคำนวณค่าพร็อพเพอร์ตี้ได้ ขออภัย ขณะนี้ยังไม่มีวิธีกำหนดดัชนีขององค์ประกอบ (ทั้งที่ใช้งาน ในอัตราใดก็ได้) ใน CSS เพียงอย่างเดียว ตัวนับอนุญาตให้เราใช้ค่าของตนในพร็อพเพอร์ตี้ content เท่านั้น และไม่อนุญาตให้มีการคำนวณ

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

<ol style="--length: items|length">  
  
</ol>

Splitting.js เป็นไลบรารีที่ทำหน้าที่คล้ายกันในฝั่งไคลเอ็นต์

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

li::before {  
    --stop: calc(100% / var(--length) * var(--i));  
    --color1: deeppink;  
    --color2: pink;  

    content: '';  
    background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);  
}

เรายังสามารถปรับโทนสีขณะที่รายการดำเนินอยู่ได้ โดยใช้ฟังก์ชันสี hsl() เราคำนวณค่า hue ได้โดยใช้พร็อพเพอร์ตี้ที่กำหนดเอง

การจัดรูปแบบรายการคำอธิบาย

อย่างที่กล่าวไปก่อนหน้านี้ เราสามารถเลือกรวมคําและคําจํากัดความไว้ภายใน div ใน dl เพื่อให้เรามีตัวเลือกการจัดรูปแบบมากขึ้น ตัวอย่างเช่น เราอาจต้องแสดงรายการในรูปแบบตารางกริด การตั้งค่า display: grid ในรายการโดยไม่มี Wrapper div รอบแต่ละกลุ่มจะทำให้คำและคำอธิบายอยู่ในเซลล์ตารางกริดที่ต่างกัน บางครั้งวิธีนี้มีประโยชน์ ดังเช่นในตัวอย่างต่อไปนี้ที่แสดงเมนูพายพร้อมคำอธิบาย

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

ในทางกลับกัน หากเราต้องการจัดกลุ่มคำศัพท์ให้ชัดเจนโดยใช้รูปแบบการ์ดคำอธิบาย Wrapper <div> จะมีประโยชน์มาก

แหล่งข้อมูล