CSS

บริการฟรีจาก GitHub ที่ช่วยแปลงโค้ดใน Repository ให้กลายเป็นเว็บไซต์แบบ Static โดยไม่ต้องเสียค่าใช้จ่าย

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

การกำหนดคุณสมบัติของ CSS Grid เบื้องต้น

ทดลองสร้างเว็บเพจ HTML CSS แล้วอัปโหลดใส่เว็บไซต์ NeoCities.org เพื่อเป็นการทดลอง ลงมือทำสร้างเว็บไซต์อย่างง่ายและสมัครใช้งานฟรี

JavaScript code:const navbar = document.querySelector('.nav-fixed'); window.onscroll = () => { if (window.scrollY > 300) { navbar.classList.add('nav-active'); } else { navbar.classList.remove('nav-active'); } };CSS:

อ่านเจอบทความหัวข้อ CSS Clean Code อธิบายการเขียน CSS ให้ดีว่าควรทำอย่างไร1. การตั้งชื่อระบุชื่อ selector ที่อธิบายตัวเองได้ และสามารถอ่านแล้วเข้าใจว่าคืออะไร

จุดเด่นอย่างหนึ่งของ Drupal 10 คือการสร้างธีมขึ้นมาใหม่ด้วยเครื่องมือ Starterkit theme โดยจะเป็นโครงธีมเปล่าๆ (Blank theme) มีแค่ Div พื้นฐานมาให้ ผู้พัฒนาเว็บจะต้องกำหนดเลย์เอาท์ และการตกแต่งความสวยงามเองทั้งหมด อย่างไรก็ตาม ตอนนี้ใน Drupal 9.2.x ได้ใส่คุณสมบัติของ Starterkit theme เข้ามาแล้ว โดยผู้พัฒนาเว็บสามารถพิมพ์คำสั่ง PHP เพียง 1 บรรทัด ก็จะได้ธีมที่สร้างด้วย Starterkit theme (อ่านเพิ่มเติม: Provide a starterkit theme in core)

โดยปกติแล้วการแสดงผลเนื้อหา จะแสดงผลเต็มพื้นที่ <div> หรือ ความกว้างหน้าเว็บ แต่ด้วยคำสั่ง CSS Multiple Columns สามารถกำหนดให้เนื้อหาภายใน <div> หรือ ภายในพื้นที่ความกว้างหน้าเว็บ ให้แสดงผลแบ่งเป็นคอลัมน์ (ให้นึกถึงการจัดหน้าของนิตยสาร หรือหนังสือพิมพ์)

เว็บไซต์ Google Fonts -- https://fonts.google.com -- โดยสามารถเลือกดูเฉพาะภาษาที่ต้องการ เช่น Language: Thai (ภาษาไทย) เป็นต้น วิธีนำ Google Fonts ไปใช้แสดงผลในเว็บไซต์ 1. กดเครื่องหมาย + (ปุ่มวงกลมสีแดง) มุมขวาของกรอก font ที่ต้องการ

ในเดือนตุลาคม 2560 ประเทศไทยอยู่ในช่วงไว้ทุกข์ ในงานพระบรมศพ พระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดช บรมนาถบพิตร ผู้ให้บริการเว็บไซต์ในประเทศไทยหลายราย ตัดสินใจร่วมไว้ทุกข์ ด้วยการใช้คำสั่ง css filter grayscale ในการลดความสดใสของเว็บไซต์ ให้เข้ากับบรรยากาศของประเทศ อย่างไรก็ดี มีผู้ใช้งานอินเทอร์เน็ตจำนวนมาก จำเป็นต้องใช้งานเว็บไซต์สีสันปกติ ตัวช่วย Stylist พอจะเป็นทางออกในการแก้ไขปัญหาในเบื้องต้น

เป็นที่ทราบกันดีว่า โปรแกรม Drupal ตั้งแต่ในอดีต มาจนถึงเวอร์ชั่น 7 นั้นมีข้อจำกัดเรื่องกล่องข้อความ (เนื้อหา) Textbox ที่ไม่มีเครื่องมืออำนวยความสะดวกในการจัดการความสวยงามของเนื้อหา โดยค่าเริ่มต้นของ Drupal 7 ก็ยังคงเป็นกล่องว่างๆ พร้อมสำหรับพิมพ์ Plain Text เท่านั้น และหากต้องการปรับแต่งความสวยงามของเนื้อหา ผู้ใช้จำเป็นต้องมีความรู้เกี่ยวกับคำสั่ง HTML และ CSS พอสมควร

เบราว์เซอร์รุ่นใหม่ ช่วยให้คนทำเว็บไซต์ สามารถกำหนดคุณสมบัติต่างๆ เกี่ยวกับหน้าตา-สีสัน ของเว็บไซต์ได้มากขึ้น รวมถึงการปรับแต่ง "ตัวอักษร" ภายในเว็บไซต์ ก็มีความสามารถมากขึ้นตามไปด้วย มาลองดูคำสั่ง CSS เกี่ยวกับตัวอักษร ที่ใช้กันบ่อย ในการปรับแต่งเว็บไซต์ เช่น...

เวลา embed ฝังโค้ด iFrame ที่เป็นหน้าเพจยาวๆ ซ้อนลงในเว็บไซต์ ในบางที iPad/iOS มันจะมีปัญหาไม่สามารถเลื่อนหน้าเพจใน iFrame -- ก่อนหน้านี้เคยเจอ มันแสดงทั้งหมด แบบทะลักยาวไปเรื่อยๆ จนจบหน้าเพจ iFrame ล่าสุด ค้น Google เจอเทคนิคแก้ไข ด้วยการกำหนด CSS ให้กับ <div> ที่อยู่เหนือ iFrame ดังนี้ -webkit-overflow-scrolling: touch; overflow-y:scroll; height: 00px; /* ต้องกำหนดขนาดความสูงของหน้าจอ iFrame ด้วยนะ */ เท่านี้ก็จะสามารถเลื่อนหน้าเพจ iFrame ใน iOS ได้แล้ว :)

สำหรับเจ้าของเว็บไซต์ หรือคนที่ติดตั้งโฆษณาของกูเกิ้ล ด้วยบริการที่ชื่อว่า Google AdSense ภายในเว็บไซต์ ในยุคก่อนที่วงการเว็บจะเน้นการรองรับการเข้าถึง ด้วยหน้าจอหลายขนาด (Responsive Web Design) อาจจะคุ้นเคยกับการ "เลือก" ขนาดแบนเนอร์ "ที่เหมาะสม" กับความกว้างของเว็บไซต์ มาแปะในแต่ละหน้าเพจ

สำหรับค่า Property ของการเขียน CSS นั้นมากมายหลากหลาย ซึ่งผู้ที่สนใจสามารถหาอ่านได้ทั่วไป แต่ส่วนตัวที่ใช้งานบ่อยๆ จะประกอบด้วย font-size = ขนาดตัวอักษร color = สีตัวอักษร background = พื้นหลัง float = การไหลต่อกัน overflow = การครอบทั้งหมด width = ความกว้าง height = ความสูง margin = ระยะห่างจากขอบไปทางด้านนอก padding = ระยะห่างจากขอบถึงเนื้อหาด้านใน