ðããªãã®CSSã¡ãã£ã¢ã¯ãšãªã¯ééã£ãŠãããããããªã
ã¿ãªããã¯CSSã®ã¡ãã£ã¢ã¯ãšãªã«ã€ããŠæ¬åœã®æå³ã§ç解ããŠäœ¿çšããŠããã§ããããããã©ãŠã¶ãããã©ã«ãã®ç¶æ ãªãæ£åžžã«åããšæããŸãããããããã©ãŠã¶ã§æ¡å€§çãå€æŽããããããªã©ãã©ãŠã¶ã®èšå®ã«ãã£ãŠã¯ã¡ãã£ã¢ã¯ãšãªã®è§£éã倧ããå€ãã£ãŠããŸãããŸããã¡ãã£ã¢ã¯ãšãªã«äœ¿ããåäœã®pxãemãremã«ãã£ãŠãå€ãã£ãŠãããããé©åãªåäœãçšããå¿ èŠããããŸãã
æ€èšŒã«çšããCSS
以äžã®6ãã¿ãŒã³ã䜿ã£ãŠæ€èšŒããŸãããã¹ãŠã®ããŒãžã§ã³ãæ€èšŒããã®ã¯å€§å€ãªã®ã§ãéå»3幎éã®ããŒãžã§ã³ãŸã§é¡ããŸããã
/* 600pxä»¥äž */
@media (min-width: 600px) { ... }
@media (min-width: 37.5em) { ... }
@media (min-width: 37.5rem) { ... }
/* 600pxæªæº */
@media not all and (min-width: 600px) { ... }
@media not all and (min-width: 37.5em) { ... }
@media not all and (min-width: 37.5rem) { ... }
æ³å®ããããã¿ãŒã³
ã¡ãã£ã¢ã¯ãšãªã«åœ±é¿ãããã¿ãŒã³ãšããŠä»¥äžã®3ã€ãæããããŸãããŸãã¯ãã¡ãã£ã¢ã¯ãšãªã®åäœã«pxãemãremãæå®ããå Žåã®æ£åžžãªåäœãå確èªããŠã¿ãŸãã
ãã©ãŠã¶ã®æ¡å€§çå€æŽ
ãã©ãŠã¶ã®æ¡å€§çãå€æŽããŠãã¡ãã£ã¢ã¯ãšãªã®ãã¬ã€ã¯ãã€ã³ãã¯å€åããªãã
ãã©ãŠã¶ã®æåãµã€ãºèšå®å€æŽ
remã¯ãã©ãŠã¶ã®æåãµã€ãºèšå®ãåºæºãšãããããèšå®ãå€æŽãããšãã¬ã€ã¯ãã€ã³ãã¯å€åããŸããã¡ãã£ã¢ã¯ãšãªã®å Žåã¯emãåæ§ã«å€åããŸããäŸãã°ããã©ãŠã¶ã®æåãµã€ãºèšå®ã24pxã«ãããšããèããŠã¿ãŸãã
/* 600pxä»¥äž */
@media (min-width: 37.5em) { ... }
@media (min-width: 37.5rem) { ... }
600px以äžãè¡šãã¡ãã£ã¢ã¯ãšãªã¯600 à (24 / 16) = 900pxããã¬ã€ã¯ãã€ã³ããšãªããŸããpxã¯åºå®å€ã§ããããããã©ãŠã¶ã®æåãµã€ãºèšå®ã«ãã£ãŠå€åã¯ããŸããã
ã«ãŒãèŠçŽ ã®æåãµã€ãºå€æŽ
ã«ãŒãèŠçŽ ã®æåãµã€ãºãCSSã§2åã«æå®ããŠããemãremã¯ãã©ãŠã¶ã®æåãµã€ãºèšå®ãåºæºãšãããããå€åããŸãããpxã¯åºå®å€ã§ããããããããã圱é¿ããŸããã
ãã©ãŠã¶ã®æ¡å€§çå€æŽ
ãã©ãŠã¶ã®æ¡å€§çã200%ã«ããŠæ€èšŒããŠã¿ãŸããã
Internet Explorer
æ£åžžã«åäœããŸããã
Edge
æ£åžžã«åäœããŸããã
Firefox
æ£åžžã«åäœããŸããã
Chrome
Chrome77以éããã©ãŠã¶å¹ 600.5pxã®ãšãã600pxæªæºãè¡šãã¡ãã£ã¢ã¯ãšãªãé©çšãããªããã°ããããŸããåäœã«é¢ä¿ãªãpxãšemãremã®ã¡ãã£ã¢ã¯ãšãªãã¹ãŠã§èµ·ããŸãããã©ãŠã¶å¹ 600.5pxã£ãŠãªãã ãšæããããããŸãããããã©ãŠã¶ã®æ¡å€§çã2åã®200%ã«ããŠããããã0.5pxããã¿ã§ãã©ãŠã¶å¹ ãå€ããããŸããæ£ããåäœã§ã¯ãªãã£ãã®ã§ããã°ã¬ããŒããåºããŠãããŸããã
Safari
emãšremã®ã¡ãã£ã¢ã¯ãšãªãæ¡å€§çãæããå€ã«ãªããã°ããããŸããä»åã®ããã«æ¡å€§çã200%ãšããå Žåããã¬ã€ã¯ãã€ã³ãã600px à 2 = 1200pxãšãªã£ãŠããŸããŸãããŸãã600px以äžãè¡šãpxåäœã®ã¡ãã£ã¢ã¯ãšãªããã©ãŠã¶å¹ 599.5pxã®ãšãã«é©çšãããŠããŸããã°ããããŸãã
Opera
Operaã¯Chromeãšåããšã³ãžã³ãæèŒããŠããã®ã§ãOpera64以éChromeãšåããã°ãèµ·ããŸãã
iOS Safari
iOS13ããã¢ãã¬ã¹ããŒã®å·ŠåŽããAAãã¿ã³ã§æ¡å€§çãå€æŽã§ããŸãããæ£åžžã«åäœããŸããã
Android
æ¡å€§çå€æŽã®èšå®ã¯ãããŸããã
ãã©ãŠã¶ã®æåãµã€ãºèšå®å€æŽ
ãã©ãŠã¶ã®ããã©ã«ãæåãµã€ãºãå€æŽããŠæ€èšŒããŠã¿ãŸããã
Internet Explorer
æ£åžžã«åäœããŸããã
Edge
æåãµã€ãºå€æŽã®èšå®ã¯ãããŸããã
Firefox
æ£åžžã«åäœããŸããã
Chrome
æ£åžžã«åäœããŸããã
Safari
[âCommand] + [â¥Option] + [+ããŒ]ã§æåãæ¡å€§ã3段éè¡ããšãã©ãŠã¶ã®æåãµã€ãºã¯27.648000717163086pxãšãªãã1.78åã«ãªããŸããæ®éã«èãããšemãšremã®600px以äžãè¡šãã¡ãã£ã¢ã¯ãšãªã¯600 à 1.78 = 1036.8px以äžã®ãã©ãŠã¶å¹ ã§é©çšãããããšã«ãªããŸãããå®éã¯ãã©ãŠã¶å¹ 1036pxã§é©çšãããŠããŸããŸãã
Opera
æ£åžžã«åäœããŸããã
iOS Safari
æåãµã€ãºå€æŽã®èšå®ã¯ãããŸããã
Android
ãã©ãŠã¶ã®æåãµã€ãºèšå®ãå€æŽããŠãã¡ãã£ã¢ã¯ãšãªã®ãã¬ã€ã¯ãã€ã³ãã¯å€ããããæåã ããæ¡å€§çž®å°ããããã§ãã
ã«ãŒãèŠçŽ ã®æåãµã€ãºå€æŽ
ã«ãŒãã§ããhtmlèŠçŽ ã®font-sizeã2åã«ããŠæ€èšŒããŠã¿ãŸããã
html {
font-size: 2em;
}
Internet Explorer
æ£åžžã«åäœããŸããã
Edge
æ£åžžã«åäœããŸããã
Firefox
æ£åžžã«åäœããŸããã
Chrome
æ£åžžã«åäœããŸããã
Safari
remã®ã¡ãã£ã¢ã¯ãšãªãæ¡å€§çãæããå€ã«ãªããã°ããããŸãã
Opera
æ£åžžã«åäœããŸããã
iOS Safari
remã®ã¡ãã£ã¢ã¯ãšãªãæ¡å€§çãæããå€ã«ãªããã°ããããŸãã
Android
æ£åžžã«åäœããŸããã
ã¡ãã£ã¢ã¯ãšãªã®åäœ
ãããŸã§åãã©ãŠã¶ã®åäœãæ€èšŒããŠã¿ãŸãããããã©ãŠã¶éã®éããæã£ããããããªããããŸããããã§ãã¡ãã£ã¢ã¯ãšãªã®åäœã«äœã䜿ãããèããŠãããŸãã
ãŸãã¯remã§ãããã«ãŒãèŠçŽ ã®æåãµã€ãºãå€æŽãããšãã«SafariãšiOS Safariã ããã°ããããããã¡ãã£ã¢ã¯ãšãªã®åäœã«remã¯äœ¿ããŸããããããšãpxãemã«ãªããŸãããpxã ãšãã©ãŠã¶ã®æåãµã€ãºèšå®ãå
šãåæ ãããªããããã¢ã¯ã»ã·ããªãã£ãèãããšå¥œãŸãããããŸãããæ¶å»æ³ã«ãªããŸãããã¡ãã£ã¢ã¯ãšãªã®åäœã«ã¯emãããããããŸãã
ã¡ãã£ã¢ã¯ãšãªã®åäœã«emã䜿ãå Žåã«ã¯ãWebãµã€ãå
šäœã®CSSã§ãpxã䜿ããã«emãremãªã©ã®çžå¯Ÿå€ã䜿çšããããã«ããªããšããã©ãŠã¶ã®æåãµã€ãºèšå®ãå€æŽããŠãã¡ãã£ã¢ã¯ãšãªã ãå€åããããšã«ãªã£ãŠããŸãæå³ããªãã®ã§æ³šæããå¿
èŠããããŸããpxã¯borderãªã©ãç»é¢ãæ¡å€§çž®å°ããŠãåºå®å€ã§ãã£ãŠã»ããç®æã«äœ¿ããŸãã
ãã°ã®å¯ŸåŠ
æ€èšŒçµæãèŠãéããèŽåœçãªãã°ã¯Safariã ãã ãšæããŸãããã®ä»ã®ãã©ãŠã¶ã§èµ·ãããã©ãŠã¶å¹ ãå°æ°ç¹pxã®ãšãã®æåã¯ããããæµ®åå°æ°ç¹é¢ä¿ã ãšæãããŸãããã®ãã°ã¯ãã©ãŠã¶ã«çŽããŠããããããªãã®ãšã1pxæªæºã®èª€å·®ãªã®ã§ãããŸã§åœ±é¿ããªããšæããŸãã
ãã©ãŠã¶ã®æ¡å€§çããšã«æå®
ã¡ãã£ã¢ã¯ãšãªã®åäœã«emãæ¡çšããŸããããå è¿°ããéããã©ãŠã¶ã®æ¡å€§çãå€æŽããéã«Safariã§ã¡ãã£ã¢ã¯ãšãªãæ¡å€§çãæããå€ã«ãªãèŽåœçãªãã°ããããã察å¿ããå¿ èŠããããŸããæ®éãªãCSSããã¯ã§å¯ŸåŠãããšæããŸãããå®ã¯macOSã®Safariã ã䜿ããCSSãã¯ããã¯ããããŸãã
ãã©ãŠã¶å¹ (vw) = 100 / æ¡å€§ç à 100
Safariã§ã¯ã¡ãã£ã¢ã¯ãšãªã®åäœã«vwã䜿ããŸããäŸãã°ãæ¡å€§ç125%ã®å Žåããã©ãŠã¶å¹ ã¯100 / 125 à 100 = 80vwãšãªããŸãã
@media (width: 80vw) { ... }
ã€ãŸãããã®ããã«ãããšæ¡å€§ç125%ã®ãšãã«é©çšãããCSSãæžãããšãã§ããŸããSafariã§ã¯50ã»75ã»85ã»100ã»110ã»125ã»150ã»175ã»200ã»250ã»300%ã®æ¡å€§çž®å°ãã§ããããããã¹ãŠã®å Žåãèãããšä»¥äžã®ããã«ãªããŸãã
/* Safari以å€ã®ãã©ãŠã¶ */
@media (min-width: 37.5em) { ... }
/* æ¡å€§ç50% */
@media (min-width: 199vw) and (max-width: 201vw) and (min-width: 75em) { ... }
/* æ¡å€§ç75% */
@media (min-width: 132vw) and (max-width: 134vw) and (min-width: 50em) { ... }
/* æ¡å€§ç85% */
@media (min-width: 116vw) and (max-width: 118vw) and (min-width: 44.11765em) { ... }
/* æ¡å€§ç115% */
@media (min-width: 86vw) and (max-width: 88vw) and (min-width: 32.6087em) { ... }
/* æ¡å€§ç125% */
@media (min-width: 79vw) and (max-width: 81vw) and (min-width: 30em) { ... }
/* æ¡å€§ç150% */
@media (min-width: 65vw) and (max-width: 67vw) and (min-width: 25em) { ... }
/* æ¡å€§ç175% */
@media (min-width: 56vw) and (max-width: 58vw) and (min-width: 21.42857em) { ... }
/* æ¡å€§ç200% */
@media (min-width: 49vw) and (max-width: 51vw) and (min-width: 18.75em) { ... }
/* æ¡å€§ç250% */
@media (min-width: 39vw) and (max-width: 41vw) and (min-width: 15em) { ... }
/* æ¡å€§ç300% */
@media (min-width: 32vw) and (max-width: 34vw) and (min-width: 12.5em) { ... }
æ¡å€§çã®æå®ã¯ãã©ãŠã¶å¹ ãå°æ°ç¹pxã®å Žåãèæ ®ããŠã±1vwãšããŠããŸãããŸããæ¡å€§çãæããå€ã«ãªã£ãŠããŸãã®ã§ã37.5 / æ¡å€§ç à 100ã§ã¡ãã£ã¢ã¯ãšãªãæ£ããå€ã«ãªãããã«æ»ããŠããŸãããã®ããã«ããã°ããã©ãŠã¶ã®æ¡å€§çå€æŽãšæåãµã€ãºèšå®å€æŽã®äž¡æ¹ã«å¯Ÿå¿ã§ããŸãã
ãã©ãŠã¶ã®æåãµã€ãºèšå®ã¯ç¡èŠ
Safariã®å Žåã¯[âCommand] + [â¥Option] + [+ããŒ]ã§æåãæ¡å€§ã§ããã®ã§ãããéåžžã¯ã¡ãã¥ãŒããŒã«è¡šç€ºãããŠããªãããããããŸã§æ³åã§ããããŸã䜿ãããŠããªããšæããŸããæåã®æ¡å€§çž®å°ãç¡èŠããã°ãCSSãç°¡æœã«ãªããŸãã
/* Safari以å€ã®ãã©ãŠã¶ */
@media (min-width: 37.5em) { ... }
/* Safariã®æ¡å€§çž®å°äž */
@media not all and (width: 100vw) {
/* pxã䜿ã */
@media (min-width: 600px) { ... }
}
æ¡å€§çãå€æŽäžã¯ã¡ãã£ã¢ã¯ãšãªã®åäœã«pxã䜿ãæ¹æ³ã§ããpxã䜿ãããããã©ãŠã¶ã®æåãµã€ãºèšå®ã¯ç¡èŠãããŠããŸãç¹ãé€ãã°ããšãŠãã·ã³ãã«ã§ãããšæããŸãã
以äžãææãšãªããŸãããæªæºãè¡šãã¡ãã£ã¢ã¯ãšãªã¯ã©ãè¡šãã®ãæé©è§£ãªã®ã解説ããŠããŸãããããPostCSSãã©ã°ã€ã³ãäœã£ãŠäœãèããªããŠã察å¿ã§ããããã«ããããšæã£ãŠããŸããä»çµã¿ãç解ãããæ¹ãå¿æŽããŠãã ããæ¹ã¯è³Œå ¥ããŠãããããšå©ãããŸãã
ããããå ã¯
Â¥ 200
ãã®èšäºãæ°ã«å ¥ã£ãããµããŒããããŠã¿ãŸãããïŒ