CSSã¢ã³ã«ãŒã¯ãšãªã解説ïŒãã¥ãŒããŒããµã€ãºã ãã§ãªããä»èŠçŽ ãšã®é¢ä¿ã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ãããã¬ã¹ãã³ã·ããã¶ã€ã³ã®ããã®åŒ·åãªãã¯ããã¯ã§ãã
CSSã¢ã³ã«ãŒã¯ãšãªïŒèŠçŽ é¢ä¿ããŒã¹ã®ã¹ã¿ã€ãªã³ã°ã«é©åœã
ã¬ã¹ãã³ã·ããŠã§ããã¶ã€ã³ã¯é·ãéã®ããæ©ãã§ããŸãããåœåãç§ãã¡ã¯ã¡ãã£ã¢ã¯ãšãªã«äŸåãããã¥ãŒããŒããµã€ãºã®ã¿ã«åºã¥ããŠã¬ã€ã¢ãŠããé©å¿ãããŠããŸãããæ¬¡ã«ã³ã³ããã¯ãšãªãç»å Žããã³ã³ããŒãã³ãããããå«ãèŠçŽ ã®ãµã€ãºã«é©å¿ã§ããããã«ãªããŸããããããŠä»ãç§ãã¡ã¯CSSã¢ã³ã«ãŒã¯ãšãªãæã«ããŸãããããã¯èŠçŽ éã®é¢ä¿ã«åºã¥ããŠã¹ã¿ã€ãªã³ã°ãå¯èœã«ããç»æçãªã¢ãããŒãã§ããããã€ãããã¯ã§æèã«å¿ãããã¶ã€ã³ã®æ°ããªå¯èœæ§ãåãéããŸãã
CSSã¢ã³ã«ãŒã¯ãšãªãšã¯ïŒ
ã¢ã³ã«ãŒã¯ãšãªïŒãèŠçŽ ã¯ãšãªããšåŒã°ããããšããããŸããããã®çšèªã¯ã³ã³ããã¯ãšãªãšã¢ã³ã«ãŒã¯ãšãªã®äž¡æ¹ãåºãæããŸãïŒã¯ããã¥ãŒããŒããçŽæ¥ã®ã³ã³ããã ãã§ãªããããŒãžäžã®å¥ã®èŠçŽ ã®ãµã€ãºãç¶æ ããŸãã¯ç¹æ§ã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ããããšãå¯èœã«ããŸããèŠçŽ Bã衚瀺ãããŠãããããããã¯èŠçŽ Bãç¹å®ã®ãµã€ãºãè¶ ããŠãããã«åºã¥ããŠèŠçŽ Aãã¹ã¿ã€ãªã³ã°ããããšèããŠãã ããããã®ã¢ãããŒãã¯ãç¹ã«èŠçŽ éã®é¢ä¿ãéèŠãªè€éãªã¬ã€ã¢ãŠãã«ãããŠãããæè»ã§æèã«å¿ãããã¶ã€ã³ãä¿é²ããŸãã
çŽæ¥ã®èŠªåé¢ä¿ã«éå®ãããã³ã³ããã¯ãšãªãšã¯ç°ãªããã¢ã³ã«ãŒã¯ãšãªã¯DOMããªãŒãè¶ããŠãäžäœã®èŠçŽ ãå åŒèŠçŽ ãåç §ããããšãã§ããŸããããã«ãããè€éãªã¬ã€ã¢ãŠã倿Žã調æŽããçã«ã¢ãããã£ããªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæããäžã§éåžžã«åŒ·åã«ãªããŸãã
ãªãã¢ã³ã«ãŒã¯ãšãªã䜿çšããã®ãïŒ
- 匷åãããã³ã³ããã¹ãã¹ã¿ã€ãªã³ã°ïŒ ããŒãžäžã®ä»ã®èŠçŽ ã®äœçœ®ãå¯èŠæ§ã屿§ã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ããŸãã
- ã¬ã¹ãã³ã·ãæ§ã®åäžïŒ æ§ã ãªèŠçŽ ã®ç¶æ ãæ¡ä»¶ã«å¿çãããããã¢ãããã£ãã§ãã€ãããã¯ãªãã¶ã€ã³ãäœæããŸãã
- ã³ãŒãã®ç°¡çŽ åïŒ èŠçŽ é¢ä¿ãåçãªã¹ã¿ã€ãªã³ã°ã管çããããã®è€éãªJavaScriptãœãªã¥ãŒã·ã§ã³ãžã®äŸåãæžãããŸãã
- åå©çšæ§ã®åäžïŒ é¢é£ããã¢ã³ã«ãŒèŠçŽ ã®ååšãç¶æ ã«åºã¥ããŠèªåçã«é©å¿ãããããç¬ç«ããåå©çšå¯èœãªã³ã³ããŒãã³ããéçºããŸãã
- ãã倧ããªæè»æ§ïŒ DOMããªãŒã®äžäœã暪æçãªèŠçŽ ã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ããããšã§ãã³ã³ããã¯ãšãªã®å¶éãå æããŸãã
ã¢ã³ã«ãŒã¯ãšãªã®ã³ã¢ã³ã³ã»ãã
ã¢ã³ã«ãŒã¯ãšãªã广çã«äœ¿çšããããã«ã¯ãã³ã¢ã³ã³ã»ãããçè§£ããããšãäžå¯æ¬ ã§ãïŒ
1. ã¢ã³ã«ãŒèŠçŽ
ããã¯ããã®ããããã£ïŒãµã€ãºãå¯èŠæ§ã屿§ãªã©ïŒãç£èŠãããèŠçŽ ã§ããä»ã®èŠçŽ ã®ã¹ã¿ã€ãªã³ã°ã¯ããã®ã¢ã³ã«ãŒèŠçŽ ã®ç¶æ ã«äŸåããŸãã
äŸïŒ ååã衚瀺ããã«ãŒãã³ã³ããŒãã³ããèããŠã¿ãŸããããã¢ã³ã«ãŒèŠçŽ ã¯ååç»åã«ãªããŸããã¿ã€ãã«ã説ææãªã©ãã«ãŒãã®ä»ã®éšåã¯ãç»åã®ãµã€ãºãååšã«å¿ããŠç°ãªãã¹ã¿ã€ã«ãé©çšããããããããŸããã
2. ã¯ãšãªå¯Ÿè±¡èŠçŽ
ããã¯ãã¹ã¿ã€ãªã³ã°ãããèŠçŽ ã§ãããã®å€èгã¯ãã¢ã³ã«ãŒèŠçŽ ã®ç¹æ§ã«åºã¥ããŠå€åããŸãã
äŸïŒ ååã«ãŒãã®äŸã§ã¯ãåå説ææãã¯ãšãªå¯Ÿè±¡èŠçŽ ã«ãªããŸããååç»åïŒã¢ã³ã«ãŒèŠçŽ ïŒãå°ããå Žåã説ææã¯åãè©°ããããããç°ãªãæ¹æ³ã§è¡šç€ºãããããããããããŸããã
3. `@anchor` ã«ãŒã«
ããã¯ãã¢ã³ã«ãŒèŠçŽ ã®ç¶æ ã«åºã¥ããŠã¯ãšãªå¯Ÿè±¡èŠçŽ ã®ã¹ã¿ã€ãªã³ã°ã倿Žãããæ¡ä»¶ãå®çŸ©ããCSSã«ãŒã«ã§ãã
`@anchor` ã«ãŒã«ã¯ãã»ã¬ã¯ã¿ã䜿çšããŠã¢ã³ã«ãŒèŠçŽ ãã¿ãŒã²ããã«ããã¯ãšãªå¯Ÿè±¡èŠçŽ ã«å¯ŸããŠç°ãªãã¹ã¿ã€ãªã³ã°ã«ãŒã«ãããªã¬ãŒããæ¡ä»¶ãæå®ããŸãã
æ§æãšå®è£
å ·äœçãªå®è£ ïŒãã©ãŠã¶ã®ãµããŒãã¯ãŸã é²åäžã§ãïŒã«ãã£ãŠæ§æã¯è¥å¹²ç°ãªãå ŽåããããŸãããäžè¬çãªæ§é ã¯æ¬¡ã®ããã«ãªããŸãïŒ
/* ã¢ã³ã«ãŒèŠçŽ ãå®çŸ© */
#anchor-element {
anchor-name: --my-anchor;
}
/* ã¢ã³ã«ãŒã«åºã¥ããŠã¯ãšãªå¯Ÿè±¡èŠçŽ ã«ã¹ã¿ã€ã«ãé©çš */
@anchor (--my-anchor) {
& when (width > 300px) {
/* ã¢ã³ã«ãŒèŠçŽ ã®å¹
ã300pxãã倧ããå Žåã«é©çšããã¹ã¿ã€ã« */
#queried-element {
font-size: 1.2em;
}
}
& when (visibility = visible) {
/* ã¢ã³ã«ãŒèŠçŽ ã衚瀺ãããŠããå Žåã«é©çšããã¹ã¿ã€ã« */
#queried-element {
display: block;
}
}
& when (attribute(data-type) = "featured") {
/* ã¢ã³ã«ãŒèŠçŽ ã®data-type屿§ãfeaturedã«èšå®ãããŠããå Žåã«é©çšããã¹ã¿ã€ã« */
#queried-element {
background-color: yellow;
}
}
}
解説ïŒ
- `anchor-name`: ã¢ã³ã«ãŒèŠçŽ ã«ååãå®çŸ©ãã`@anchor` ã«ãŒã«ã§åç §ã§ããããã«ããŸãã`--my-anchor`ã¯ã«ã¹ã¿ã ããããã£åã®äŸã§ãã
- `@anchor (--my-anchor)`: 以éã®ã«ãŒã«ã`--my-anchor`ãšããååã®ã¢ã³ã«ãŒèŠçŽ ã«åºã¥ããŠé©çšãããããšãæå®ããŸãã
- `& when (condition)`: ã¹ã¿ã€ã«ã®å€æŽãããªã¬ãŒããç¹å®ã®æ¡ä»¶ãå®çŸ©ããŸãã`&`ã¯ã¢ã³ã«ãŒèŠçŽ ãåç §ããŸãã
- `#queried-element`: ã¢ã³ã«ãŒèŠçŽ ã®ç¶æ ã«åºã¥ããŠã¹ã¿ã€ãªã³ã°ãããèŠçŽ ãã¿ãŒã²ããã«ããŸãã
å®è·µçãªäŸ
ã¢ã³ã«ãŒã¯ãšãªã®åã瀺ãããã«ãããã€ãã®å®è·µçãªäŸãèŠãŠãããŸãããïŒ
äŸ1ïŒãã€ãããã¯ãªååã«ãŒã
ååãã«ãŒã圢åŒã§è¡šç€ºãããŠã§ããµã€ããæ³åããŠãã ãããååç»åã®ãµã€ãºã«åºã¥ããŠåå説ææãé©å¿ãããããšããŸãã
HTML:
Product Title
A detailed description of the product.
CSS:
/* ã¢ã³ã«ãŒèŠçŽ ïŒååç»åïŒ */
#product-image {
anchor-name: --product-image-anchor;
width: 100%;
}
/* ã¯ãšãªå¯Ÿè±¡èŠçŽ ïŒåå説ææïŒ */
@anchor (--product-image-anchor) {
& when (width < 200px) {
#product-description {
display: none; /* ç»åãå°ããããå Žåã¯èª¬ææãé衚瀺ã«ãã */
}
}
& when (width >= 200px) {
#product-description {
display: block; /* ç»åãåå倧ããå Žåã¯èª¬ææã衚瀺ãã */
}
}
}
解説ïŒ
- `product-image`ã`--product-image-anchor`ãšããååã®ã¢ã³ã«ãŒèŠçŽ ãšããŠèšå®ãããŸãã
- `@anchor` ã«ãŒã«ã`product-image`ã®å¹ ããã§ãã¯ããŸãã
- ç»åã®å¹ ã200pxæªæºã®å Žåã`product-description`ã¯é衚瀺ã«ãªããŸãã
- ç»åã®å¹ ã200px以äžã®å Žåã`product-description`ã¯è¡šç€ºãããŸãã
äŸ2ïŒã¢ãããã£ããªããã²ãŒã·ã§ã³ã¡ãã¥ãŒ
å©çšå¯èœãªã¹ããŒã¹ïŒäŸïŒããããŒã®å¹ ïŒã«åºã¥ããŠã¬ã€ã¢ãŠãã倿Žãã¹ãããã²ãŒã·ã§ã³ã¡ãã¥ãŒãèããŠã¿ãŸãããããã¥ãŒããŒãå šäœã®å¹ ã«é Œã代ããã«ãããããŒèŠçŽ ãã¢ã³ã«ãŒãšããŠäœ¿çšã§ããŸãã
HTML:
CSS:
/* ã¢ã³ã«ãŒèŠçŽ ïŒããããŒïŒ */
#main-header {
anchor-name: --header-anchor;
width: 100%;
/* ãã®ä»ã®ããããŒã¹ã¿ã€ã« */
}
/* ã¯ãšãªå¯Ÿè±¡èŠçŽ ïŒããã²ãŒã·ã§ã³ã¡ãã¥ãŒïŒ */
@anchor (--header-anchor) {
& when (width < 600px) {
#main-nav ul {
flex-direction: column; /* å°ããç»é¢ã§ã¯ã¡ãã¥ãŒé
ç®ã瞊ã«äžŠã¹ã */
align-items: flex-start;
}
}
& when (width >= 600px) {
#main-nav ul {
flex-direction: row; /* 倧ããç»é¢ã§ã¯ã¡ãã¥ãŒé
ç®ã暪ã«äžŠã¹ã */
align-items: center;
}
}
}
解説ïŒ
- `main-header`ã`--header-anchor`ãšããååã®ã¢ã³ã«ãŒèŠçŽ ãšããŠèšå®ãããŸãã
- `@anchor` ã«ãŒã«ã`main-header`ã®å¹ ããã§ãã¯ããŸãã
- ããããŒã®å¹ ã600pxæªæºã®å Žåãããã²ãŒã·ã§ã³ã¡ãã¥ãŒã®é ç®ã¯çžŠã«äžŠã¹ãããŸãã
- ããããŒã®å¹ ã600px以äžã®å Žåãããã²ãŒã·ã§ã³ã¡ãã¥ãŒã®é ç®ã¯æšªã«è¡šç€ºãããŸãã
äŸ3ïŒé¢é£ã³ã³ãã³ãã®ãã€ã©ã€ã
ã¡ã€ã³èšäºãšé¢é£èšäºããããšããŸããã¡ã€ã³èšäºããŠãŒã¶ãŒã®ãã¥ãŒããŒãå ã«ãããšãã«é¢é£èšäºãèŠèŠçã«ãã€ã©ã€ãããããšããŸãã
HTML:
Main Article Title
Main article content...
CSS (æŠå¿µç - Intersection Observer APIãšã®çµ±åãå¿ èŠ):
/* ã¢ã³ã«ãŒèŠçŽ ïŒã¡ã€ã³èšäºïŒ */
#main-article {
anchor-name: --main-article-anchor;
}
/*æŠå¿µç - ãã®éšåã¯çæ³çã«ã¯Intersection Observer APIã¹ã¯ãªããã«ãã£ãŠèšå®ããããã©ã°ã«ãã£ãŠé§åããã*/
:root {
--main-article-in-view: false; /* åæå€ã¯falseã«èšå® */
}
/* ã¯ãšãªå¯Ÿè±¡èŠçŽ ïŒé¢é£èšäºïŒ */
@anchor (--main-article-anchor) {
& when (var(--main-article-in-view) = true) { /*ãã®æ¡ä»¶ã¯ã¹ã¯ãªããã«ãã£ãŠé§åãããå¿
èŠããã*/
#related-articles {
background-color: #f0f0f0; /* é¢é£èšäºããã€ã©ã€ããã */
border: 1px solid #ccc;
padding: 10px;
}
}
}
/* ã¹ã¯ãªããã¯Intersection Observer APIã«åºã¥ããŠ--main-article-in-viewããããã£ãåãæ¿ãã */
解説ïŒ
- `main-article`ã`--main-article-anchor`ãšããååã®ã¢ã³ã«ãŒèŠçŽ ãšããŠèšå®ãããŸãã
- ãã®äŸã¯æŠå¿µçãªãã®ã§ããã`main-article`ããã¥ãŒããŒãå ã«ãããã©ããã倿ããããã«Intersection Observer APIïŒéåžžã¯JavaScriptçµç±ïŒã«äŸåããŸãã
- CSS倿°`--main-article-in-view`ã¯ãèšäºã衚瀺ãããŠãããã©ãããç¥ãããããã«äœ¿çšãããŸããIntersection Observer APIã䜿çšããJavaScript颿°ããã®å€æ°ãåãæ¿ããŸãã
- `--main-article-in-view`倿°ã`true`ã«ãªããšïŒIntersection Observer APIã«ãã£ãŠèšå®ãããïŒã`related-articles`ã»ã¯ã·ã§ã³ããã€ã©ã€ããããŸãã
æ³šïŒ ãã®æåŸã®äŸã§ã¯ãIntersection Observer APIã䜿çšããŠã¡ã€ã³èšäºã®å¯èŠæ§ãæ€åºããããã«JavaScriptãå¿ èŠã§ããCSSã¯ãã®åŸãJavaScriptã«ãã£ãŠæäŸãããç¶æ ã«åå¿ãããã¯ãããžãŒã®åŒ·åãªçµã¿åããã瀺ããŠããŸãã
åŸæ¥ã®ã¡ãã£ã¢ã¯ãšãªãã³ã³ããã¯ãšãªã«å¯Ÿããå©ç¹
ã¢ã³ã«ãŒã¯ãšãªã¯ãåŸæ¥ã®ã¡ãã£ã¢ã¯ãšãªãã³ã³ããã¯ãšãªã«æ¯ã¹ãŠããã€ãã®å©ç¹ãæäŸããŸãïŒ
- é¢ä¿ããŒã¹ã®ã¹ã¿ã€ãªã³ã°ïŒ ãã¥ãŒããŒããã³ã³ããã®ãµã€ãºã ãã«é Œãã®ã§ã¯ãªããã¢ã³ã«ãŒã¯ãšãªã¯ä»ã®èŠçŽ ãšã®é¢ä¿ã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ããããšãå¯èœã«ããããæèã«å³ããæå³ã®ãããã¶ã€ã³ã«ã€ãªãããŸãã
- ã³ãŒãã®éè€åæžïŒ ã¡ãã£ã¢ã¯ãšãªã§ã¯ãç°ãªããã¥ãŒããŒããµã€ãºã«å¯ŸããŠåæ§ã®ã¹ã¿ã€ã«ãèšè¿°ããå¿ èŠããã°ãã°ãããŸããã³ã³ããã¯ãšãªã¯ãããæžãããŸãããã¢ã³ã«ãŒã¯ãšãªã¯èŠçŽ ã®é¢ä¿ã«çŠç¹ãåœãŠãããšã§ã³ãŒããããã«ç°¡çŽ åã§ããŸãã
- ã³ã³ããŒãã³ãã®åå©çšæ§åäžïŒ ã³ã³ããŒãã³ãã¯ä»ã®èŠçŽ ã®ååšãç¶æ ã«åºã¥ããŠç°å¢ã«é©å¿ã§ããããããŠã§ããµã€ãã®ç°ãªãéšåã§ããåå©çšãããããªããŸãã
- ããæè»ãªã¬ã€ã¢ãŠãïŒ ã¢ã³ã«ãŒã¯ãšãªã¯ãåŸæ¥ã®æ¹æ³ã§ã¯éæãå°é£ãŸãã¯äžå¯èœãªãããè€éã§ãã€ãããã¯ãªã¬ã€ã¢ãŠããå¯èœã«ããŸãã
- åé¢ïŒãã«ãããªã³ã°ïŒïŒ ä»ã®èŠçŽ ã®ç¶æ ã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ããããšã§ãé¢å¿ã®åé¢ãä¿é²ããè€éãªJavaScriptããžãã¯ã®å¿ èŠæ§ãæžãããŸãã
ãã©ãŠã¶ã®ãµããŒããšããªãã£ã«
2024幎åŸåçŸåšãã¢ã³ã«ãŒã¯ãšãªã®ãã€ãã£ããã©ãŠã¶ãµããŒãã¯ãŸã é²åäžã§ãããå®éšçãªãã©ã°ãããªãã£ã«ã®äœ¿çšãå¿ èŠãªå ŽåããããŸããææ°ã®ãã©ãŠã¶äºææ§æ å ±ã«ã€ããŠã¯caniuse.comã確èªããŠãã ããã
ãã€ãã£ããµããŒããéãããŠããå Žåãããªãã£ã«ã¯ç°ãªããã©ãŠã¶éã§ã®äºææ§ãæäŸã§ããŸããããªãã£ã«ã¯ããã©ãŠã¶ããã€ãã£ãã§ãµããŒãããŠããªãæ©èœã®å®è£ ãæäŸããJavaScriptã³ãŒãã®äžéšã§ãã
課é¡ãšèæ ®äºé
ã¢ã³ã«ãŒã¯ãšãªã¯å€§ããªå©ç¹ãæäŸããŸãããæœåšçãªèª²é¡ã«ã泚æããããšãéèŠã§ãïŒ
- ãã©ãŠã¶ãµããŒãïŒ ãã€ãã£ããã©ãŠã¶ãµããŒããéãããŠãããããããªãã£ã«ã®äœ¿çšãå¿ èŠã«ãªãå ŽåãããããŠã§ããµã€ãã«ãªãŒããŒãããã远å ããå¯èœæ§ããããŸãã
- ããã©ãŒãã³ã¹ïŒ ç¹ã«è€éãªæ¡ä»¶ã§ã®ã¢ã³ã«ãŒã¯ãšãªã®é床ãªäœ¿çšã¯ãããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸããã¯ãšãªãæé©åããååã«ãã¹ãããŠãã ããã
- è€éãïŒ èŠçŽ éã®é¢ä¿ãçè§£ãã广çãªã¢ã³ã«ãŒã¯ãšãªãèšè¿°ããããšã¯ãåŸæ¥ã®CSSãããè€éã«ãªãããšããããŸãã
- ä¿å®æ§ïŒ ã³ãŒãã®æç¢ºããä¿ã¡ãäºæãã¬åäœãé²ãããã«ãã¢ã³ã«ãŒã¯ãšãªãååã«ææžåãããæŽçãããŠããããšã確èªããŠãã ããã
- JavaScriptãžã®äŸåïŒç¹å®ã®ãŠãŒã¹ã±ãŒã¹ïŒïŒ ãé¢é£ã³ã³ãã³ãã®ãã€ã©ã€ããã®äŸã§èŠãããã«ãããã€ãã®é«åºŠãªãŠãŒã¹ã±ãŒã¹ã§ã¯ãã¢ã³ã«ãŒã¯ãšãªãIntersection Observer APIãªã©ã®JavaScriptã©ã€ãã©ãªãšçµ±åããå¿ èŠããããŸãã
ã¢ã³ã«ãŒã¯ãšãªã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
ã¢ã³ã«ãŒã¯ãšãªã®å©ç¹ãæå€§åããæœåšçãªèœãšã穎ãé¿ããããã«ããããã®ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããïŒ
- ã·ã³ãã«ã«å§ããïŒ ã³ã¢ã³ã³ã»ãããçè§£ããããã«ç°¡åãªã¢ã³ã«ãŒã¯ãšãªããå§ããåŸã ã«ããè€éãªã·ããªãªãå°å ¥ããŸãã
- æå³ã®ããã¢ã³ã«ãŒåã䜿çšããïŒ ã¢ã³ã«ãŒèŠçŽ ã®ç®çãæç¢ºã«ç€ºãèšè¿°çãªã¢ã³ã«ãŒåãéžæããŸãïŒäŸïŒ`--anchor1`ã§ã¯ãªã`--product-image-anchor`ïŒã
- æ¡ä»¶ãæé©åããïŒ `@anchor` ã«ãŒã«ã®æ¡ä»¶ãã§ããã ãã·ã³ãã«ã§å¹ççã«ä¿ã¡ãŸããé床ã«è€éãªèšç®ãããžãã¯ã¯é¿ããŠãã ããã
- 培åºçã«ãã¹ãããïŒ äžè²«ããåäœãä¿èšŒããããã«ãç°ãªããã©ãŠã¶ãããã€ã¹ã§ã¢ã³ã«ãŒã¯ãšãªããã¹ãããŸãã
- ã³ãŒããææžåããïŒ åã¢ã³ã«ãŒèŠçŽ ã®ç®çãšã¹ã¿ã€ã«ãé©çšãããæ¡ä»¶ã説æããã¢ã³ã«ãŒã¯ãšãªãæç¢ºã«ææžåããŸãã
- ããã©ãŒãã³ã¹ãèæ ®ããïŒ ãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãç£èŠããå¿ èŠã«å¿ããŠã¢ã³ã«ãŒã¯ãšãªãæé©åããŸãã
- ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ããšå ±ã«äœ¿çšããïŒ ã¢ã³ã«ãŒã¯ãšãªããµããŒããããŠããªãå Žåã§ãããŠã§ããµã€ããé©åã«æ©èœããããã«èšèšããŸãïŒäŸïŒãã©ãŒã«ããã¯ã¹ã¿ã€ã«ã䜿çšïŒã
- 䜿ããããªãïŒ ã¢ã³ã«ãŒã¯ãšãªã¯æŠç¥çã«äœ¿çšããŸãã匷åã§ãããåžžã«æé©ãªè§£æ±ºçãšã¯éããŸãããããåçŽãªã·ããªãªã§ã¯ãã¡ãã£ã¢ã¯ãšãªãã³ã³ããã¯ãšãªãããé©åãããããŸããã
CSSãšã¢ã³ã«ãŒã¯ãšãªã®æªæ¥
ã¢ã³ã«ãŒã¯ãšãªã¯ãã¬ã¹ãã³ã·ããŠã§ããã¶ã€ã³ã«ããã倧ããªåé²ã衚ããèŠçŽ ã®é¢ä¿ã«åºã¥ãããããã€ãããã¯ã§æèã«å¿ããã¹ã¿ã€ãªã³ã°ãå¯èœã«ããŸãããã©ãŠã¶ã®ãµããŒããåäžããéçºè ããã®åŒ·åãªãã¯ããã¯ã«æ £ããã«ã€ããŠãå°æ¥çã«ã¯ããã«é©æ°çã§åµé çãªã¢ã³ã«ãŒã¯ãšãªã®å¿çšãèŠãããããšãæåŸ ãããŸããããã«ãããäžçäžã®ãŠãŒã¶ãŒã«ãšã£ãŠãããã¢ãããã£ãã§ããŠãŒã¶ãŒãã¬ã³ããªãŒã§ãé åçãªãŠã§ãäœéšãããããããã§ãããã
ã¢ã³ã«ãŒã¯ãšãªã®ãããªæ©èœãåããCSSã®ç¶ç¶çãªé²åã¯ãéçºè ãJavaScriptãžã®äŸåãæžãããããæŽç·Žãããé©å¿æ§ã®é«ããŠã§ããµã€ããäœæããããšãå¯èœã«ããçµæãšããŠããã¯ãªãŒã³ã§ãä¿å®ãããããããã©ãŒãã³ã¹ã®é«ãã³ãŒãã«ã€ãªãããŸãã
ã°ããŒãã«ãªåœ±é¿ãšã¢ã¯ã»ã·ããªãã£
ã¢ã³ã«ãŒã¯ãšãªãå®è£ ããéã«ã¯ããã¶ã€ã³ã®ã°ããŒãã«ãªåœ±é¿ãšã¢ã¯ã»ã·ããªãã£ãèæ ®ããŠãã ãããç°ãªãèšèªãæžèšäœç³»ã¯ãèŠçŽ ã®ã¬ã€ã¢ãŠãããµã€ãžã³ã°ã«åœ±é¿ãäžããå¯èœæ§ããããŸããäŸãã°ãäžåœèªã®ããã¹ãã¯ãå¹³åããŠè±èªã®ããã¹ããããå°ãªãèŠèŠçã¹ããŒã¹ãå æããŸããã¢ã³ã«ãŒã¯ãšãªããããã®ããªãšãŒã·ã§ã³ã«é©åã«é©å¿ããããšã確èªããŠãã ããã
ã¢ã¯ã»ã·ããªãã£ããŸãæéèŠã§ããã¢ã³ã«ãŒã¯ãšãªã«åºã¥ããŠã³ã³ãã³ããé衚瀺ãŸãã¯è¡šç€ºããå Žåãé衚瀺ã®ã³ã³ãã³ããé©åãªå Žåã«ã¯æ¯æŽæè¡ã«ãã£ãŠåŒãç¶ãã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ãããARIA屿§ã䜿çšããŠãèŠçŽ éã®é¢ä¿ãšãã®ç¶æ ã«é¢ããã»ãã³ãã£ãã¯ãªæ å ±ãæäŸããŸãã
çµè«
CSSã¢ã³ã«ãŒã¯ãšãªã¯ãã¬ã¹ãã³ã·ããŠã§ããã¶ã€ã³ã®ããŒã«ããããžã®åŒ·åãªè¿œå æ©èœã§ãããä»ã®èŠçŽ ãšã®é¢ä¿ã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ããäžã§æ°ããªã¬ãã«ã®å¶åŸ¡ãšæè»æ§ãæäŸããŸãããŸã æ¯èŒçæ°ãããé²åããŠããæ®µéã§ãããã¢ã³ã«ãŒã¯ãšãªã¯ç§ãã¡ãã¬ã¹ãã³ã·ããã¶ã€ã³ã«åãçµãæ¹æ³ãé©åœçã«å€ããå¯èœæ§ãç§ããŠããããããã€ãããã¯ã§ãæèã«å¿ããããŠãŒã¶ãŒãã¬ã³ããªãŒãªãŠã§ãäœéšã«ã€ãªãããŸããã³ã¢ã³ã³ã»ããããã¹ããã©ã¯ãã£ã¹ãããã³æœåšçãªèª²é¡ãçè§£ããããšã§ãéçºè ã¯ã¢ã³ã«ãŒã¯ãšãªã®åãæŽ»çšããŠãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã®ããã«çã«ã¢ãããã£ãã§é åçãªãŠã§ããµã€ããäœæããããšãã§ããŸãã