CSSã®text-decoration-skip-inkããããã£ãæ·±æãããããã¹ãè£ é£Ÿããã£ã»ã³ããŒãšéãªãã®ãé²ããåœéçãªã¿ã€ãã°ã©ãã£ã®å¯èªæ§ãšçŸèгãåäžãããæ¹æ³ã解説ããŸãã
CSS text-decoration-skip-ink: ã°ããŒãã«ã¿ã€ãã°ã©ãã£ã®ããã®ãã£ã»ã³ããŒè¡çªåé¿ããã¹ã¿ãŒãã
ã¿ã€ãã°ã©ãã£ã¯ãèŠèŠçã«é
åçã§èªã¿ããããŠã§ãäœéšãåµåºããäžã§éèŠãªåœ¹å²ãæãããŸããããã¹ãè£
食ããã£ã»ã³ããŒïŒ'g', 'j', 'p', 'q', 'y'ãªã©ã®æåã§ããŒã¹ã©ã€ã³ããäžã«äŒžã³ãéšåïŒãšã©ã®ããã«çžäºäœçšããããšããäžèŠäºçްãªãã£ããŒã«ããå
šäœã®çŸèгãšå€èªæ§ã«å€§ããªåœ±é¿ãäžããããšããããŸããCSSã®ããããã£ã§ããtext-decoration-skip-inkã¯ããã®çžäºäœçšãå¶åŸ¡ããããã®åŒ·åãªã¡ã«ããºã ãæäŸããããã¹ãè£
食ããã£ã»ã³ããŒãå·§ã¿ã«é¿ããããšãä¿èšŒããŸããããã¯ããã£ã»ã³ããŒã®é·ããé »åºŠã倧ããç°ãªãå€èšèªã³ã³ãã³ãã«ãšã£ãŠç¹ã«éèŠã§ãã
ããã¹ãè£ é£Ÿãšãã£ã»ã³ããŒã®è¡çªã«ã€ããŠ
CSSã®text-decorationããããã£ã¯ãããã¹ãã«äžç·ãäžç·ãåãæ¶ãç·ããŸãã¯äºéäžç·ã远å ããããšãã§ããŸãããããã®è£
食ã¯èŠèŠçãªåŒ·èª¿ãé«ããŸãããæãšããŠæåã®ãã£ã»ã³ããŒãšè¡çªããäžå¿«ã§èªã¿ã«ãã广ãçã¿åºãããšããããŸãããã®è¡çªã¯ã倪ãããã¹ãè£
食ãé·ããã£ã»ã³ããŒãæã€ãã©ã³ãã䜿çšããå Žåã«ç¹ã«é¡èã§ãã
text-decoration-skip-inkãå°å
¥ããã以åã¯ãéçºè
ã¯ãã®æåãã»ãšãã©å¶åŸ¡ã§ããŸããã§ããã圌ãã¯ãã°ãã°ãã«ã¹ã¿ã ã¹ã¿ã€ãªã³ã°ãJavaScriptã«ããæäœãšãã£ãåé¿çã«é Œã£ãŠããŸãããããããã¯ç
©éã§å¿
ãããä¿¡é Œã§ãããã®ã§ã¯ãããŸããã§ãããtext-decoration-skip-inkããããã£ã¯ããã®åé¡ã«CSSå
ã§çŽæ¥å¯ŸåŠããããã®ã¯ãªãŒã³ã§æšæºåããã解決çãæäŸããŸãã
text-decoration-skip-inkã®ç޹ä»
text-decoration-skip-inkããããã£ã¯ãããã¹ãè£
食ãããã¹ãã®ã°ãªãïŒå圢ïŒãã©ã®ããã«ã¹ãããããããæå®ããŸããããã¯äž»ã«ãè£
é£Ÿãšæåã®ã€ã³ã¯ãç¹ã«ãã£ã»ã³ããŒãšã®è¡çªãé¿ããããšã«çŠç¹ãåœãŠãŠããŸãããã®ããããã£ã¯ããã€ãã®å€ãåãå
¥ããŸãïŒ
auto: ããã©ã«ãå€ã§ãããã©ãŠã¶ãã€ã³ã¯ãã¹ããããããã©ãããæ±ºå®ããŸããäžè¬çã«ããã©ãŠã¶ã¯å¯èªæ§ãåäžãããããã«å¿ èŠãšå€æããå Žåã«ã€ã³ã¯ãã¹ãããããŸããall: ããã¹ãè£ é£Ÿã¯åžžã«ããã¹ãã®ã€ã³ã¯ãã¹ãããããŸããããã«ãããæãäžè²«ããè¡çªåé¿ãæäŸãããŸããnone: ããã¹ãè£ é£Ÿã¯æ±ºããŠããã¹ãã®ã€ã³ã¯ãã¹ãããããŸãããããã¯ãè£ é£Ÿãããã¹ããšäº€å·®ããããç¹å®ã®ãã¶ã€ã³ã·ããªãªã§åœ¹ç«ã€ããšããããŸããskip-box: (å®éšç) ãã®å€ã¯ãããã¹ãè£ é£Ÿãåã°ãªããå²ãããã¯ã¹ãã¹ãããããããã«ããŸããããã¯ã°ãªãã®ãµã€ããã¢ãªã³ã°ãèæ ®ã«å ¥ãããããallãšã¯ç°ãªããŸãã
æãäžè¬çã«äœ¿çšãããå€ã¯autoãšallã§ããããããã¯èŠèŠçãªé
åãšå¯èªæ§ã®éã§æè¯ã®ãã©ã³ã¹ãæäŸããŸãã
å®è·µçãªäŸãšå®è£
text-decoration-skip-inkãã©ã®ããã«æ©èœãããããå®è·µçãªäŸã§ç€ºããŸãããïŒ
äŸ1: autoã䜿çšããåºæ¬çãªäžç·
次ã®CSSãèããŠã¿ãŸãããïŒ
.underline {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
ãã£ã»ã³ããŒãå«ãããã¹ãã«é©çšãããšããã©ãŠã¶ã¯ãã£ã»ã³ããŒãšäº€å·®ããéšåã§äžç·ãã€ã³ããªãžã§ã³ãã«ã¹ãããããå¯èªæ§ãåäžãããŸããç°ãªããã±ãŒã«ããã©ã³ãã«å¯ŸããŠããã©ãŠã¶ã¯autoã¢ãŒãã§ç°ãªãããžãã¯ãå®è£ ããå ŽåããããŸãã
äŸ2: allã«ããäžè²«ããã¹ããã
ç°ãªããã©ãŠã¶ããã©ã³ãã§äžè²«ããã¹ãããåäœãä¿èšŒããã«ã¯ãallå€ã䜿çšã§ããŸãïŒ
.underline {
text-decoration: underline;
text-decoration-skip-ink: all;
}
ããã«ããã䜿çšãããŠãããã©ã³ãããã©ãŠã¶ã«é¢ä¿ãªããäžç·ãåžžã«ãã£ã»ã³ããŒãåé¿ããããšãä¿èšŒãããŸããããã¯ããã©ã³ãã®ã¬ã³ããªã³ã°ããã©ãŠã¶ã®åäœãç°ãªãå¯èœæ§ãããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã察象ãšãããŠã§ããµã€ãããŠã§ãã¢ããªã±ãŒã·ã§ã³ã«åœ¹ç«ã¡ãŸãã
äŸ3: noneã«ããã¹ãããã®ç¡å¹å
ãŸãã«ãããã¹ãè£
食ããã£ã»ã³ããŒãšäº€å·®ããããå ŽåããããŸããããã¯noneå€ã䜿çšããŠå®çŸã§ããŸãïŒ
.underline {
text-decoration: underline;
text-decoration-skip-ink: none;
}
ããã«ãããäžç·ããã£ã»ã³ããŒãçŽæ¥ééããããšã«ãªããç¹å®ã®ãã¶ã€ã³ã³ã³ããã¹ãã§ã¯æãŸããå ŽåããããŸãã
äŸ4: ä»ã®ããã¹ãè£ é£Ÿããããã£ãšã®äœµçš
text-decoration-skip-inkã¯ãä»ã®ããã¹ãè£
食ããããã£ãšçµã¿åãããŠãã«ã¹ã¿ãã€ãºããã广ãäœæã§ããŸããäŸãã°ïŒ
.custom-underline {
text-decoration: underline wavy red;
text-decoration-skip-ink: all;
}
ããã«ããããã£ã»ã³ããŒãã¹ãããããæ³¢ç¶ã®èµ€ãäžç·ãäœæãããŸããtext-decoration-skip-ink: all;ãå¯èªæ§ãä¿èšŒããŸãã
ãã©ãŠã¶ã®äºææ§
text-decoration-skip-inkããããã£ã¯ãChromeãFirefoxãSafariãEdgeãªã©ãææ°ã®ãã©ãŠã¶ã§åªãããµããŒãã享åããŠããŸãããã ããå€ãããŒãžã§ã³ã®Internet Explorerã§ã¯ãã®ããããã£ããµããŒããããŠããªãå ŽåããããŸãããŠã§ããããžã§ã¯ãã«ãã®ããããã£ãå®è£
ããéã«ã¯ããã©ãŠã¶ã®äºææ§ãèæ
®ããããšãäžå¯æ¬ ã§ãã
text-decoration-skip-inkããµããŒãããŠããªãå€ããã©ãŠã¶ã®å Žåãããã¹ãè£
食ã¯åã«ã€ã³ã¯ãã¹ãããããã«ã¬ã³ããªã³ã°ãããŸããããã¯çæ³çã§ã¯ãªããããããŸããããã¬ã€ã¢ãŠããå£ãããšã¯ãããŸãããå¿
èŠã«å¿ããŠããã£ãŒãã£ãŒã¯ãšãªïŒ@supportsïŒã䜿çšããŠããããã®ãã©ãŠã¶ã«ä»£æ¿ã®ã¹ã¿ã€ãªã³ã°ãæäŸã§ããŸãã
ã°ããŒãã«ã¿ã€ãã°ã©ãã£ã«é¢ããèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ãã¶ã€ã³ããå Žåãã¿ã€ãã°ã©ãã£ã¯ããã«éèŠã«ãªããŸããç°ãªãèšèªãæåäœç³»ã¯ãæåã®åœ¢ç¶ããã£ã»ã³ããŒã®é·ããç°ãªããŸããtext-decoration-skip-inkã¯ãããã¹ãè£
食ãç°ãªãèšèªããã©ã³ãã«ããã£ãŠèªã¿ããããçŸçã«çŸãããŸãŸã§ããããšãä¿èšŒããã®ã«åœ¹ç«ã¡ãŸããããã¯ãçºé³åºå¥ç¬Šå·ãå€çšãããããã èªã®ãããªèšèªã§ç¹ã«åœãŠã¯ãŸããŸãã
ç°ãªãæåäœç³»ãžã®å¯Ÿå¿
æ±ã¢ãžã¢ã®èšèªãªã©ã§äœ¿çšãããäžéšã®æžèšäœç³»ã«ã¯ãã©ãã³æåããŒã¹ã®æåäœç³»ãšåãæå³ã§ã®ãã£ã»ã³ããŒã¯ãããŸããããããã®æåäœç³»ãæ±ãå Žåãtext-decoration-skip-inkã¯ã»ãšãã©ããããã¯å
šãç®ã«èŠãã广ããªããããããŸãããããããäžè²«æ§ãä¿ã¡ãå°æ¥çã«èšèªã³ã³ãã³ãã倿Žãããå Žåã«ãã¶ã€ã³ãå
ç¢ã§ããç¶ããããã«ããã®ããããã£ãå«ããŠããããšã¯è¯ãç¿æ
£ã§ãã
ãã©ã³ãã®éžæ
ãã©ã³ãã®éžæããtext-decoration-skip-inkã®å¹æã«å€§ããªåœ±é¿ãäžããŸããé·ããã£ã»ã³ããŒãæã€ãã©ã³ãã¯ãçããã£ã»ã³ããŒãæã€ãã©ã³ãããããã®ããããã£ã®æ©æµãããå€ãåããå¯èœæ§ããããŸããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ãã©ã³ããéžæããéã¯ããµããŒããããŠããæåã®ç¯å²ãšãç°ãªããã©ãŠã¶ããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã§ãã©ã³ããã©ã®çšåºŠããŸãã¬ã³ããªã³ã°ãããããèæ
®ããŠãã ããã
ããŒã«ãªãŒãŒã·ã§ã³ãšåœéå
ããŒã«ãªãŒãŒã·ã§ã³ïŒl10nïŒãšåœéåïŒi18nïŒã¯ãã°ããŒãã«ãªãŠã§ãéçºã®éèŠãªåŽé¢ã§ããtext-decoration-skip-inkã¯ãç°ãªãèšèªãå°åã«ããã£ãŠããã¹ãè£
食ãèŠèŠçã«é
åçã§èªã¿ãããããšãä¿èšŒããããšã§ãããæŽç·Žãããã¢ã¯ã»ã·ãã«ãªãŠãŒã¶ãŒäœéšã«è²¢ç®ããŸãã
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
ã¢ã¯ã»ã·ããªãã£ã¯ãŠã§ããã¶ã€ã³ã®åºæ¬çãªåŽé¢ã§ããtext-decoration-skip-inkã¯ãèŠèŠé害ã®ãããŠãŒã¶ãŒã«ãšã£ãŠããã¹ãã®å¯èªæ§ãé«ããããšã§ãã¢ã¯ã»ã·ããªãã£ãåäžãããããšãã§ããŸããããã¹ãè£
食ããã£ã»ã³ããŒãšè¡çªããã®ãé²ãããšã«ããããã®ããããã£ã¯ãŠãŒã¶ãŒãåã
ã®æåãåºå¥ããã³ã³ãã³ããããå¿«é©ã«èªãã®ã容æã«ããŸãã
ãã¶ã€ã³ã§äœ¿çšãããããã¹ãè£ é£Ÿãèæ¯è²ãšååãªã³ã³ãã©ã¹ããæäŸããŠããããšã確èªããããšãéèŠã§ããã³ã³ãã©ã¹ãã®äœãããã¹ãã¯ãç¹ã«èŠèŠé害ã®ãããŠãŒã¶ãŒã«ãšã£ãŠèªã¿ã«ããããšããããŸããã³ã³ãã©ã¹ããã§ãã«ãŒã®ãããªããŒã«ã䜿çšããŠãè²ã®çµã¿åãããã¢ã¯ã»ã·ããªãã£åºæºãæºãããŠããããšã確èªããŠãã ããã
text-decoration-skip-inkã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
text-decoration-skip-inkããããã£ãæå€§éã«æŽ»çšããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ
®ããŠãã ããïŒ
allã䜿çšããŠäžè²«ããåäœã確ä¿ãã: ç°ãªããã©ãŠã¶ããã©ã³ãã§äžè²«ããã¹ãããåäœãä¿èšŒããã«ã¯ãallå€ã䜿çšããŸãã- ãã©ã³ãã®éžæãèæ ®ãã: ãã¶ã€ã³ã«é©ãããã£ã»ã³ããŒã®é·ããæã€ãã©ã³ããéžæããŸãã
- è€æ°ã®ãã©ãŠã¶ã§ãã¹ããã: ç°ãªããã©ãŠã¶ããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã§ãã¶ã€ã³ããã¹ããã
text-decoration-skip-inkãæåŸ éãã«æ©èœããŠããããšã確èªããŸãã - å¯èªæ§ãåªå ãã: çŽç²ã«çŸçãªèæ ®äºé ãããåžžã«å¯èªæ§ãåªå ããŸãã
- ä»ã®ããã¹ãè£ é£Ÿããããã£ãšçµã¿åããã: ããã¹ãè£ é£Ÿããããã£ã®ããŸããŸãªçµã¿åããã詊ããŠãã«ã¹ã¿ãã€ãºããã广ãäœæããŸãã
- å€ããã©ãŠã¶ã«ã¯ãã£ãŒãã£ãŒã¯ãšãªã䜿çšãã:
text-decoration-skip-inkããµããŒãããŠããªãå€ããã©ãŠã¶ã«ä»£æ¿ã®ã¹ã¿ã€ãªã³ã°ãæäŸããããã«ããã£ãŒãã£ãŒã¯ãšãªã䜿çšããŸãã
é«åºŠãªãã¯ããã¯ãšå°æ¥ã®ãã¬ã³ã
text-decoration-skip-inkã¯åŒ·åãªããŒã«ã§ãããèæ
®ãã¹ãããé«åºŠãªãã¯ããã¯ãå°æ¥ã®ãã¬ã³ãããããŸãïŒ
ããªã¢ãã«ãã©ã³ã
ããªã¢ãã«ãã©ã³ãã¯ããŠã§ã€ããå¹
ãåŸæãªã©ããã©ã³ãã®ç¹æ§ããã现ããå¶åŸ¡ã§ããŸããããã«ããããã£ã»ã³ããŒã®é·ãããã®ä»ã®ã¿ã€ãã°ã©ãã£æ©èœã®ããæ£ç¢ºãªèª¿æŽãå¯èœã«ãªããtext-decoration-skip-inkã®å¹æãããã«é«ããããšãã§ããŸãã
ã«ã¹ã¿ã ããã¹ãè£ é£Ÿ
CSSã¯ãŒãã³ã°ã°ã«ãŒãã¯ãããã¹ãè£ é£Ÿãã«ã¹ã¿ãã€ãºããæ°ããæ¹æ³ã暡玢ããŠãããè£ é£Ÿãã°ãªããšã©ã®ããã«çžäºäœçšãããã«ã€ããŠãããé«åºŠãªå¶åŸ¡ãå«ãŸããå¯èœæ§ããããŸãããããã®å°æ¥ã®çºå±ã¯ãèŠèŠçã«é åçã§ã¢ã¯ã»ã·ãã«ãªã¿ã€ãã°ã©ãã£ãå®çŸããäžã§ãããã«å€§ããªæè»æ§ãæäŸããå¯èœæ§ããããŸãã
JavaScriptããŒã¹ã®ãœãªã¥ãŒã·ã§ã³
ãã£ã»ã³ããŒã®è¡çªãåŠçããäžã§text-decoration-skip-inkãæšå¥šãããã¢ãããŒãã§ãããJavaScriptããŒã¹ã®ãœãªã¥ãŒã·ã§ã³ã¯ãããé«åºŠãªã«ã¹ã¿ãã€ãºãªãã·ã§ã³ãæäŸã§ããŸãããããã®ãœãªã¥ãŒã·ã§ã³ã¯éåžžãããã¹ãã¬ã€ã¢ãŠããåæããè¡çªãé¿ããããã«ããã¹ãè£
食ã®äœçœ®ãåçã«èª¿æŽããããšãå«ã¿ãŸãããããããããã¯äžè¬çã«ãtext-decoration-skip-inkãçŽæ¥äœ¿çšãããããè€éã§ããã©ãŒãã³ã¹ãäœããªããŸãã
çµè«
text-decoration-skip-inkããããã£ã¯ãèŠèŠçã«é
åçã§ã¢ã¯ã»ã·ãã«ãªã¿ã€ãã°ã©ãã£ãäœæããããšãããŠã§ãéçºè
ã«ãšã£ãŠè²ŽéãªããŒã«ã§ããããã¹ãè£
食ããã£ã»ã³ããŒãšè¡çªããã®ãé²ãããšã§ããã®ããããã£ã¯å¯èªæ§ãé«ããããæŽç·ŽããããŠãŒã¶ãŒäœéšã«è²¢ç®ããŸããããã¯ããã£ã»ã³ããŒã®é·ããé »åºŠã倧ããç°ãªãå€èšèªã³ã³ãã³ãã«ãšã£ãŠç¹ã«éèŠã§ãããã®ã¬ã€ãã§æŠèª¬ãããã¹ããã©ã¯ãã£ã¹ã«åŸããå°æ¥ã®ãã¬ã³ãã«ã€ããŠåžžã«æ
å ±ãåŸãããšã§ãtext-decoration-skip-inkãæŽ»çšããŠãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã®çã«åªããã¿ã€ãã°ã©ãã£ãäœæã§ããŸãã
äžè²«æ§ã®ããæé©ãªã¬ã³ããªã³ã°ãä¿èšŒããããã«ãå®è£
ã¯åžžã«ç°ãªããã©ãŠã¶ãããã€ã¹ã§ãã¹ãããããšãå¿ããªãã§ãã ããããŠã§ããé²åãç¶ããäžã§ãtext-decoration-skip-inkã®ãããªããããã£ãåãå
¥ããããšã¯ãã¢ãã³ã§å
æ¬çãªãŠã§ãäœéšãäœãäžããäžã§äžå¯æ¬ ãšãªããŸãã