Skip to main content

แบ่งพื้นที่เนื้อหาเป็นคอลัมน์ ด้วยคำสั่ง CSS Multiple Columns

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

วิธีใช้งาน Google Fonts สำหรับเว็บไซต์ และงานมัลติมีเดีย

เว็บไซต์ Google Fonts -- https://fonts.google.com -- โดยสามารถเลือกดูเฉพาะภาษาที่ต้องการ เช่น Language: Thai (ภาษาไทย) เป็นต้น

Google Fonts

วิธีนำ Google Fonts ไปใช้แสดงผลในเว็บไซต์

1. กดเครื่องหมาย + (ปุ่มวงกลมสีแดง) มุมขวาของกรอก font ที่ต้องการ

ตัวช่วย Stylish ให้เว็บกลับมามีสีสันปกติ

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

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

การปรับใช้ HTML Textbox ใน Drupal 7 ร่วมกับ WYSIWYG และ CKEditor จัดตำแหน่งย่อหน้า และปุ่มเลือกสีตัวอักษร

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

รวมคำสั่ง CSS ที่ใช้บ่อย ในการปรับแต่งตัวอักษรในเว็บไซต์

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

มาลองดูคำสั่ง CSS เกี่ยวกับตัวอักษร ที่ใช้กันบ่อย ในการปรับแต่งเว็บไซต์ เช่น...

Fixed: ปัญหา iFame ใน iPad/iOS เลื่อนหน้าเพจไม่ได้

เวลา embed ฝังโค้ด iFrame ที่เป็นหน้าเพจยาวๆ ซ้อนลงในเว็บไซต์ ในบางที iPad/iOS มันจะมีปัญหาไม่สามารถเลื่อนหน้าเพจใน iFrame -- ก่อนหน้านี้เคยเจอ มันแสดงทั้งหมด แบบทะลักยาวไปเรื่อยๆ จนจบหน้าเพจ iFrame

ล่าสุด ค้น Google เจอเทคนิคแก้ไข ด้วยการกำหนด CSS ให้กับ <div> ที่อยู่เหนือ iFrame ดังนี้

-webkit-overflow-scrolling: touch;
overflow-y:scroll;
height: 00px; /* ต้องกำหนดขนาดความสูงของหน้าจอ iFrame ด้วยนะ */

เท่านี้ก็จะสามารถเลื่อนหน้าเพจ iFrame ใน iOS ได้แล้ว :)

เทคนิคการปรับแต่ง แก้ไขขนาดโฆษณา แบนเนอร์ Google AdSense ได้อย่างอิสระ

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

พื้นฐานการเขียน CSS เบื้องต้น Property ที่ใช้งานบ่อย

สำหรับค่า Property ของการเขียน CSS นั้นมากมายหลากหลาย ซึ่งผู้ที่สนใจสามารถหาอ่านได้ทั่วไป แต่ส่วนตัวที่ใช้งานบ่อยๆ จะประกอบด้วย

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

พื้นฐานการเขียน CSS เบื้องต้น การซ้ำ ลำดับความสำคัญ

การซ้ำของ CSS

การเขียน CSS ในหลายครั้งเมื่อเราได้เขียนมาได้ระยะหนึ่ง เราอาจเผลอเขียนคุณสมบัติ Property ของ CSS ซ้ำซ้อนใน CSS ชุดเดียวกัน

ซึ่งการทำงานของ CSS นั้น จะเลือกใช้ Property ตัวที่ประกาศล่าสุดมาใช้งาน เช่น

h3 {
  color: #ff000;
  text-align: left;
  font-size: 1.5em;

}

h3 {
  text-align: right;
  font-size: 1.25em;

}

พื้นฐานการเขียน CSS เบื้องต้น เริ่มเขียน CSS

ในการเริ่มต้นเขียน CSS จะต้องทำความเข้าใจกับ Syntax พื้นฐานของ CSS เสียก่อน

CSS Cyntax and Selector
รูปตัวอย่างจาก w3schools.com/css/css_syntax.asp

จากตัวอย่างรูปภาพด้านบน ประกอบด้วย

  • Selector = Tag ต่างๆ จากโค้ด HTML เพื่อใช้อ้างอิงว่าจะกำหนด CSS กับส่วนไหน เช่น <h1> <p> หรือ <div> เป็นต้น
  • Declaration = ชุดคำสั่งทั้งหมด ที่มีผลกับ Selector ที่กำหนด โดยจะอยู่ในปีกกา { และ }
  • Property = คุณสมบัติ หากมีหลายตัวใช้เครื่องหมาย (semicolon) ; คั่นแต่ละคุณสมบัติ
  • Value = กำหนดค่าต่างๆ ในแต่ละคุณสมบัติ
Subscribe to CSS