CSSã®ç–‘似クラス「:focus-withinã€ãŒç´ 晴らã—ã„ç†ç”±CSSã®ç–‘似クラス「:focus-withinã€ã‚’使用ã—ã¦ã€ãƒ•ã‚©ãƒ¼ãƒ ã®å…¥åŠ›æ™‚ã«ãƒã‚¤ãƒ©ã‚¤ãƒˆè¡¨ç¤ºã•ã›ã‚‹ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’紹介ã—ã¾ã™ã€‚ :focus-withinã¯é©ç”¨ã—ãŸè¦ç´ ã®åå«è¦ç´ ã«ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã«å½“ãŸã£ãŸæ™‚ã«èµ·å‹•ã™ã‚‹ã‚»ãƒ¬ã‚¯ã‚¿ã§ã€åŠ¹æžœçš„ã«ä½¿ç”¨ã™ã‚‹ã¨éžå¸¸ã«ä¾¿åˆ©ã§ã™ã€‚ Why CSS :focus-within is amazing by Chris Bongers 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚ã« HTMLã®æ§‹é€ CSSã®ç–‘似クラス「:focus-within〠:focus-withinã®åŠ¹æžœã‚’ã‚ˆã‚Šç´ æ™´ã‚‰ã—ã„ã‚‚ã®ã«ã™ã‚‹ :focus-withinã®ã‚µãƒãƒ¼ãƒˆãƒ–ラウザ ã¯ã˜ã‚ã« ã“ã“ã§ãŠè©±ã™ã‚‹ã®ã¯ã€ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã•ã‚ŒãŸè¦ç´ ã«ã‚¹ã‚¿ã‚¤ãƒ«ã™ã‚‹:focusセレクタã®ã“ã¨ã§ã¯ã‚ã‚Šã¾ã›ã‚“。:focus-withinã¯ã€ãã®ä¸ã®åå«è¦ç´
UIã®ä½¿ã„ã¥ã‚‰ã•ã«ã‚¤ãƒ©ãƒƒã¨ã™ã‚‹ï¼ã“ã‚ŒãŒãƒ•ã‚©ãƒ¼ãƒ ã§ä½¿ã„ã«ãã„最悪ãªãƒ¦ãƒ¼ã‚¶ã‚¤ãƒ³ã‚¿ãƒ¼ãƒ•ã‚§ã‚¤ã‚¹ã -User Inyerface
ã‚ã¾ã‚ŠçŸ¥ã‚‰ã‚Œã¦ã„ãªã„ã€ãƒ•ã‚©ãƒ¼ãƒ ã‚’CSSã§ã‚¹ã‚¿ã‚¤ãƒ«ã™ã‚‹ãŸã‚ã«å½¹ç«‹ã¤ä¾¿åˆ©ãªã‚»ãƒ¬ã‚¯ã‚¿ã¨ãã®ä½¿ã„æ–¹
[JS]ã“ã®ã‚¢ã‚¤ãƒ‡ã‚¢ã¯é¢ç™½ã„ï¼ã‚»ãƒ¬ã‚¯ãƒˆãƒœãƒƒã‚¯ã‚¹ã®é¸æŠžè‚¢ã‚’ã™ãã«é¸æŠžã§ãるよã†ã«ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -Quick[select]![[JS]ã“ã®ã‚¢ã‚¤ãƒ‡ã‚¢ã¯é¢ç™½ã„ï¼ã‚»ãƒ¬ã‚¯ãƒˆãƒœãƒƒã‚¯ã‚¹ã®é¸æŠžè‚¢ã‚’ã™ãã«é¸æŠžã§ãるよã†ã«ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -Quick[select]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5062373ec67701c8d65ca6ffdfe6e9cb4dc3565f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110901.png)
CSSã§ã‚ˆã使ã†ã‚³ãƒ¼ãƒ‰ã®ã¾ã¨ã‚ã€ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã®å®šç¾©ãƒ»Flexboxã®ã‚°ãƒªãƒƒãƒ‰ãƒ»ãƒœã‚¿ãƒ³ãƒ»ãƒ•ã‚©ãƒ¼ãƒ ・ユーティリティãªã© -Corpus
入力フォームã®ã€Œå¿…é ˆã€ã€Œä»»æ„ã€ã®ãƒ©ãƒ™ãƒ«ã¯ä¸¡æ–¹ä»˜ã‘ãªã„ã¨ã‚³ãƒ³ãƒãƒ¼ã‚¸ãƒ§ãƒ³çŽ‡ãŒä¸‹ãŒã‚‹
フォーム周りã§è¦šãˆã¦ãŠãã¨ä¾¿åˆ©ãªCSS Snippets - NxWorld
{{#tags}}- {{label}}
{{/tags}}