CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®å¶çŽãœã«ããŒãšãè€æ°ã®ããžã·ã§ãã³ã°ã«ãŒã«ãã©ã®ããã«åŠçããããæ·±ãæãäžããWebã¬ã€ã¢ãŠãã¹ãã«ãåäžãããŸãã
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®ãã¹ã¿ãŒïŒãã«ãå¶çŽã®è§£æ±º
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã¯ãWebäžã§åçã§ã¬ã¹ãã³ã·ããªã¬ã€ã¢ãŠããäœæããããã®åŒ·åãªããŒã«ã§ãããããããã®çã®å¯èœæ§ã¯ãç¹ã«è€æ°ã®ããžã·ã§ãã³ã°ã«ãŒã«ãæ±ãå Žåã®ãæŽç·Žãããå¶çŽãœã«ããŒã«ãããŸãããã®èšäºã§ã¯ãå¶çŽãœã«ããŒã®è€éããæãäžããè€æ°ã®ã¢ã³ã«ãŒãã€ã³ããå®çŸ©ãããŠããå Žåã«èŠçŽ ã®æçµçãªäœçœ®ãã©ã®ããã«æ±ºå®ãããã説æããŸãã
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®åºç€ã®çè§£
ãã«ãå¶çŽã®è§£æ±ºãæ€èšããåã«ãåºæ¬ã埩ç¿ããŸããããã¢ã³ã«ãŒããžã·ã§ãã³ã°ã§ã¯ãanchor-nameãposition: anchor;ãããã³anchor-sizeãªã©ã®ã¢ã³ã«ãŒé
眮ããããã£ã䜿çšããŠãå¥ã®èŠçŽ ïŒã¢ã³ã«ãŒïŒãåºæºã«ããŠèŠçŽ ãé
眮ã§ããŸããããã«ãããposition: absoluteãposition: relativeãªã©ã®åŸæ¥ã®æ¹æ³ãããæè»ã§çŽæçãªããžã·ã§ãã³ã°ãå¯èœã«ãªããè€éãªã¬ã€ã¢ãŠãã·ããªãªãç°¡çŽ åãããŸãã
ç°¡åãªäŸãšããŠãã€ã³ã¿ã©ã¯ãã£ããªãã¿ã³ã®æšªã«ããŒã«ããããé 眮ããããšãèããŠãã ãããã¢ã³ã«ãŒããžã·ã§ãã³ã°ã䜿çšããªãå Žåããã®ã¿ã¹ã¯ã§ã¯ããã¿ã³ã®å¯žæ³ãšç»é¢äžã®äœçœ®ã«åºã¥ããŠããŒã«ãããã®äœçœ®ãèšç®ããããã«JavaScriptãå¿ èŠã«ãªãããšããããããŸããã¢ã³ã«ãŒããžã·ã§ãã³ã°ã¯ããã®ããã»ã¹ãåçåãããã¿ã³ã®ã¢ã³ã«ãŒãåºæºã«ããŠããŒã«ãããã®äœçœ®ãçŽæ¥å®çŸ©ã§ããããã«ããŸãã
/* HTML */
<button id="myButton">Click Me</button>
<div id="myTooltip">Tooltip Text</div>
/* CSS */
#myButton {
anchor-name: --button;
}
#myTooltip {
position: anchor;
anchor: --button;
top: calc(100% + 5px); /* Position below the button with a 5px gap */
left: 0; /* Align tooltip to the left of the button */
}
å¶çŽãœã«ããŒã®åœ¹å²
å¶çŽãœã«ããŒã¯ãã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®äžæ žãšãªããšã³ãžã³ã§ããããã¯ãè€æ°ã®ããžã·ã§ãã³ã°å¶çŽãèŠçŽ ã«é©çšãããå Žåã®ç«¶åã解決ãã圹å²ãæ
ããŸããå®çŸ©ãããã«ãŒã«ã«åºã¥ããŠæçµçãªäœçœ®ã決å®ããæææ±ºå®è
ãšèããŠãã ããããããã®å¶çŽã¯ãtopãleftãrightãbottomãinsetãªã©ã®ããããã£ãããã³anchor-sizeãanchor-centerãªã©ã®é
眮ããããã£ãä»ããŠé©çšã§ããŸãã
è€æ°ã®ããžã·ã§ãã³ã°ããããã£ãæå®ãããŠããå Žåãå¶çŽãœã«ããŒã¯å®çŸ©æžã¿ã®ã«ãŒã«ã»ããã䜿çšããŠæçµçãªäœçœ®ã決å®ããŸããæ£ç¢ºãªåäœã¯CSS仿§ã§å®çŸ©ãããŠãããããŸããŸãªãã©ãŠã¶ã§äºæž¬å¯èœãªçµæãæäŸããããšãç®çãšããŠããŸãã
ãã«ãå¶çŽã®è§£æ±ºïŒä»çµã¿
ã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®çã®åã¯ãè€æ°ã®å¶çŽãåæã«é©çšããå¿ èŠãããå Žåã«çºæ®ãããŸããå¶çŽãœã«ããŒã¯ããããã®è€éãªã·ããªãªãã€ã³ããªãžã§ã³ãã«åŠçããŸããããã€ãã®äŸãèŠãŠã¿ãŸãããã
äŸ1ïŒæ°Žå¹³æ¹åãšåçŽæ¹åã®ããžã·ã§ãã³ã°
ã¢ã³ã«ãŒãåºæºã«ããŠãèŠçŽ ãæ°Žå¹³æ¹åãšåçŽæ¹åã®äž¡æ¹ã«é 眮ããã·ããªãªãèããŠãã ãããããšãã°ãããããããŠã³ã¡ãã¥ãŒã¯ãäžç«¯ããã¿ã³ã®äžç«¯ã«æããæ°Žå¹³æ¹åã«äžå€®æãã«ããå¿ èŠãããå ŽåããããŸãã
#myButton {
anchor-name: --button;
}
#myDropdown {
position: anchor;
anchor: --button;
top: 100%; /* Position below the button */
left: 50%; /* Horizontal center */
transform: translateX(-50%); /* Center horizontally relative to its own width */
}
ãã®å Žåãå¶çŽãœã«ããŒã¯topããããã£ãšleftããããã£ã®äž¡æ¹ãèæ
®ããŸããtopããããã£ã¯ãããããããŠã³ããã¿ã³ã®äžã«é
眮ããŸããæ¬¡ã«ãleft: 50%ãštransform: translateX(-50%)ã®çµã¿åããã«ãããããããããŠã³ãæ°Žå¹³æ¹åã«äžå€®æãã«ãªããŸãããœã«ããŒã¯ããããã®å¶çŽãäžè²«ããæ¹æ³ã§é©çšãããããã«ããŸãã
äŸ2ïŒç«¶åããå¶çŽ
ç«¶åããå¶çŽãå®çŸ©ãããšã©ããªããŸããïŒããšãã°ãleftããããã£ãšrightããããã£ã®äž¡æ¹ããŸãã¯topããããã£ãšbottomããããã£ã®äž¡æ¹ãæå®ããå Žåã¯ã©ãã§ããããïŒå¶çŽãœã«ããŒã¯ãCSS仿§ã§å®çŸ©ãããç¹å®ã®ã«ãŒã«ã«åºã¥ããŠãããã®ç«¶åã解決ããŸããéåžžãäžæ¹ã®å¶çŽã仿¹ãããåªå
ãããããŸãã¯äž¡æ¹ã®çµã¿åããã䜿çšããå ŽåããããŸããæ£ç¢ºãªåªå
é äœä»ãã¯ãç«¶åããããããã£ã«ãã£ãŠç°ãªããŸãã
leftãšrightã®äž¡æ¹ã䜿çšããäŸãèŠãŠã¿ãŸããããæšæºçãªåäœã§ã¯ãèšç®ãããå¹
ã«ãã£ãŠæçµçãªäœçœ®ã決ãŸããŸããleftãšrightã®äž¡æ¹ãå®çŸ©ãããŠããå Žåãã¢ã³ã«ãŒãããèŠçŽ ã®å¹
ã¯ãäž¡æ¹ã®å¶çŽãæºããããã«èšç®ãããŸãã
#myContainer {
anchor-name: --container;
width: 200px;
}
#myElement {
position: anchor;
anchor: --container;
top: 0;
left: 0; /* Try to position at the left edge */
right: 0; /* Also try to position at the right edge */
background-color: lightblue;
}
äžèšã®ã³ãŒãã§ã¯ã`myElement`ã¯ãç«¶åããå·Šãšå³ã®å¶çŽã«ããã`myContainer`ã¢ã³ã«ãŒã®å šå¹ ã«ã¹ãã¬ãããããŸããå¹ ã¯ãç«¶åã解決ããããã«æé»çã«èšç®ãããŸãã
äŸ3ïŒAnchor-Sizeãšãã®ä»ã®å¶çŽã®äœ¿çš
ã¢ã³ã«ãŒããžã·ã§ãã³ã°ã¯ãanchor-sizeãªã©ã®ä»ã®ããããã£ãšçµã¿åããããšãè峿·±ãå¯èœæ§ãéãããŸããanchor-sizeããããã£ã¯ãã¢ã³ã«ãŒèŠçŽ ã®ãµã€ãºãæããŸããããšãã°ãèŠçŽ ã®ãµã€ãºãšäœçœ®ãã¢ã³ã«ãŒã®ãµã€ãºã«åºã¥ããŠå¶çŽããããšãã§ããŸãã
#myImageContainer {
anchor-name: --image;
width: 300px;
height: 200px;
background-color: #eee;
}
#myImage {
position: anchor;
anchor: --image;
width: anchor-size;
height: calc(anchor-size * 0.75); /* Scale height proportionally */
object-fit: cover;
}
ãã®äŸã§ã¯ã#myImageã®å¹
ãšé«ãã¯ã#myImageContainerã®å¯žæ³ã«åºã¥ããŠåçã«æ±ºå®ãããŸããanchor-sizeããããã£ãšèšç®ã«ãããã³ã³ãããåºæºã«ããç»åã®ãµã€ãºãšäœçœ®ãå®çŸ©ãããŸãã
å®éã®ã¢ããªã±ãŒã·ã§ã³ãšã°ããŒãã«ãªäŸ
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®ãã«ãå¶çŽè§£æ±ºæ©èœã«ã¯ãæ°å€ãã®å®çšçãªã¢ããªã±ãŒã·ã§ã³ããããäžçäžã®ãŠãŒã¶ãŒã«ã¡ãªããããããããŸããããã€ãã®äŸã次ã«ç€ºããŸãã
- ããŒã«ããããšããããªãŒããŒïŒã¿ãŒã²ããèŠçŽ ãåºæºã«ããŠäœçœ®ãåçã«èª¿æŽããããŒã«ããããšããããªãŒããŒã®äœæãããã¯ãã³ã³ãã³ããäžæçã«ããããšãªã圹ç«ã€æ å ±ãæäŸããããã«äžå¯æ¬ ã§ãããeã³ããŒã¹Webãµã€ããããã·ã¥ããŒããããã³äžçäžã®ããŸããŸãªã¢ããªã±ãŒã·ã§ã³ã§å ±éã®ããŒãºã§ãããŠãŒã¶ãŒãeã³ããŒã¹ãµã€ããé²èЧããŠããããšãèããŠã¿ãŸããããã¢ã³ã«ãŒããžã·ã§ãã³ã°ã䜿çšãããšããµã ãã€ã«ç»åã®è£œåæ©èœã説æããããŒã«ããããå¯èœã«ãªããããŸããŸãªã¢ãã¿ãŒãµã€ãºã®ããŸããŸãªåœã§ç»å衚瀺ã«åºã¥ããŠããèªäœãé 眮ããŸãã
- ããããããŠã³ã¡ãã¥ãŒãšããã²ãŒã·ã§ã³ïŒç»é¢ãµã€ãºãã¢ã³ã«ãŒèŠçŽ ã®äœçœ®ã«é¢ä¿ãªããé©åã«é 眮ãããã¬ã¹ãã³ã·ãããããããŠã³ã¡ãã¥ãŒã®èšèšãããã¯ãäžåœãã€ã³ããªã©ã®åœã§ã¢ãã€ã«ããã€ã¹ã®äœ¿çšçãéåžžã«é«ã人ã ã«ã¢ã¯ã»ã¹ãããWebãµã€ããWebã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠç¹ã«éèŠã§ãã
- ã¢ãŒãã«ãšãã€ã¢ãã°ïŒç»é¢ã®äžå€®ã«é 眮ãããããä»ã®èŠçŽ ãåºæºã«ããŠé 眮ãããã¢ãŒãã«ãå®è£ ãããŠãŒã¶ãŒã®ããã€ã¹ããã©ãŠã¶ãŒã«é¢ä¿ãªããåžžã«è¡šç€ºãããé©åã«é 眮ãããããã«ããŸãã
- ã€ã³ã¿ã©ã¯ãã£ããªèŠèŠåïŒèŠçŽ ãäºããåºæºã«ããŠé 眮ããããŠãŒã¶ãŒã®æäœãããŒã¿ã®å€æŽã«å¿çããã€ã³ã¿ã©ã¯ãã£ããªããŒã¿èŠèŠåã®äœæããããã«ã¯ãããŒã¿ãã€ã³ããã©ãã«ãŸãã¯æ³šéã«é¢é£ä»ããããŠãããã£ãŒããŸãã¯å³ãå«ããããšãã§ããããããæ£ããé 眮ããå¿ èŠããããŸãã
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
- ã¢ã³ã«ãŒé¢ä¿ã®çè§£ïŒã¢ã³ã«ãŒèŠçŽ ãšé 眮ãããèŠçŽ ã®éã®é¢ä¿ãæ éã«å®çŸ©ããŸããã¢ã³ã«ãŒãé©åã«å®çŸ©ãããæ£ããé 眮ãããŠããããšã確èªããŸãã
- ãã©ãŠã¶éã§ã®ãã¹ãïŒã¢ã³ã«ãŒããžã·ã§ãã³ã°ã¯ååã«ãµããŒããããããã«ãªã£ãŠããŸãããã¬ã€ã¢ãŠããããŸããŸãªãã©ãŠã¶ãããã€ã¹ïŒãã¹ã¯ããããã¢ãã€ã«ïŒã§ãã¹ãããŠãäžè²«ããã¬ã³ããªã³ã°ã確ä¿ããŸãã
- æç¢ºãªåœåã®äœ¿çšïŒã³ãŒããããèªã¿ããããä¿å®ããããããããã«ãèšè¿°çãª
anchor-nameå€ã䜿çšããŸãã - ã¢ã¯ã»ã·ããªãã£ã®èæ ®ïŒã¬ã€ã¢ãŠããé害ã®ãããŠãŒã¶ãŒã«ã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŸããååãªã³ã³ãã©ã¹ããæäŸããã»ãã³ãã£ãã¯HTMLã䜿çšããã¹ã¯ãªãŒã³ãªãŒããŒã§ãã¹ãããŸããããã«ãããWebãµã€ããWCAGã¬ã€ãã©ã€ã³ã«æ®éçã«æºæ ããŠããããšãä¿èšŒãããŸãã
- ããã©ãŒãã³ã¹ã®æé©åïŒããã©ãŒãã³ã¹ã®ããã«ããã¯ãåé¿ããããã«ãäžèŠãªèšç®ãè€éãªããžã·ã§ãã³ã°ããžãã¯ãæå°éã«æããŸãã
äžè¬çãªåé¡ã®ãã©ãã«ã·ã¥ãŒãã£ã³ã°
ã¢ã³ã«ãŒããžã·ã§ãã³ã°ã䜿çšããå Žåãç¹å®ã®åé¡ãçºçããå¯èœæ§ããããŸããããã€ãã®äžè¬çãªãã©ãã«ã·ã¥ãŒãã£ã³ã°ã®ãã³ããæ¬¡ã«ç€ºããŸãã
- äžæ£ãªããžã·ã§ãã³ã°ïŒé 眮ãããèŠçŽ ã«äœ¿çšãããã¢ã³ã«ãŒå®çŸ©ãããããã£ãå確èªããŸããã¢ã³ã«ãŒãæ£ããèšå®ãããçžå¯Ÿçãªãªãã»ãããŸãã¯å€æãèæ ®ãããŠããããšã確èªããŸãã
- äºæããªãåäœïŒç«¶åããããããã£ã䜿çšããå¶çŽãœã«ããŒã®åäœã確èªããŸããæ£ç¢ºãªè§£æ±ºã«ãŒã«ã«ã€ããŠã¯ãCSS仿§ãåç §ããŠãã ããã
- ãã©ãŠã¶ã®äºææ§ïŒãã¹ãŠã®ããããã£ããµããŒããããŠããããšã確èªããããã«ããã©ãŠã¶ãšCSSã³ãŒãã®äºææ§ã確èªããŸããæ°ããCSSæ©èœã䜿çšããŠããå Žåã¯ãåºãæ¡çšããããŸã§ã«æéããããå ŽåããããŸãã
- ããã©ãŒãã³ã¹ã®åé¡ïŒCSSãæé©åããå¯èœãªå Žåã¯è€éãªèšç®ãåé¿ããŸãã倿ãè€éãªããžã·ã§ãã³ã°ããžãã¯ãããŸãã«ãå€ã䜿çšãããšãããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸãã
ä»åŸã®å±æïŒCSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®å°æ¥
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã¯ãŸã é²åããŠãããæ°ããæ©èœãšæ¹åãåžžã«æ€èšãããŠããŸããã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®éçºã¯ãéçºè ããã¶ã€ããŒããã®ãã£ãŒãããã¯ãææ¡ãåŸãŠãå ±åã§è¡ãããŠããŸãã仿§ãæçããã«ã€ããŠãããé«åºŠãªæ©èœãšã¬ã€ã¢ãŠãã®ããåªããå¶åŸ¡ãæåŸ ã§ããŸããå°æ¥ã®ã€ãã¬ãŒã·ã§ã³ã«ã¯ã次ã®ãããªæ©èœãå«ãŸããå¯èœæ§ããããŸãã
- æ¹åãããã¯ãã¹ãªãªãžã³ãµããŒãïŒã¢ã³ã«ãŒããžã·ã§ãã³ã°ãç°ãªããªãªãžã³ïŒWebãµã€ãïŒéã§å¹æçã«æ©èœããããã«ããæ©èœåŒ·åã
- ããè€éãªå¶çŽïŒããæ£ç¢ºãªé 眮ãªãã·ã§ã³ãªã©ãå¶çŽãæå®ããã³è§£æ±ºããããã®è¿œå ã®æ¹æ³ã®å°å ¥ã
- ããã©ãŒãã³ã¹ã®åäžïŒç¹ã«è€éãªã¬ã€ã¢ãŠãã®å Žåã«ãããã«åªããã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãå®çŸããããã®å¶çŽãœã«ããŒã®æé©åã
çµè«
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®å¶çŽãœã«ããŒã¯ããã®æ©èœã®åºæ¬çãªåŽé¢ã§ãããã®ä»çµã¿ãšãè€æ°ã®ããžã·ã§ãã³ã°å¶çŽã解決ããæ¹æ³ãçè§£ããããšã§ãå ç¢ã§åçã§ã¬ã¹ãã³ã·ããªWebã¬ã€ã¢ãŠããäœæã§ããŸãããã®æ©èœããã¹ã¿ãŒãããšãããã³ããšã³ãéçºã¹ãã«ãå€§å¹ ã«åäžããäžçäžã®ãŠãŒã¶ãŒã«åªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããããã«ãªããŸããWebãé²åãç¶ããã«ã€ããŠãã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®ãããªã¬ã€ã¢ãŠããã¯ããã¯ãç¿åŸããããšã¯ãäžçäžã®Webéçºè ã«ãšã£ãŠéèŠãªã¹ãã«ã§ããç¶ããã§ãããã
W3CãMDN Web Docsãããã³ããããã®ãã©ãŠã¶ãã³ããŒããã®å ¬åŒããã¥ã¡ã³ããšãªãœãŒã¹ããã©ããŒããŠãCSSããã³ãã®ä»ã®Webãã¯ãããžãŒã®ææ°ã®éçºç¶æ³ãåžžã«ææ¡ããŠãã ãããããã«ãããã¹ãã«ãææ°ã®ç¶æ ã«ãªããäžçäžã®ãŠãŒã¶ãŒã«ã¢ã¯ã»ã¹å¯èœã§é åçãªããžã¿ã«ãšã¯ã¹ããªãšã³ã¹ãäœæã§ããããã«ãªããŸãã