SVGå½¢å¼ã®ãƒ•ã‚¡ãƒ“コンをè¨ç½®ã—よã†2022å¹´4月27æ—¥ SVG, Webサイト制作 ã¤ãƒ»ã„・ã«ï¼ãƒ•ã‚¡ãƒ“コンもSVGå½¢å¼ãŒå¯¾å¿œã•ã‚Œã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã—ãŸï¼SVGを使ãˆã°ã“ã‚Œã¾ã§ä½¿ã‚ã‚Œã¦ããŸPNGãªã©ã®ãƒ“ットマップ形å¼ã¨ã¯é•ã„ã€æ‹¡å¤§ç¸®å°ã—ã¦ã‚‚画質ãŒåŠ£åŒ–ã—ã¾ã›ã‚“。ã¤ã¾ã‚Šã€éŽåŽ»è¨˜äº‹ã€Œã‚¯ãƒªã‚¨ã‚¤ãƒ†ã‚£ãƒ–ãªãƒ•ã‚¡ãƒ“コンをè¨ç½®ã—よã†ã€ã§ç´¹ä»‹ã—ãŸã‚ˆã†ã«å¤šãã®ã‚µã‚¤ã‚ºã‚’用æ„ã™ã‚‹å¿…è¦ã¯ã‚ã‚Šã¾ã›ã‚“ï¼ã‚„ã£ãŸãï¼å°‘ã—工夫ã™ã‚Œã°ãƒ€ãƒ¼ã‚¯ãƒ¢ãƒ¼ãƒ‰ã«ã‚‚対応ã§ãã¾ã™ã‚ˆï¼ã•ã£ããã¿ã¦ã„ãã¾ã—ょã†ï¼ ↑ç§ãŒ10年以上利用ã—ã¦ã„ã‚‹ä¼šè¨ˆã‚½ãƒ•ãƒˆï¼ SVGファビコンè¨ç½®æ–¹æ³• 1. SVGå½¢å¼ã®ãƒ•ã‚¡ãƒ“コン用画åƒã‚’ç”¨æ„ ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ãƒ„ãƒ¼ãƒ«ã§ãƒ•ã‚¡ãƒ“コンã«ã—ãŸã„ç”»åƒã‚’用æ„ã—ã¾ã™ã€‚サイズã¯ç‰¹ã«æ°—ã«ã—ãªãã¦ã‚‚OK。æ£æ–¹å½¢ã§ã‚ã‚Œã°ã©ã®ã‚µã‚¤ã‚ºã§ã‚‚ãã‚Œã„ã«è¡¨ç¤ºã•ã‚Œã¾ã™ã€‚今回ã¯Illustratorを使ã£ã¦32x32pxã®ã‚‚ã®ã‚’用æ„ã—ã¾ã—ãŸã€‚ SVGå½¢å¼ã§ä¿å˜ã—ã¾ã™ã€‚ 2. HTMLファイルã«è¨˜è¿° ã‚ã¨
サイトã®è¡¨ç¤ºé«˜é€ŸåŒ–ã«ã¤ãªãŒã‚‹18ã®ã“㨠| knowledge / baigie
ãªã‚“ã§ã‚‚ã‹ã‚“ã§ã‚‚pictureè¦ç´ を使ãˆã°ã„ã„ã‚ã‘ã˜ã‚ƒãªã„ï¼ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–・イメージ実装ã®éš›ã®æ³¨æ„点
レスãƒãƒ³ã‚·ãƒ–イメージã®ãƒã‚¤ãƒ†ã‚£ãƒ–サãƒãƒ¼ãƒˆ - HTML5 Rocks
★スタイルシートリファレンス
CSSã®floatã§å›žã‚Šè¾¼ã¿ã•ã›ãŸãƒ†ã‚ストを画åƒã‚„è¦ç´ ã®ä¸‹ã«å›žã‚Šè¾¼ã¾ã›ãªã„ã‚„ã‚Šæ–¹ – bl6.jp
レスãƒãƒ³ã‚·ãƒ–対応ã§PCã¨ã‚¹ãƒžãƒ›ã§é•ã†ç”»åƒã‚’使ã†
imgã‚¿ã‚°ã«ãŠã‘ã‚‹altã®ä½¿ã„æ–¹ã«ã¤ã„㦠-- ã”ãç°¡å˜ãªHTMLã®èª¬æ˜Ž
ç”»åƒã®ã¿ã€pã‚¿ã‚°ã§å›²ã‚ãªã„よã†ã«ã™ã‚‹ - ã‹ã¡ã³ã¨.net
Text alternatives - a decision tree - 4 Syllables
アクセシビリティã«é…æ…®ã—ãŸä»£æ›¿ãƒ†ã‚ストã®è©± | kzakza
ブラウザã«ãƒ•ã‚¡ã‚¤ãƒ«ã‚’ドãƒãƒƒãƒ—ã—ã¦ã¯ã„ã‘ãªã„ - ã¼ãã¯ã¾ã¡ã¡ã‚ƒã‚“ï¼
ç”»åƒ(imgè¦ç´ )ã®ä»£æ›¿ãƒ†ã‚スト(alt属性値)ã®SEOã¨ã¯
HTML Standard 日本語訳
HTMLã«imgã‚¿ã‚°ã§æ›¸ãã¹ãç”»åƒã€CSSã§è¡¨ç¤ºã•ã›ã‚‹ã¹ãç”»åƒ | ã‚¢ãƒ¦ãƒ€ãƒ³ãƒ†æ ªå¼ä¼šç¤¾
Getting Started With Scalable Vector Graphics (SVG) | Envato Tuts+
svgè¦ç´ ã®åŸºæœ¬çš„ãªä½¿ã„æ–¹ã¾ã¨ã‚
Webサイトã®èªã¿è¾¼ã¿ä½“感速度ãŒ2秒ãらã„上ãŒã‚‹ã‹ã‚‚。SNSボタンã¯å¾Œã‹ã‚‰èªã¿è¾¼ã‚ï¼ - Webå¦ã³
HTML5 adaptive images: end of round one | HTML5 Doctor
CSS　20 stunning examples of CSS 3D transforms
{{#tags}}- {{label}}
{{/tags}}