HTML CSSでSVGをプロ級に使うための2つの実用的な方法

Introducing two convenient ways to use SVG 😆❗️ 1. SVG Sprite → Define SVG in one place and display it in various places 2. Background Setting → Specify an SVG as a background image. You can also change the color and stroke. 🎥 Video Structure 🎥 00:00 Two convenient ways to use SVG 00:19 How to use SVG files in general 01:10 What is SVG anyway? 02:00 What's in an SVG file? 02:51 1. SVG Sprite 03:32 - How to Write It 05:25 - Changing Styles 05:52 - Various Properties 06:10 - Example of Specifying Styles 06:53 - Loading as a Separate File 07:15 2. background-image (Background Image) 08:27 - How to Specify 09:05 - Specifying Colors 09:53 - Specifying Hover 10:24 - Custom Function 12:24 - Copying SVG from Design Data Thank you for watching 🙇‍♂️ If you enjoyed this video, please subscribe to our channel❗️ 👇Subscribe to "HIROCODE.Hirocode" 👇 http://www.youtube.com/hirocode?sub_c... ⭐️ Want to try creating your own website? ⭐️ Anyone can do it! The process of publishing a website!    • 【10分でサイト公開】誰でもできる！Webサイト公開の流れ！   ◆ Twitter   / hirocodeweb   ◆ Instagram 👈 Recommended❗️   / hirocodeweb   🔋 My Recommended Devices 🔋 【Mouse】 ✅ Logitech Advanced Wireless Mouse MX Master 3 https://amzn.to/34Zn5LH "Customize your buttons to improve your work efficiency. Customize for each application." 【Keyboard】 ✅ Logitech Advanced Wireless Keyboard KX800 MX KEYS https://amzn.to/38S1B4i "Easy to type on, reduces fatigue, and quiet. Recommended for those who code for long periods of time." 【Computer】 ✅ Apple MacBook Pro 16-inch https://amzn.to/2WXKtEN " A larger screen size is convenient because it helps you work more efficiently. I recommend investing in a good computer as an initial investment. [Peripherals] ✅ Apple AirPods Pro https://amzn.to/3rAyU4u " The noise-canceling feature allows you to concentrate without being disturbed by surrounding noise, whether you're working in a cafe or on your commute. If you use other Apple devices, I recommend AirPods. ✅ Apple iPad Pro 11-inch https://amzn.to/3mZuvoo " With the Sidecar feature built into Macs, you can use your iPad as a secondary display. 📕 Recommended Books 📕 [Design Fundamentals] ✅ Learn everything you need to know about HTML & CSS and web design in one book https://amzn.to/3o8vofO " Learn the basics of web design and coding (HTML/CSS). This book is recommended for beginners. " ✅ Understanding Design https://amzn.to/2X48Z77 " This book provides easy-to-understand, visually illustrated explanations of design in general. Recommended for anyone interested in design. " [Design Thinking Edition] ✅ Who is Design for? https://amzn.to/3o4gzun " This book helps you understand the roles played in design. It explains what you need to consider when designing. " ✅ IA Thinking: IA Thinking Techniques for Web Designers and Designers https://amzn.to/2KETvEn " This book will help you learn how to think about website design before you even design. " [Reading Devices] ✅ Kindle Paperwhite https://amzn.to/3n2AwRh " I got rid of 200 business books and bought this one. Some books are not available digitally, but if you don't have a particular preference for paper books, I recommend reading e-books. 🎧 BGM 🎧 ––––––––––––––––––––––––––––––– Happy and Joyful Children by Free Music    • Happy Children Background Music / Joyful U...   Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: http://bit.ly/2PV1WMi Music promoted by Audio Library    • Happy and Joyful Children – Free Music (No...   – ...