CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã詳ããèŠãŠãããŸããããããã¯ãåçãªããŒã«ããããããããªãŒããŒãããã³ãã®ä»ã®UIèŠçŽ ãæ§ç¯ããããã®ãããã©ãŒãã³ã¹ãšã¢ã¯ã»ã·ããªãã£ãåäžãããã²ãŒã ãã§ã³ãžã£ãŒãšãªãã§ãããã
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIïŒåçãªããŒã«ããããšããããªãŒããŒã·ã¹ãã ã«é©åœã
ãŠã§ãã¯åžžã«é²åããŠãããããã«äŒŽããéçºè ãå©çšã§ããããŒã«ãé²åããŠããŸããCSSã®æŠåšåº«ãžã®æããšããµã€ãã£ã³ã°ãªæè¿ã®è¿œå ã®1ã€ã¯ãã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã§ãããã®åŒ·åãªAPIã¯ãããèŠçŽ ãå¥ã®èŠçŽ ã«å¯ŸããŠçžå¯Ÿçã«é 眮ããããã®å®£èšçãã€å¹ççãªæ¹æ³ãæäŸããããŒã«ããããããããªãŒããŒãããã³ãã®ä»ã®ãªãŒããŒã¬ã€èŠçŽ ã®ãããªåçãªUIèŠçŽ ã®äœæãåçã«ç°¡çŽ åããŸãããã®ããã°æçš¿ã§ã¯ãã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã®è€éããæãäžãããã®å©ç¹ãå®çšçãªã¢ããªã±ãŒã·ã§ã³ãããã³ã°ããŒãã«ãªèŠèŽè åãã«ããããã©ãŒãã³ã¹ãé«ããã¢ã¯ã»ã¹å¯èœãªãŠã§ããšã¯ã¹ããªãšã³ã¹ãæ§ç¯ããããã«éçºè ãã©ã®ããã«æ¯æŽããããæ¢ããŸãã
åŸæ¥ã®ã¢ãããŒãã®åé¡ç¹
ã¢ã³ã«ãŒããžã·ã§ãã³ã°APIãç»å Žããåã¯ãéçºè ã¯ããèŠçŽ ãå¥ã®èŠçŽ ã«å¯ŸããŠçžå¯Ÿçã«é 眮ããããã«ãããŸããŸãªææ³ã«é Œã£ãŠããŸããããããã®æ¹æ³ã¯ãã°ãã°èª²é¡ãæç€ºããŸããïŒ
- è€éãªJavaScriptèšç®ïŒããŒã«ããããŸãã¯ããããªãŒããŒã®äœçœ®ãèšç®ããã«ã¯ãå€ãã®å Žåãã¢ã³ã«ãŒèŠçŽ ã«å¯ŸããèŠçŽ ã®äœçœ®ã決å®ããããã®è€éãªJavaScriptèšç®ãå¿ èŠã§ãããããã¯ãç¹ã«è€éãªããŒãžã倿°ã®UIèŠçŽ ãããå Žåã«ãããã©ãŒãã³ã¹ã®ããã«ããã¯ã«ã€ãªããå¯èœæ§ããããŸãã
- æåæŽæ°ïŒãããã®èŠçŽ ã®äœçœ®ãåçã«ç¶æããã«ã¯ãã¢ã³ã«ãŒèŠçŽ ã®äœçœ®ãšãµã€ãºãåžžã«ç£èŠãããªãŒããŒã¬ã€èŠçŽ ã®äœçœ®ãåŸã§æŽæ°ããå¿ èŠããããŸããã
- ã¢ã¯ã»ã·ããªãã£ã®åé¡ïŒåŸæ¥ã®æ¹æ³ã§ã¯ãã¢ã¯ã»ã·ããªãã£ã®åé¡ãçºçããå¯èœæ§ããããŸãããé©åãªãã©ãŒã«ã¹ã®ç®¡çãšããŒããŒãããã²ãŒã·ã§ã³ã確ä¿ããããšã¯ããã°ãã°å€§ããªããŒãã«ã§ããã
- ãµãŒãããŒãã£ã©ã€ãã©ãªãžã®äŸåïŒäžéšã®ã©ã€ãã©ãªã¯ãœãªã¥ãŒã·ã§ã³ãæäŸããŸããããããŒãžã«äœåãªéã¿ã远å ããç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã«å¿ èŠãªæè»æ§ãŸãã¯çµ±åãæ¬ ããŠããå ŽåããããŸããã
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã®ç޹ä»
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã¯ããããšã¬ã¬ã³ãã§å¹ççãªãœãªã¥ãŒã·ã§ã³ãæäŸããããšã«ããããããã®æ¬ ç¹ã«å¯ŸåŠããŸãããã®APIã䜿çšãããšãéçºè ã¯CSSã䜿çšããŠãããèŠçŽ ïŒãªãŒããŒã¬ã€ïŒãå¥ã®èŠçŽ ïŒã¢ã³ã«ãŒïŒã«å¯ŸããŠçžå¯Ÿçã«å®£èšçã«é 眮ã§ããŸããããã«ãããéçºããã»ã¹ãç°¡çŽ åãããããã©ãŒãã³ã¹ãåäžããã¢ã¯ã»ã·ããªãã£ã匷åãããŸãã
äž»ãªæŠå¿µ
- ã¢ã³ã«ãŒèŠçŽ ïŒãªãŒããŒã¬ã€èŠçŽ ãé 眮ãããèŠçŽ ãããã¯ããã¿ã³ããæ®µèœãŸã§ãäœã§ãããŸããŸããã
- ãªãŒããŒã¬ã€èŠçŽ ïŒã¢ã³ã«ãŒèŠçŽ ã«å¯ŸããŠçžå¯Ÿçã«é 眮ãããèŠçŽ ãããã¯éåžžãããŒã«ããããããããªãŒããŒãã¡ãã¥ãŒããŸãã¯ãã®ä»ã®UIèŠçŽ ã§ãã
- `anchor:`ããããã£ïŒãã®CSSããããã£ã¯ãªãŒããŒã¬ã€èŠçŽ ã«é©çšãããã¢ã³ã«ãŒèŠçŽ ãæå®ããŸããã¢ã³ã«ãŒèŠçŽ ã®IDãå€ãšããŠåããŸãã
- `position: anchor;`ããããã£ïŒãã®CSSããããã£ããªãŒããŒã¬ã€èŠçŽ ã«é©çšãããŸããããã¯ãèŠçŽ ãã¢ã³ã«ãŒèŠçŽ ã«å¯ŸããŠçžå¯Ÿçã«é 眮ãããå¿ èŠãããããšã瀺ããŸãã
- `anchor-position:`ããããã£ïŒãã®ããããã£ã¯ãã¢ã³ã«ãŒã«å¯ŸãããªãŒããŒã¬ã€ã®é 眮ãå¶åŸ¡ããŸãããªãã·ã§ã³ã«ã¯ã`top`ã`right`ã`bottom`ã`left`ãããã³ãããã®çµã¿åããïŒäŸïŒ`top right`ïŒãå«ãŸããŸãã `anchor-align`ã`anchor-offset`ãªã©ã®è¿œå ã®ããããã£ã¯ãããã«å¶åŸ¡ãæäŸããŸãã
å®çšçãªäŸïŒåçãªããŒã«ããããšããããªãŒããŒ
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã䜿çšããŠåçãªããŒã«ããããšããããªãŒããŒãå®è£ ããæ¹æ³ãèŠãŠã¿ãŸããããã°ããŒãã«ãªãŠãŒã¹ã±ãŒã¹ãšãåœéåãšã¢ã¯ã»ã·ããªãã£ã«é¢ãããã¹ããã©ã¯ãã£ã¹ãæ€èšããŸãã
äŸ1ïŒåçŽãªããŒã«ããã
ãã®äŸã¯ããã¿ã³ã®äžã«ããŠã¹ã眮ããšè¡šç€ºãããåçŽãªããŒã«ãããã瀺ããŠããŸãã
<button id="myButton">Hover me</button>
<div id="tooltip">This is a tooltip!</div>
#tooltip {
position: anchor;
anchor: myButton;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10; /* Ensure tooltip is on top */
visibility: hidden;
}
#myButton:hover + #tooltip {
opacity: 1;
visibility: visible;
anchor-position: top;
}
ãã®äŸã§ã¯ïŒ
- `button`èŠçŽ ã¯ã¢ã³ã«ãŒãšããŠæ©èœããŸãã
- IDãtooltipããæã€`div`èŠçŽ ã¯ãªãŒããŒã¬ã€ã§ãã
- ããŒã«ãããã®CSSã®`position: anchor;`ããã³`anchor: myButton;`ã¯ãã¢ã³ã«ãŒé¢ä¿ã確ç«ããŸãã
- `#myButton:hover + #tooltip`ã¯ã飿¥ããå åŒã»ã¬ã¯ã¿ãŒã䜿çšããŠããããŒæã«ããŒã«ãããã衚瀺ããŸãããã®ã¢ãããŒãã¯ã¹ã¿ã€ã«èšå®ãç°¡çŽ åããŸãã
- `anchor-position: top;`ã¯ãããŒã«ãããããã¿ã³ã®äžã«é 眮ããŸãã
äŸ2ïŒç¢å°ä»ãã®é«åºŠãªããããªãŒããŒ
ãã®äŸã¯ãèŠèŠçãªæçãã®ããã«ãã°ãã°æãŸãããç¢å°ä»ãã®ããè€éãªããããªãŒããŒã瀺ããŠããŸãã
<button id="myButton">Show Popover</button>
<div id="popover">
<div class="popover-arrow"></div>
<div class="popover-content">
<h3>Popover Title</h3>
<p>This is the popover content. It can contain any HTML elements.</p>
</div>
</div>
#popover {
position: anchor;
anchor: myButton;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
visibility: hidden;
}
#myButton:focus + #popover, /* Shows popover on focus, improving accessibility */
#myButton:hover + #popover {
opacity: 1;
visibility: visible;
}
.popover-arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent;
border-bottom-color: #ccc; /* Arrow color */
position: absolute;
top: -20px; /* Adjust to position the arrow above */
left: 50%;
transform: translateX(-50%);
}
.popover-content {
/* Ensure content is readable and has space. */
}
/* Position popover above button. Further adjustments may be needed. */
#popover {
anchor-position: bottom;
top: 0; /* Optional adjustment, depending on specific design */
left: 0; /* Optional adjustment */
transform-origin: top; /* Ensure proper arrow placement */
}
ãã®äŸã®äž»ãªæ¹åç¹ïŒ
- ç¢å°ã®å®è£ ïŒ`.popover-arrow`ã¯CSSã®å¢çç·ã䜿çšããŠãäžè§åœ¢ã®ç¢å°ãäœæããŸãããã®ç¢å°ãé©åã«é 眮ããããšã¯ãèŠèŠçãªé åãé«ããããã«éèŠã§ãã
- ãã©ãŒã«ã¹ã®åŠçïŒ`:hover`ãšãšãã«`:focus`ã䜿çšãããšãã¢ã¯ã»ã·ããªãã£ãå€§å¹ ã«åäžããŸããããŒããŒãã䜿çšããŠããã²ãŒããããŠãŒã¶ãŒã¯ãããããªãŒããŒãç°¡åã«ããªã¬ãŒã§ããŸãããã¿ã³ãŸãã¯ããããªãŒããŒé åãããã©ãŒã«ã¹ãé¢ãããšãã«ããããªãŒããŒãéããããã®JavaScriptã®è¿œå ãæ€èšããŠãã ããã
- ã³ã³ãã³ãæ§é ïŒã³ã³ãã³ãã`.popover-content`ã«åé¢ããããšã¯ãã¹ã¿ã€ã«èšå®ãšæŽçã®ããã®è¯ãç¿æ £ã§ãã
- é«åºŠãªããžã·ã§ãã³ã°ïŒ`anchor-position`ïŒäŸïŒ`top`ã`bottom`ã`left`ã`right`ïŒããã³`anchor-align`ïŒäŸïŒ`start`ã`end`ã`center`ïŒã詊ããŠãæ£ç¢ºãªé 眮ãå®çŸããŸãã埮調æŽã«ã¯`anchor-offset`ãæ€èšããŠãã ããã
- `popover`èŠçŽ ã®`transform-origin`ã¯ãç¢å°ã䜿çšããå Žåã¯ç¹ã«éèŠã§ããããã«ããã倿äžã«ç¢å°ãæ£ããå転ããŸãã
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
ã°ããŒãã«ãªèŠèŽè åãã«ã¢ã¯ã»ã¹å¯èœãªããŒã«ããããšããããªãŒããŒãæ§ç¯ããããšã¯ãæãéèŠã§ããäž»ãªèæ ®äºé ãæ¬¡ã«ç€ºããŸãã
- ããŒããŒãããã²ãŒã·ã§ã³ïŒãŠãŒã¶ãŒãããŒããŒãïŒTabããŒïŒã䜿çšããŠã¢ã³ã«ãŒèŠçŽ ã«åºå ¥ãã§ããããšã確èªããŸãã `:focus`æ¬äŒŒã¯ã©ã¹ã¯ãããã倧ãã«åœ¹ç«ã¡ãŸãã
- ã¹ã¯ãªãŒã³ãªãŒããŒã®äºææ§ïŒARIA屿§ã䜿çšããŠãã¹ã¯ãªãŒã³ãªãŒããŒã®äºææ§ãé«ããŸããããšãã°ã`aria-describedby`ã䜿çšããŠããŒã«ãããããã®ã¢ã³ã«ãŒèŠçŽ ã«é¢é£ä»ããããããããªãŒããŒã«ã¯`aria-popup="true"`ãš`role="dialog"`ã䜿çšããŸãã
- è²ã®ã³ã³ãã©ã¹ãïŒããã¹ããšèæ¯ã®éã«ååãªè²ã®ã³ã³ãã©ã¹ããç¶æããŠãèŠèŠéç¢ã®ãããŠãŒã¶ãŒã®èªã¿ããããåäžãããŸãããã¶ã€ã³ã«ã¯ãè²ã®ã³ã³ãã©ã¹ããã§ãã«ãŒã®äœ¿çšãæ€èšããŠãã ããã
- ãã©ãŒã«ã¹ã®ç®¡çïŒåè¿°ã®ããã«ãããããªãŒããŒãéããããå¿ èŠã«å¿ããŠãã©ãŒã«ã¹ãããããªãŒããŒã®ã³ã³ãã³ãã«ç§»åããŸããéãããšãã¯ããã©ãŒã«ã¹ãããªã¬ãŒèŠçŽ ã«æ»ããŸããé«åºŠãªãã©ãŒã«ã¹ç®¡çã«ã¯JavaScriptã䜿çšããŸãã
- ç Žæ£ã¡ã«ããºã ïŒãŠãŒã¶ãŒãããããªãŒããŒãŸãã¯ããŒã«ããããç Žæ£ããããã®æç¢ºãªæ¹æ³ãæäŸããŸãïŒäŸïŒå€åŽãã¯ãªãã¯ãããEscããŒãæŒãïŒã
- åœéåïŒi18nïŒïŒããŒã«ããããšããããªãŒããŒã®ããã¹ãã³ã³ãã³ãã¯ãããŸããŸãªèšèªã«ç¿»èš³ããå¿ èŠããããŸããåœéåæè¡ïŒç¿»èš³ã©ã€ãã©ãªã®äœ¿çšãi18nãã¬ãŒã ã¯ãŒã¯ãªã©ïŒã䜿çšããŠããŠãŒã¶ãŒã®èšèªèšå®ã«åºã¥ããŠé©åãªèšèªãåçã«ã¬ã³ããªã³ã°ããŸãã ARIA屿§ã翻蚳ããããšãå¿ããªãã§ãã ãããããŸããŸãªèšèªçèæ¯ãæã€ãŠãŒã¶ãŒã«ãããã¹ãã¯éåžžã«éèŠã§ãã
ARIAã®äŸ
<button id="myButton" aria-describedby="tooltip">Hover me</button>
<div id="tooltip" role="tooltip">This is a tooltip!</div>
`aria-describedby`ããã¿ã³ã«è¿œå ãã`role="tooltip"`ãããŒã«ãããèªäœã«è¿œå ãããšãã¹ã¯ãªãŒã³ãªãŒããŒã«å¿ èŠãªæ å ±ãæäŸãããŸãã
ããã©ãŒãã³ã¹ãšå¹ç
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã¯ãããã€ãã®æ¹æ³ã§ããã©ãŒãã³ã¹ã®åäžã«è²¢ç®ããŸãã
- JavaScriptã®ãªãŒããŒãããã®åæžïŒããžã·ã§ãã³ã°ããã©ãŠã¶ã®ã¬ã³ããªã³ã°ãšã³ãžã³ã«å§ä»»ããããšã«ãããAPIã¯è€éãªJavaScriptèšç®ãšDOMæäœã®å¿ èŠæ§ãæå°éã«æããŸãã
- ã¬ã³ããªã³ã°ã®æé©åïŒãã©ãŠã¶ã¯å€ãã®å Žåããããã®èŠçŽ ã®ã¬ã³ããªã³ã°ãæé©åã§ãããããã¢ãã¡ãŒã·ã§ã³ãšãã©ã³ãžã·ã§ã³ãããã¹ã ãŒãºã«ãªããŸãã
- 宣èšçãªã¢ãããŒãïŒå®£èšçãªã³ãŒãã¯ãåœä»€çãªã³ãŒãããããã©ãŠã¶ãæé©åããããããšãäžè¬çã§ãããåæããŒãžããŒãæéã®ççž®ã«è²¢ç®ããŸãã
- ãªãããŒ/åæç»ã®åé¿ïŒAPIã¯ãã³ã¹ãã®ããããã©ãŠã¶ã®ãªãããŒãšåæç»ã®å¯èœæ§ãæžãããããã©ãŒãã³ã¹ãããã«åäžãããããšãã§ããŸãã
ãã©ãŠã¶ã®äºææ§ãšãã©ãŒã«ããã¯
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã¯æ¯èŒçæ°ãããã®ã§ãããã©ãŠã¶ã®ãµããŒãã¯ç¶ç¶çã«åäžããŠããŸããããã©ãŠã¶ã®äºææ§ãèæ ®ããå€ããã©ãŠã¶çšã®ãã©ãŒã«ããã¯ãå®è£ ããããšãäžå¯æ¬ ã§ãã Can I UseïŒcaniuse.comïŒãªã©ã®ãŠã§ããµã€ãã§ãã©ãŠã¶ã®ãµããŒãã確èªã§ããŸãã
ãã©ãŒã«ããã¯æŠç¥
- ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒäž»ãªæŠç¥ã¯ãããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãã䜿çšããããšã§ããæåã«CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã䜿çšããŠUIãæ§ç¯ããŸãã APIããµããŒããããŠããªãå ŽåãUIã¯ãããã®åŒ·åãããããžã·ã§ãã³ã°æ©èœãªãã§æ©èœããŸãã
- ãã£ãŒãã£ãŒæ€åºïŒãã£ãŒãã£ãŒæ€åºã䜿çšããŠãAPIãé©çšããåã«ãµããŒããããŠãããã©ããã確èªããŸããããã«ããããšã©ãŒãé²ããäžèŠãªã³ãŒãã®å®è¡ãåé¿ã§ããŸãã JavaScriptã®åºæ¬çãªäŸã次ã«ç€ºããŸãã
if ('anchor' in document.body.style) {
// CSS Anchor Positioning is supported
// Apply Anchor Positioning styles and behavior.
} else {
// Fallback: Use a different method.
// This might involve using JavaScript or a polyfill.
}
- JavaScriptããªãã£ã«ïŒããåºç¯ãªãµããŒããå¿ èŠã§ãããã©ãŒãã³ã¹ãããã»ã©éèŠã§ãªãå Žåã¯ãããªãã£ã«ã®äœ¿çšãæ€èšããŠãã ãããããªãã£ã«ã¯ãJavaScriptã䜿çšããŠå€ããã©ãŠã¶ã§ãµããŒããããŠããªãæ©èœã®æ©èœãè€è£œããããšã«ãããäžäœäºææ§ãæäŸããŸãã `anchor-position-polyfill`ã®ãããªã©ã€ãã©ãªã圹ç«ã¡ãŸããããªãã£ã«ãããŒãžã®ããŒãæéãé·ãããå¯èœæ§ãããããšã«æ³šæããŠãã ããã
- 代æ¿ããžã·ã§ãã³ã°æ¹æ³ïŒAPIããµããŒããããŠããããããªãã£ã«ã䜿çšã§ããªãå Žåã¯ãJavaScriptã䜿çšããŠããŒã«ããããŸãã¯ããããªãŒããŒã®äœçœ®ãèšç®ãã`left`ãš`top`ã®CSSããããã£ãåçã«èšå®ãããªã©ã以åã®æ¹æ³ã«æ»ãå¯èœæ§ããããŸãããããã«ã¯ããµã€ãºãç»é¢äžã®äœçœ®ãªã©ãã¢ã³ã«ãŒèŠçŽ ã®å€æŽãç£èŠããããã®ã€ãã³ããªã¹ããŒãšããããã®å€ãååŸããããã®`getBoundingClientRect()`ã¡ãœãããå«ãŸããå¯èœæ§ããããŸãã
ã°ããŒãã«éçºã®ãã¹ããã©ã¯ãã£ã¹
ã°ããŒãã«ãªèŠèŽè åãã«CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIãå®è£ ããå Žåã¯ã次ã®ãã¹ããã©ã¯ãã£ã¹ãæ€èšããŠãã ããã
- ã¬ã¹ãã³ã·ããã¶ã€ã³ïŒããŒã«ããããšããããªãŒããŒãããŸããŸãªç»é¢ãµã€ãºãšããã€ã¹ã«é©å¿ããããã«ããŸãã CSSã§ã¡ãã£ã¢ã¯ãšãªã䜿çšããŠãããŸããŸãªviewportãµã€ãºã«åãããŠããžã·ã§ãã³ã°ãšã¹ã¿ã€ã«ã調æŽããŸããããã¯ãã¢ãã€ã«ããã€ã¹ã®ãŠãŒã¶ãŒã«ãšã£ãŠäžå¯æ¬ ã§ãã
- ã³ã³ãã³ãã®é·ãïŒããŒã«ããããšããããªãŒããŒã®ã³ã³ãã³ããç°¡æœã§çŠç¹ãçµã£ãç¶æ ã«ä¿ã¡ãŸããã³ã³ãã³ããéåžžã«é·ããšãèªã¿ã«ãããªãå ŽåããããŸãã
- RTLã®ãµããŒãïŒãŠã§ããµã€ããå³ããå·ŠïŒRTLïŒèšèªïŒã¢ã©ãã¢èªãããã©ã€èªãªã©ïŒããµããŒãããŠããå Žåã¯ãããŒã«ããããšããããªãŒããŒãæ£ããé 眮ãããããã«å¿ããŠãã©ãŒãªã³ã°ãããŠããããšã確èªããŠãã ããã `left`ã`right`ã®ä»£ããã«`inset-inline`ã®ãããªè«çããããã£ã䜿çšããå¿ èŠã«å¿ããŠ`anchor-position: right`ãŸãã¯`anchor-position: left`ã䜿çšããŸãã RTLã¢ãŒãã§UIããã¹ãããŸãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ïŒUXïŒãã¹ãïŒããŸããŸãªãã©ãŠã¶ãããã€ã¹ããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã§ããŒã«ããããšããããªãŒããŒã培åºçã«ãã¹ãããŸããããŸããŸãªæåçããã³èšèªçèæ¯ãæã€äººã ãšã®ãŠãŒã¶ããªãã£ãã¹ãã宿œããŠããŠãŒã¶ããªãã£ã®åé¡ãç¹å®ããŸãã
- ããã©ãŒãã³ã¹ã®æé©åïŒããã©ãŒãã³ã¹ãäœãããã€ã¹ã§ã®ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ã®ããè€éãªã¢ãã¡ãŒã·ã§ã³ããã©ã³ãžã·ã§ã³ã®äœ¿çšãæå°éã«æããŸããããŸããŸãªãããã¯ãŒã¯æ¡ä»¶äžã§UIããã¹ãããŠããã¹ãŠã®ãŠãŒã¶ãŒã«ã¹ã ãŒãºãªãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããŸãã Lighthouseã®ãããªããŒã«ã䜿çšããŠãããã©ãŒãã³ã¹ã¡ããªãã¯ãç£èŠããŸãã
- æåçæåæ§ïŒã³ã³ãã³ããèšèšããã³ç¿»èš³ããéã«ã¯ãæåçãªæåæ§ã«æ³šæããŠãã ãããç¹å®ã®æåã§ã¯äžå¿«ãŸãã¯èª€è§£ãããå¯èœæ§ã®ããç»åãèšèªã®äœ¿çšã¯é¿ããŠãã ãããã¢ã€ã³ã³ã䜿çšããå Žåã¯ãã¢ã€ã³ã³ãæ®éçã«çè§£ãããŠããããšã確èªãã誀解ã®å¯èœæ§ãåé¿ããŠãã ããã
- ããŒã«ãªãŒãŒã·ã§ã³ïŒãã¹ãŠã®ããã¹ãã³ã³ãã³ããããŒã«ã©ã€ãºå¯èœã«ãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã§èšèªãåãæ¿ããã¡ã«ããºã ãæäŸããŸãã
é«åºŠãªãŠãŒã¹ã±ãŒã¹
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã«ã¯ãåçŽãªããŒã«ããããããããªãŒããŒä»¥å€ã«ãã¢ããªã±ãŒã·ã§ã³ããããŸããé«åºŠãªãŠãŒã¹ã±ãŒã¹ã次ã«ç€ºããŸãã
- ããããããŠã³ã¡ãã¥ãŒïŒãã¿ã³ãŸãã¯ãã®ä»ã®èŠçŽ ã«å¯ŸããŠçžå¯Ÿçã«ããããããŠã³ã¡ãã¥ãŒãé 眮ããviewportå ã«çãŸãããã«ããŸãã
- ã³ã³ããã¹ãã¡ãã¥ãŒïŒãŠãŒã¶ãŒãèŠçŽ ãå³ã¯ãªãã¯ãããšãã«è¡šç€ºãããã³ã³ããã¹ãã¡ãã¥ãŒãäœæããŸãã
- ãããŒãã£ã³ã°ã©ãã«ïŒãã©ãŒã å ¥åã®ãããŒãã£ã³ã°ã©ãã«ãå®è£ ããŠããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸãã
- ã¢ãŒãã«ãšãªãŒããŒã¬ã€ïŒã¢ãŒãã«ãšãªãŒããŒã¬ã€ããã«ããŒããã³ã³ãã³ãã«å¯ŸããŠé©åã«é 眮ããŸããããã¯ãã¬ã¹ãã³ã·ããã¶ã€ã³ã§ç¹ã«åœ¹ç«ã¡ãŸãã
- ãŠã§ãã³ã³ããŒãã³ãïŒçµã¿èŸŒã¿ã®ããŒã«ããããŸãã¯ããããªãŒããŒãåããåå©çšå¯èœãªãŠã§ãã³ã³ããŒãã³ããæ§ç¯ããŸãã
- åçãªUIã¬ã€ã¢ãŠãïŒã¢ã³ã«ãŒããžã·ã§ãã³ã°ãä»ã®CSSæ©èœãšçµã¿åãããããšã§ãã³ã³ãã³ãã®å€æŽããŠãŒã¶ãŒã®æäœã«é©å¿ããåçãªã¬ã€ã¢ãŠããäœæã§ããŸãã
çµè«
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã¯ããŠã§ãéçºã®å€§ããªé²æ©ã衚ããŠãããåçãªUIèŠçŽ ã®äœæããã»ã¹ãåçåããŠããŸããããã©ãŒãã³ã¹ãã¢ã¯ã»ã·ããªãã£ãããã³éçºã®å®¹æãã®ç¹ã§ã¡ãªããããããããææ°ã®ãŠã§ãéçºè ã«ãšã£ãŠéåžžã«è²ŽéãªããŒã«ãšãªã£ãŠããŸãããã©ãŠã¶ã®ãµããŒããæçãç¶ããã«ã€ããŠãã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã¯ãã°ããŒãã«ãªèŠèŽè åãã«é åçã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªãŠã§ããšã¯ã¹ããªãšã³ã¹ãæ§ç¯ããããã«ãããã«äžå¯æ¬ ãªãã®ã«ãªãã§ãããããã®APIãæ¡çšããããšã«ãããéçºè ã¯äžçäžã®ãŠãŒã¶ãŒãåã°ãããããå¹ççã§ã¢ã¯ã»ã¹å¯èœã§ä¿å®å¯èœãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸããã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããå ç¢ãªãšã©ãŒåŠçãå®è£ ããããŸããŸãªãã©ãŠã¶ãšããã€ã¹ã§ãœãªã¥ãŒã·ã§ã³ããã¹ãããŠããã¹ãŠã®ãŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ãªãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããããšãå¿ããªãã§ãã ããã
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°APIã®åãæŽ»çšããŠããŠã§ãéçºã¹ãã«ãé«ããŸãããïŒ