CSSã§ã‚¢ã‚¹ãƒšã‚¯ãƒˆæ¯”を管ç†ã™ã‚‹ | ã‹ã¡ã³ã¨.netResult CSSã§ã‚¢ã‚¹ãƒšã‚¯ãƒˆæ¯”を管ç†ã—よã†ã€ã¿ãŸã„ãªãƒã‚¿ã§ã™ã€‚ 上サンプルã¯ã‚µã‚¤ã‚ºãŒãƒãƒ©ãƒãƒ©ãªç”»åƒã‚’一定ã®æ¯”率ã®ã‚µã‚¤ã‚ºã§çµ±ä¸€ã—ãŸã‚‚ã®ã§ã™ã€‚æªã¿ãŒå‡ºã‚‹ã®ã§ç”»åƒãã®ã‚‚ã®ã«ã¯ä½¿ãˆã¾ã›ã‚“ãŒåˆ†ã‹ã‚Šã‚„ã™ã„サンプルã¨ã—ã¦ã€‚ css :root { --w: 300px; --h: calc(var(--w) / (1.618 / 1)); } img { width: var(--w); height: var(--h); } ã“ã¡ã‚‰ã¯é»„金比ã§å›ºå®šã—ãŸã‚‚ã®ã«ãªã‚Šã¾ã™ã€‚横幅を決ã‚ã¦å¤‰æ•°ã«ä»£å…¥ã™ã‚‹ã¨calc()関数ã§æ¯”率ã«æ²¿ã£ãŸé«˜ã•ã«è¨ˆç®—ã•ã‚Œã¾ã™ã€‚後ã¯å¹…ã¨é«˜ã•ã®å¤‰æ•°ã‚’比率をä¿ã¡ãŸã„è¦ç´ ã«é©å¿œã™ã‚Œã°ä»»æ„ã®ã‚¢ã‚¹ãƒšã‚¯ãƒˆæ¯”ã‚’ä¿ã¤äº‹ãŒå‡ºæ¥ã¾ã™ã€‚ 例ãˆã°æ¨ªå¹…400pxã§4:3比率固定ã«ã—ãŸã„ãªã‚‰ :root { --w: 400px; --h: calc(var(--w) / (4 / 3)); } ã¨ã™ã‚Œã°ã„ã„。
{{#tags}}- {{label}}
{{/tags}}