Media Queriesã®æŒ‡å®šã«ã¤ã„㦠- QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
CSSã®é–¢æ•°ã¯ã©ã‚“ã©ã‚“便利ã«ãªã£ã¦ã„ã‚‹ï¼minmax()を使ã†ã¨Media Queriesç„¡ã—ã§ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ãŒç°¡å˜ã«å®Ÿè£…ã§ãã‚‹
CSSã®é–¢æ•°ã«ã¯ä¾¿åˆ©ãªã‚‚ã®ãŒãŸãã•ã‚“ã‚ã‚Šã¾ã™ã€‚例ãˆã°ã€divè¦ç´ ã«ã€Œwidth: calc(100% - 50px);ã€ã¨æŒ‡å®šã™ã‚‹ã“ã¨ã§ã€å¹…ã„ã£ã±ã„ã‹ã‚‰50pxを引ã„ãŸå€¤ã‚’å¹…ã«é©ç”¨ã§ãã¾ã™ã€‚ minmax()関数ã¯calc()関数ã®ã‚ˆã†ã«æ•°å—ã‚„ã‚ーワードを使ã£ã¦ã€è¦ç´ ã®æœ€å°å€¤ã¨æœ€å¤§å€¤ã‚’指定ã§ãã€ç°¡å˜ãªCSSã®è¨˜è¿°ã§ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã®é«˜åº¦ãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’作æˆã§ãã¾ã™ã€‚ 下記ã®ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã®ã‚°ãƒªãƒƒãƒ‰ã¯ãŸã£ãŸ2è¡Œã®CSSã§ã€ãƒ—ãƒãƒ‘ティも2ã¤ã ã‘ã§ã™ã€‚ How the minmax() Function Works 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ minmax()ã®åŸºæœ¬çš„ãªä½¿ã„æ–¹ minmax()を使ã†ã¨ã€Media Queriesç„¡ã—ã§ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–デザインãŒã§ãã‚‹ サãƒãƒ¼ãƒˆãƒ–ラウザ minmax()ã®åŸºæœ¬çš„ãªä½¿ã„æ–¹
[CSS]レスãƒãƒ³ã‚·ãƒ–デザインã§ã‚ˆã使ã†ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªã®æ›¸ãæ–¹ã€ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã®æœ€é©ãªå€¤ã®ã¾ã¨ã‚
スマホやタブレットã€ãƒ©ãƒƒãƒ—トップã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã€æœ€è¿‘ã¯Webページを表示ã™ã‚‹ãƒ‡ãƒã‚¤ã‚¹ã¯å¤šæ§˜åŒ–ã—ã¦ã„ã¾ã™ã€‚レスãƒãƒ³ã‚·ãƒ–デザインã§ã‚ˆã使ã‚ã‚Œã¦ã„ã‚‹Media Queries（メディアクエリ）ã®æ›¸ãæ–¹ã€ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã®æœ€é©ãªå€¤ãªã©ã€åˆ¶ä½œã«å½¹ç«‹ã¤ãƒªã‚½ãƒ¼ã‚¹ã‚„ツールを紹介ã—ã¾ã™ã€‚ å„デãƒã‚¤ã‚¹ã®ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã«åˆã‚ã›ãŸãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªã®æ›¸ãæ–¹ 複数ã®ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã‚’使ã£ãŸãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªã®æ›¸ãæ–¹ 人気ã®ãƒ•ãƒ¬ãƒ¼ãƒ ワークã®ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã®è¨å®š レスãƒãƒ³ã‚·ãƒ–ã®ç¢ºèªãŒç°¡å˜ã«ã§ãる最強ツール å„デãƒã‚¤ã‚¹ã®ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã«åˆã‚ã›ãŸãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªã®æ›¸ãæ–¹ スマホã€ã‚¿ãƒ–レットã€ãƒ©ãƒƒãƒ—トップã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã”ã¨ã®ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã€ãã—ã¦iPhone, iPad, Nexusãªã©å„デãƒã‚¤ã‚¹ç”¨ã®ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã«åˆã‚ã›ãŸãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªã®æ›¸ãæ–¹ãŒã¾ã¨ã‚られã¦ã„ã¾ã™ã€‚ Simple CSS Media Queries デãƒã‚¤
![[CSS]レスãƒãƒ³ã‚·ãƒ–デザインã§ã‚ˆã使ã†ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªã®æ›¸ãæ–¹ã€ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã®æœ€é©ãªå€¤ã®ã¾ã¨ã‚](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c5c596162907ccc099585ca47e2a595ce4e13c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016091201.gif)
CSSã®vw, calc()を使用ã—ãŸã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã®ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã‚’指定ã™ã‚‹ã“ã‚Œã‹ã‚‰ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯
本文や見出ã—ãªã©ã®ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã‚’スマホ時やデスクトップ時ã§å¤‰ãˆã‚‹æ™‚ã€é€šå¸¸ã¯Media Queriesã§ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºã”ã¨ã«æ–‡å—サイズを指定ã—ã¦ã„ã‚‹ã¨æ€ã„ã¾ã™ã€‚ ã“ã“ã§ç´¹ä»‹ã™ã‚‹ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã®æŒ‡å®šæ–¹æ³•ã¯ã¡ã‚‡ã£ã¨æ–°ã—ã„アプãƒãƒ¼ãƒã§ã€æœ€åˆã«ãƒ™ãƒ¼ã‚¹ã¨ãªã‚‹ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã‚’è¨å®šã—ã€ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºãŒå¤§ãããªã‚‹ã«ã¤ã‚Œã€Viewport Unit（ビューãƒãƒ¼ãƒˆã®å˜ä½ï¼‰ã§åŠ ç®—ã—ã¦ã‚µã‚¤ã‚ºã‚’大ããã—ã¾ã™ã€‚ Viewport Unit Based Typography 以下ã€å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«è¨±å¯ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ Viewport Unit（ビューãƒãƒ¼ãƒˆã®å˜ä½ï¼‰ã¨ã¯ï¼Ÿ フォントã®ã‚µã‚¤ã‚ºæŒ‡å®šã®ãŸã‚ã®ãƒ“ューãƒãƒ¼ãƒˆã®ä½¿ã„æ–¹ ä»–ã®æ–‡å—ã®è¦ç´ をビューãƒãƒ¼ãƒˆã§æŒ‡å®š 縦ã®ãƒªã‚ºãƒ ã¨ãƒ¢ã‚¸ãƒ¥ãƒ©ãƒ¼ã‚¹ã‚±ãƒ¼ãƒ«ã‚’ビューãƒãƒ¼ãƒˆã§æŒ‡å®š フォントサイズã®æŒ‡å®šã®ç²¾åº¦ã‚’アップã™ã‚‹ ã•ã‚‰ã«ç²¾
1
ランã‚ング
ランã‚ング
メンテナンス
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}