เทมเพลต CSS: `line-height: 1.8;`

📝 วิธีการใช้งาน

เทมเพลตนี้เหมาะสำหรับการเพิ่มระยะห่างระหว่างบรรทัด เพื่อให้อ่านง่ายขึ้น ใช้ได้กับเนื้อหายาวหรือข้อความที่ต้องการความชัดเจน

📘 คำอธิบาย

การใช้ line-height: 1.8; จะทำให้บรรทัดแต่ละบรรทัดมีความสูงมากขึ้นประมาณ 1.8 เท่าของขนาดตัวอักษร ส่งผลให้มีช่องว่างระหว่างบรรทัดมากขึ้น อ่านง่ายขึ้น

✅ ตัวอย่าง

ข้อความนี้มีระยะห่างระหว่างบรรทัดมากขึ้น
ทำให้อ่านง่ายและดูโล่งสบายตา
เหมาะกับข้อความยาว

📋 โค้ดสำหรับคัดลอก

🔹 ใช้เฉพาะส่วน CSS

<style>
  .line-space-text {
    line-height: 1.8;
  }
</style>

<p class="line-space-text">
  ข้อความนี้มีระยะห่างระหว่างบรรทัดมากขึ้น<br>
  อ่านง่ายและดูดี<br>
  เหมาะกับข้อความยาว
</p>

🔸 ใช้เป็นไฟล์ HTML ทั้งหมด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>เดโม: line-height 1.8</title>
  <style>
    .line-space-text {
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <p class="line-space-text">
    ข้อความนี้มีระยะห่างระหว่างบรรทัดมากขึ้น<br>
    อ่านง่ายและดูดี<br>
    เหมาะกับข้อความยาว
  </p>
</body>
</html>

คัดลอกแล้ว!

📖 เทคนิคการปรับระยะห่างบรรทัดอย่างมีประสิทธิภาพ

คุณสมบัติ line-height เป็นปัจจัยสำคัญที่กำหนดความอ่านง่ายของข้อความ การตั้งค่าระยะห่างบรรทัดที่เหมาะสมจะช่วยเพิ่มความเร็วในการอ่านและความเข้าใจของผู้ใช้

📊 วิธีเลือกค่า line-height ที่เหมาะสม

โดยทั่วไปสำหรับข้อความภาษาญี่ปุ่น ค่า 1.6 ถึง 1.8 ถือว่าเหมาะสม เช่น ใช้ 1.8 กับเนื้อหาหลัก และ 1.4 กับหัวข้อย่อย ในการแสดงผลบนมือถือ ควรเพิ่มค่าเป็นประมาณ 2.0 เพื่อให้อ่านง่ายในหน้าจอขนาดเล็ก

✨ เทคนิคขั้นสูง

แทนที่จะใช้ค่าที่ไม่มีหน่วย เช่น 1.8 การกำหนดค่าในหน่วย rem จะช่วยรักษาสมดุลเมื่อมีการเปลี่ยนแปลงขนาดฟอนต์ นอกจากนี้ การใช้ฟังก์ชัน calc() เช่น line-height: calc(1em + 0.8rem) ช่วยให้ควบคุมระยะห่างจากเส้นฐานได้อย่างแม่นยำ

⚠️ ข้อควรระวังและแนวปฏิบัติที่ดี

ระยะห่างบรรทัดที่กว้างเกินไป (มากกว่า 2.5) อาจทำให้อ่านยาก ในกรณีของข้อความลิงก์หลายบรรทัด ต้องระวังไม่ให้พื้นที่คลิกกว้างเกินไป สำหรับดีไซน์ตอบสนอง ควรใช้ media query เพื่อกำหนดระยะห่างบรรทัดที่เหมาะสมตามความกว้างหน้าจอ

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

เทมเพลต CSS: line-height: 1.8;