【CSS】วิธีการซ่อนองค์ประกอบพื้นฐาน｜การใช้ .d-none

คู่มือนี้อธิบายวิธีการใช้ display: none; ใน CSS เพื่อซ่อนองค์ประกอบ HTML โดยไม่ต้องลบออกจากโครงสร้าง HTML โดยตรง

🔹 โค้ดบางส่วน

<div class="d-none">
  องค์ประกอบนี้จะถูกซ่อน
</div>

<style>
.d-none {
  display: none;
}
</style>

💻 โค้ดที่ทำงานได้เต็มที่ (คัดลอกโค้ดนี้และทำงานใน HTML)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ตัวอย่างการซ่อน</title>
  <style>
    .d-none {
      display: none;
    }
  </style>
</head>
<body>
  <div class="d-none">
    องค์ประกอบนี้จะถูกซ่อน
  </div>
</body>
</html>

🧩 การใช้งานและวิธีใช้

display: none; เป็นวิธีพื้นฐานที่สุดในการซ่อนองค์ประกอบจากหน้าจอของผู้ใช้ ใช้บ่อยใน UI ที่สามารถเปลี่ยนแปลงได้เนื่องจากสามารถสลับการแสดงผลได้ง่ายด้วย JavaScript หรือ CSS

ในเฟรมเวิร์กต่างๆ เช่น Bootstrap สามารถใช้คลาส .d-none เป็นคลาสมาตรฐาน และสามารถเปลี่ยนการแสดงผลตามเงื่อนไขของการแสดงผล (Responsive) ด้วยคลาส เช่น .d-md-none

🎯 การอธิบายเพิ่มเติมเกี่ยวกับเทคนิคการซ่อน

การใช้ display: none; ช่วยให้คุณสามารถซ่อนองค์ประกอบโดยไม่ลบออกจากโครงสร้าง HTML ใช้ได้ดีในการแสดงผลหรือซ่อนองค์ประกอบตามการกระทำของผู้ใช้หรือเงื่อนไขต่างๆ ด้วย JavaScript

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

ในทางตรงข้าม visibility: hidden; จะซ่อนองค์ประกอบ แต่ยังคงมีพื้นที่ที่จองไว้สำหรับมัน ถ้าต้องการซ่อนองค์ประกอบทั้งหมดจะใช้ display: none; และถ้าต้องการเก็บการจัดวางไว้แต่ซ่อนเนื้อหาไว้ จะใช้ visibility: hidden;

หากคุณต้องการซ่อนองค์ประกอบเฉพาะในมือถือ สามารถใช้ @media (max-width: 768px) { .d-none-mobile { display: none; } } ได้ ซึ่งช่วยให้คุณสามารถซ่อนองค์ประกอบได้อย่างยืดหยุ่นตามขนาดหน้าจอหรือเงื่อนไขต่างๆ

คัดลอกแล้ว!