[CSS]ビューãƒãƒ¼ãƒˆ(vw, vh)ã¨ãƒ‘ーセント(%)ã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ã«é©ã—ãŸå˜ä½ã®è³¢ã„使ã„分ã‘方法先日ã®è¨˜äº‹ã€Œãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã®æŒ‡å®šæ–¹æ³•ï¼ˆç¿»è¨³ç‰ˆï¼‰ã€ã§ã€CSSã®æ¯”較的新ã—ã„å˜ä½ã€Œãƒ“ューãƒãƒ¼ãƒˆã®å˜ä½(Viewport Units)ã€ã«ã¤ã„ã¦è§¦ã‚Œã¾ã—ãŸã€‚ã“ã®å˜ä½ã€Œvw, vh, vmin, vmaxã€ã¯ãƒ–ラウザã®ãƒ“ューãƒãƒ¼ãƒˆã®ã‚µã‚¤ã‚ºã«åŸºã¥ãã‚‚ã®ã§ã€ã“れらã®å˜ä½ã§æŒ‡å®šã—ãŸå®Ÿéš›ã®å¤§ãã•ã¯ãƒ“ューãƒãƒ¼ãƒˆã®å¤§ãã•ã«ã‚ˆã£ã¦å¤‰åŒ–ã™ã‚‹ãŸã‚ã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–デザインã«ã‚ã£ãŸå˜ä½ã¨è¨€ãˆã‚‹ã§ã—ょã†ã€‚ ã“れらã®å˜ä½ã‚’使ã†ã“ã¨ã¯ã€Œãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã®æŒ‡å®šæ–¹æ³•ã€ã§ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã«ä½¿ã†ã“ã¨ã‚’å対ã—ã¾ã—ãŸãŒã€ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã§ã¯éžå¸¸ã«å½¹ç«‹ã¤å˜ä½ã§ã™ã€‚ Viewport vs. Percentage Units 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«è¨±å¯ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ビューãƒãƒ¼ãƒˆã®å˜ä½(Viewport Units)ã¨ã¯ è¦ç´ ã‚’å¹…ã„ã£ã±ã„ã«æŒ‡å®š (% > vw) è¦ç´ を高ã•ã„ã£ã±ã„ã«æŒ‡å®š (
![[CSS]ビューãƒãƒ¼ãƒˆ(vw, vh)ã¨ãƒ‘ーセント(%)ã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ã«é©ã—ãŸå˜ä½ã®è³¢ã„使ã„分ã‘方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
{{#tags}}- {{label}}
{{/tags}}