เขียน CSS ให้แสดงผลหลายแบบ ใน HTML แบบเดียว

ภาพรวม

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

ภาพตัวอย่าง 1

จากรูปที่เห็นอยู่ด้านบนนั้น คนส่วนใหญ่ที่เขียน HTML มานักต่อนักมักจะมองในรูปแบบการแสดงผลเพียงด้านเดียว คือ ให้แสดงผลสำหรับผู้บริโภคผ่านทาง Screen เท่านั้น โดยการวาง HTML จะนำ Element ที่เป็น <img/> ขึ้นก่อนเสมอ แต่ตามหลักการการเข้าถึงแล้ว เนื้อหาใดๆ ที่โผล่ขึ้นมานั้น ควร หรือ จะต้องมี heading level ลำดับ ใด ใด นำหน้าก่อนเสมอ เพื่อบ่งบอกว่า เนื้อหานั้น เป็นเนื้อหาที่เกี่ยวข้องกับอะไร

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

ภาพตัวอย่าง 2 access

จากรูปที่ 2 การเขียน HTML ได้เปลี่ยนตำแหน่งของ <h1> และ <p> ที่เป็น nest element ของ <img/> ใหม่ ทำให้เนื้อหานี้ มี heading นำหน้าตามหลักการที่ HTML ควรจะเป็นแล้ว

ขั้นต่อไปคือการนำ CSS มาจัดการให้เข้ารูปเข้ารอย

ภาพตัวอย่าง 3

หลักการเบื้องต้นคือ การใช้ padding และ position ให้สัมพันธ์กันระหว่าง Nest Element หลัก และ <p> ซึ่งครอบ <img/> นั้นอยู่

เช่น

จากแค่โค้ด HTML ในตัวอย่างด้านบน เราสามารถใช้ CSS จัดการให้เป็นไปตามรูปแบบต่างๆ ได้ประมาณนี้

ดูตัวอย่าง และศึกษา Code เขียน CSS ให้แสดงผลหลายแบบ ใน HTML แบบเดียว

ลองดูก่อนตามสะดวกนะครับ ผมรีบ คำอธิบายต่างๆ มีอยู่ในโค้ด CSS นั่นแหละครับ

Back to Top

11 Responses to เขียน CSS ให้แสดงผลหลายแบบ ใน HTML แบบเดียว

  1. alex si

    Thank you ^^

    Reply

  2. buggo

    เลียบๆ เคียงๆ มาแอบเอาความฮู้ปีละสองบรรทัด

    Reply

  3. pornantha

    เอาหลายกว่านั้น กะได้น้า คูบา
    อย่าสะอยากได้หน่อยหลาย ยอมคือแถ่ดอก

    Reply

  4. non

    ตอนอ่านบทความยังเข้าใจ แต่พออ่าน css ปั๊บ งง ปุ๊บ
    ที่นี่อาจจะเหมาะไว้อ่านเพื่อเข้าใจในความพัฒนาของ css
    มากกว่าเข้าใจในตัว code นะ ครับ – -"

    หรือว่ามัน advance เกินไปสำหรับ general user อย่างผม

    Reply

  5. non

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

    เข้าใจว่าการเขียนให้ง่าย ให้เหมาะกับคนหัด css คงยากสำหรับ @pornantha
    อย่างน้อยๆก็เวลามาทำอะไรแบบนี้ล่ะเนอะ – -"

    Reply

  6. หงส์

    คงยากสำหรับคุณ non จริงๆ ล่ะค่ะ

    Reply

  7. kongkoi

    ชอบมากอันนี้

    Reply

  8. pornantha

    ชอบน้อยๆ แต่นานๆ ก็ได้ครับป๋า

    Reply

  9. คนเนาะคน

    กำลังศึกษาจังสิฮู้สำใด๋ดอกครับ จังใด๋กะเปนกำลังใจให้คนเฮ็ดเว็บเด้อครับ

    Reply

  10. joosengee

    น่าจะมีการแบ่งแยกออกเป็น class ให้เลย จะได้ใช้งานได้ง่ายในอนาคต รบกวนหน่อยได้มั้ยครับ

    Reply

  11. teerapuch

    ชอบตรงที่มีตัวอย่างให้ดูหลายรูปแบบมากๆเลยครับ
    เห็นถึงหลักการเลย

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top