レスãƒãƒ³ã‚·ãƒ–対応ã™ã‚‹æ™‚ã«ã€ã©ã†ã—ã¦ã‚‚綺麗ã«è¦ç´ ãŒåŽã¾ã‚‰ãªã„時ã®ã»ã¼å®Œç’§ãªå¯¾å‡¦æ³•clamp(下é™, デザインファイル上ã®ã‚µã‚¤ã‚º / アートボードã®æ¨ªå¹… * 100vw, 上é™); 例） 横幅375pxã®ã‚¢ãƒ¼ãƒˆãƒœãƒ¼ãƒ‰ä¸Šã§30pxã®æ–‡å— font-size: clamp(24px, 30 / 375 * 100vw, 30px) 例） 横幅1440pxã®ã‚¢ãƒ¼ãƒˆãƒœãƒ¼ãƒ‰ä¸Šã§650pxã®ç”»åƒ width: clamp(0px, 650 / 1440 * 100vw, 650px) clampã¨ã„ã†è¦‹æ…£ã‚Œãªã„関数を使ã£ã¦ã„ã¾ã™ã€‚後ã»ã©è©³ã—ã説明ã—ã¾ã™ã€‚ デモ ã“ã®ãƒ‡ãƒ¢ã§ã¯æ–‡å—ã¨ç”»åƒéƒ¨åˆ†ã«ä¸Šè¨˜ã®ã‚µã‚¤ã‚ºèª¿æ•´ã‚’æ–½ã—ã¦ã„ã¾ã™ã€‚ 解説 上記ã®è¨ˆç®—å¼ã§ã‚„ã‚ã†ã¨ã—ã¦ã„ã‚‹ã®ã¯ã€ã©ã®ç”»é¢å¹…ã«ãªã£ã¦ã‚‚比率をç¶æŒã™ã‚‹ã“ã¨ã§ã™ã€‚比率ãŒç¶æŒã§ãã¦ã„ã‚‹ã®ãªã‚‰ç”»é¢å¹…ãŒå¤§ãã‹ã‚ã†ãŒå°ã•ã‹ã‚ã†ãŒçµ¶å¯¾ã«å´©ã‚Œã¾ã›ã‚“。 ãã“ã§æ¯”率ãŒç¶æŒã•ã‚Œã‚‹è¨ˆç®—å¼ã‚’考ãˆã¾ã™ã€‚ç”»é¢å¹…ã«å¯¾ã—ã¦ã©ã®ãらã„ã‹ã€ãŒè¨ˆç®—ã§ãã‚Œã°è‰¯ã„ã§ã™ã。 よã£
{{#tags}}- {{label}}
{{/tags}}