แก้ CSS ง่าย ๆ ด้วย AMINO — Live CSS Editor

ชีวิตของ Front-end Developer คือการหมกมุ่นอยู่กับ CSS ที่เรารัก เราจำเป็นที่จะต้องคลิกขวา และเลือก Inspect Elements จากนั้นก็แก้ไขผ่าน Devtools

บ้างก็มองว่ายุ่งยาก บ้างก็ไม่เข้าใจ บางคนที่ไม่ได้จับงาน Front-end ก็คงมองมาแล้วบอก

อิหยังว่ะ

ปัญหาเหล่านี้จะหมดไป วันนี้ผมมาแนะนำเครื่องมือที่จะทำให้ชีวิตการทำ CSS นั้นง่ายขึ้นด้วย AMINO — Live CSS Editor

AMINO นั้นเป็น Chrome Extension ที่ติดตั้งง่ายมาก สามารถติดตั้งได้จากลิงก์ด้านล่างนี้ได้เลย

Amino: Live CSS Editor

จุดขายของ AMINO คือ Editor แสนสวยที่แยกออกมาให้เราสามารถแก้ไข CSS ได้ทันที ซึ่งสามารถคลิกขวาแล้วเลือก AMINO > Open Editor เพื่อเรียก Editor ของเราได้

และคุณยังสามารถเลือก Copy This Selector เพื่อ Copy ค่า Selector หรือกด Inspect Elements และเลื่อนเมาส์ของคุณไปยังส่วนที่ยังแก้ไข

Demo

เราไปลองจริงกันเลยดีกว่า ซึ่งวันนี้เว็บไซต์ผู้โชคดีที่เราจะไปป่วนคือ https://www.odd-e.com/ นั่นเอง

พอดีเห็นว่ารายชื่อของ About มันดูยาว ๆ โล่ง ๆ เรามาทำ Columns ให้เขากันดีกว่า โดยผมจะใช้ท่า Multiple Columns กัน

เริ่มแรกก็เปิด Editor เพราะกับ Inspect Elements ซึ่งเราจะได้เป็น li มา และเราก็ใส่ columns ให้กับ ul ที่ครอบเขาหน่อย

และเราก็จะได้หน้าเว็บประมาณนี้

ข้างล่างสวยมาก แต่ข้างบนพังแล้ว เราจะเก็บงานให้เขากัน เพราะด้านบนเขาก็ใช้ ul และ li เช่นกัน แต่ไม่ต้องห่วง เราจะระบุเพิ่มไปเพื่อให้โดนแค่ที่เราจะแก้

สังเกตเวลาที่เรา Inspect คือภายใต้ Body นี้จะถูกห่อด้วย container งั้นเราก็ใช้เขาเป็น Selector เพิ่มแล้วกัน

และเราก็จะได้หน้าเว็บประมาณนี้

สรุปคือ AMINO นั้นเป็น CSS Editor ที่ตอบโจทย์ด้านการใช้งานง่าย และยังสามารถ Copy CSS ให้เพื่อนได้ไม่ยาก และ Preview ได้อย่างสวยงาม อย่าลืมลองไปใช้กันนะครับ

References

การใช้ CSS Multi-Columns เพื่อแสดงผลหลายคอลัมน์แบบ Responsive

CSS Multiple Columns

Odd-e - Scrum and Agile Coaching in Australia, Hong Kong, China, Japan, Korea, Philippines…