LoginSignup
46

๐Ÿ‘นใ€Œใ—ใ‚“ใฎใ™ใ‘ใ€œ๏ผใ‚ใ‚“ใŸใ€CSSใฎ`:focus-visible`ใ‚‚ใ†ใŠๅ‹‰ๅผทใ—ใŸใ‚“ใงใ—ใ‚‡ใ†ใญใ€œ๏ผ๏ผŸใ€

ใ€œๅŸผ็Ž‰็œŒๆ˜ฅๆˆ‘้ƒจๅธ‚ใซใฆใ€œ

๐Ÿ‘ฉ๐Ÿปใ€Œใ—ใ‚“ใกใ‚ƒใ€œใ€œใ‚“๏ผใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใ‚ใชใŸใ€CSSใฎๆƒ…ๅ ฑใฏใกใ‚ƒใ‚“ใจใ‚ญใƒฃใƒƒใƒใ‚ขใƒƒใƒ—ใ—ใฆใ‚‹ใฎ๏ผŸใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใฒใพใ‚ใ‚Š็ต„ใงๆœ€ๅˆใซ่ฆšใˆใŸๅ†…ๅฎนใงๆญขใพใฃใฆใชใ„ใงใ—ใ‚‡ใ†ใญใ€œ๏ผŸใ€

:flag_de:ใ€Œใ‚ขใ‚ฏใ‚ทใƒงใƒณไปฎ้ขใฟใฆใ‹ใ‚‰ใ™ใ‚‹ใ‚พใ€œ๏ผใ€

๐Ÿ‘นใ€Œใ‚ใ‚“ใŸ๏ผๅ‰ใ‚‚ใใ†่จ€ใฃใฆใ—ใชใ‹ใฃใŸใ˜ใ‚ƒใชใ„ใฎ๏ผ๏ผใ€

๐Ÿ‘นใ€Œ็Ÿฅใ‚‰ใฌ้–“ใซๅ…จใƒ–ใƒฉใ‚ฆใ‚ถๅฏพๅฟœใ—ใฆใ‚‹ใ‚‚ใฎใ‚‚ใŸใใ•ใ‚“ใ‚ใ‚‹ใฎใ‚ˆ๏ผใ€
๐Ÿ‘นใ€Œใกใ‚ƒใ‚“ใจใŠๅ‹‰ๅผทใ—ใชใ•ใ€œใ„๏ผใ€

:flag_de:ใ€Œใปใปใƒผใ„...ใ€

ใ—ใ‚“ใกใ‚ƒใ‚“ใฏๆ˜ฅๆ—ฅ้ƒจๅธ‚ใ˜ใ‚ƒใชใใฆใ€ๆ˜ฅๆˆ‘้ƒจๅธ‚ใซไฝใ‚“ใงใ‚‹ใ‚ˆ๏ผ

:flag_de:๏ผˆใƒ‰ใ‚คใƒ„๏ผ‰ใฎๅ›ฝๆ——ใŒใ—ใ‚“ใกใ‚ƒใ‚“้ŽใŽใ‚‹ใ‚ˆ๏ผ

:flag_de: ไปŠๆ—ฅใฏ:focus-visibleใ‚’ใŠๅ‹‰ๅผทใ™ใ‚‹ใ‚พใ€œ๏ผ

:flag_de:ใ€Œใจใฏ่จ€ใˆใ€ใฟใ•ใˆใ€‚ใ€
:flag_de:ใ€Œไฝ•ใ‹ใ‚‰ใŠๅ‹‰ๅผทใ™ใ‚Œใฐใ„ใ„ใ‚“ใ ใ‚พใ€œ๏ผŸใ€

๐Ÿ‘ฉ๐Ÿปใ€Œไป•ๆ–นใชใ„ใ‚ใญใ€œใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใ˜ใ‚ƒใ‚ใ€ไปŠๆ—ฅใฏ:focus-visibleใซใคใ„ใฆใŠๅ‹‰ๅผทใ—ใพใ—ใ‚‡ใ€œใ€

:flag_de:ใ€Œๅˆใ‚ใฆ่žใ„ใŸใ‚พใ€œใ€
:flag_de:ใ€Œๆฆ‚่ฆใ‚’่ชฌๆ˜Žใ—ใฆใปใ—ใ„ใ‚พใ€œใ€

What is :focus-visible

๐Ÿ‘ฉ๐Ÿปใ€Œใ˜ใ‚ƒใ‚ๆ—ฉ้€Ÿ่ชฌๆ˜Žใ™ใ‚‹ใ‚ใญ๏ผใ€

๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡

  • ใพใšใ€:focus-visibleใฏๆ“ฌไผผ่ฆ็ด ใงใ‚ใ‚‹
  • ใ‚ญใƒผใƒœใƒผใƒ‰ๆ“ไฝœ๏ผˆใ‚ฟใƒ–ใ‚ญใƒผใงใฎ็งปๅ‹•๏ผ‰ใฎๅ ดๅˆใฎใฟใ€ใ‚นใ‚ฟใ‚คใƒซใŒ้ฉ็”จใ•ใ‚Œใ‚‹
  • ใƒžใ‚ฆใ‚นๆ“ไฝœๆ™‚ใฏๅŸบๆœฌ็š„ใซใ‚นใ‚ฟใ‚คใƒซใŒ้ฉ็”จใ•ใ‚Œใชใ„

๐Ÿ‘†๐Ÿ‘†๐Ÿ‘†

๐Ÿ‘ฉ๐Ÿปใ€Œใ–ใฃใจใ“ใ‚“ใชๆ„Ÿใ˜ใญ๐Ÿ‘†ใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใคใพใ‚Šใ€ใ‚ญใƒผใƒœใƒผใƒ‰ๆ“ไฝœๆ™‚ใงinputใ‚„buttonใซใƒ•ใ‚ฉใƒผใ‚ซใ‚นใ—ใŸๆ™‚ใฎใ‚นใ‚ฟใ‚คใƒซใŒ่จญๅฎšใงใใ‚‹ใฃใฆใ“ใจใญ๏ผใ€

:flag_de:ใ€ŒใŠใ€œใ€œใ€ๆฆ‚่ฆใฏใ‚ใ‹ใฃใŸใ‚พใ€œใ€
:flag_de:ใ€Œใฟใ•ใˆใ€ใ‚„ใ‚Œใฐใงใใ‚‹ใ˜ใ‚ƒใชใ„ใ‹ใ€œใ€

ใ€€
ใ€€๐Ÿ‘น
๐Ÿคœ:flag_de:๐Ÿค›

ใƒžใ‚ฆใ‚นๆ“ไฝœๆ™‚ใซๅŸบๆœฌ็š„ใซใจๆ›ธใ„ใŸใฎใฏใ€ไปฅไธ‹ใฎ็†็”ฑใŒใ‚ใ‚Šใพใ™๏ผ

  • ใ‚ญใƒผใƒœใƒผใƒ‰ใงใฎๅ…ฅๅŠ›ใ‚’ใ‚ตใƒใƒผใƒˆใ™ใ‚‹่ฆ็ด ใฏใƒžใ‚ฆใ‚นๆ“ไฝœๆ™‚ใงใ‚‚ใ‚นใ‚ฟใ‚คใƒซใŒ้ฉ็”จใ•ใ‚Œใ‚‹
    • input่ฆ็ด ใชใฉ...

:flag_de: :focusไฝฟใˆใฐใ€œใ€œ๏ผŸ

:flag_de:ใ€Œใงใ‚‚ใ€ใ‹ใƒผใกใ‚ƒใ‚“ใ€
:flag_de:ใ€Œinputใ‚„buttonใธใฎใƒ•ใ‚ฉใƒผใ‚ซใ‚นใชใ‚‰:focusใŒใ‚ใ‚‹ใ‚พ๏ผŸใ€
:flag_de:ใ€Œใ‚ˆใ—ใชใŒๅ…ˆ็”Ÿใ‚‚:focusใ‚’ไฝฟใ„ใพใ—ใ‚‡ใ†ใฃใฆ่จ€ใฃใฆใŸใ‚พใ€œใ€

๐Ÿ‘ฉ๐Ÿปใ€Œ็ขบใ‹ใซ:focusใ‚‚ใ‚ใ‚‹ใ‚ใญใ€
๐Ÿ‘นใ€Œใงใ‚‚ใ‚ใ‚“ใŸใ€ใ“ใฎๅ‰ใ‚ขใ‚ฏใ‚ทใƒงใƒณไปฎ้ขใฎใ‚ตใ‚คใƒˆไฝœใฃใฆใ‚‹ๆ™‚ใซใ€buttonใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ—ใŸใจใใฎoutlineใŒๆฐ—ใซใชใ‚‹ใฃใฆCSSใงๆถˆใ—ใฆใŸใงใ—ใ‚‡!?ใ€

:flag_de:ใ€ŒใŸใ€็ขบใ‹ใซๆถˆใ—ใŸใ‚พ...ใ€

๐Ÿ‘นใ€Œใƒฌใƒ“ใƒฅใƒผใฎๆ™‚ใซใ‚ณใƒกใƒณใƒˆใ—ใŸใฎใซใ‚ใ‚“ใŸ็„ก่ฆ–ใ—ใŸใงใ—ใ‚‡๏ผ๏ผใ€
:flag_de:ใ€Œ(ใใ†ใ ...ใ€ใฟใ•ใˆใซใƒฌใƒ“ใƒฅใƒผ้ ผใ‚“ใ ใฃใŸใ‚“ใ ...)ใ€
๐Ÿ‘นใ€Œๆœฌๆฅใฏใ‚ขใ‚ฏใ‚ปใ‚ทใƒ“ใƒชใƒ†ใ‚ฃใฎ่ฆณ็‚นใ‹ใ‚‰ใ€ๆถˆใ—ใกใ‚ƒใƒ€ใƒกใชใ‚‚ใฎใชใฎใ‚ˆ๏ผใ€

๐Ÿ‘ฉ๐Ÿปใ€Œใงใ‚‚ไปŠๅพŒใฏใ€:focusใ˜ใ‚ƒใชใ:focus-visibleใ‚’ไฝฟใˆใฐใ€ใ“ใฎๅ•้กŒใฏ่งฃๆถˆใ•ใ‚Œใ‚‹ใฎใ‚ˆใ€œใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใ‚ฏใƒชใƒƒใ‚ฏๆ™‚ใซใฏ้ฉ็”จใ•ใ‚Œใšใ€ใ‚ญใƒผใƒœใƒผใƒ‰ๆ“ไฝœใฎๆ™‚ใซใฎใฟ้ฉ็”จใ•ใ‚Œใ‚‹ใ‹ใ‚‰ใญใ€

:flag_de: ๅฎŸ้š›ใ€ใ‚ณใƒผใƒ‰่ฆ‹ใชใใ‚ƒใ‚ใ‹ใ‚“ใชใ„ใ‚พ

:flag_de:ใ€Œใ‹ใƒผใกใ‚ƒใ‚“...ใ€
:flag_de:ใ€Œใใ†่จ€ใ‚ใ‚Œใฆใ‚‚ใ€ๅฎŸ้š›ใ‚ณใƒผใƒ‰่ฆ‹ใชใ„ใจใ‚ใ‹ใ‚‰ใชใ„ใ‚พ...ใ€

:focusใฎๆŒ™ๅ‹•

๐Ÿ‘ฉ๐Ÿปใ€Œใ—ใ‚“ใกใ‚ƒใ‚“ใชใ‚‰ใใ†่จ€ใ†ใจๆ€ใฃใฆใ€็”จๆ„ใ—ใฆใ‚ใ‚‹ใ‚ใ€œ๐Ÿ‘‡ใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใพใšใฏ:focusใ‹ใ‚‰่ฆ‹ใฆใ„ใใพใ—ใ‚‡ใ€œ๐Ÿ‘‡ใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใ‚ฐใƒฌใƒผใฎ่ƒŒๆ™ฏใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚Œใฐใ€ไธ€ใค็›ฎใฎinputใซใ‚ญใƒผใƒœใƒผใƒ‰ใง็งปๅ‹•ใงใใ‚‹ใ‚ใ€œใ€

See the Pen Untitled by limoza (@limoza) on CodePen.

๐Ÿ‘ฉ๐Ÿปใ€Œใ‚ฏใƒชใƒƒใ‚ฏๆ™‚ใ‚‚ใ‚ญใƒผใƒœใƒผใƒ‰ๆ“ไฝœๆ™‚ใ‚‚ใ€ใƒ•ใ‚ฉใƒผใ‚ซใ‚นใ•ใ‚ŒใŸใ‚‰outlineใŒ่กจ็คบใ•ใ‚Œใ‚‹ใฎใŒใ‚ใ‹ใ‚‹ใ‚ใ‚ˆใญใ€œใ€
:flag_de:ใ€Œใ‚ใ‹ใ‚‹ใ‚พใ€œ๏ผ๏ผใ€

:focus-visibleใฎๆŒ™ๅ‹•

๐Ÿ‘ฉ๐Ÿปใ€Œใ“ใ‚Œใ‚’่ธใพใˆใฆ:focus-visibleใ‚’่ฆ‹ใฆใฟใพใ—ใ‚‡ใ†ใ€œ๐Ÿ‘‡ใ€
๐Ÿ‘ฉ๐Ÿปใ€ŒๅŒใ˜ใใ€ใ‚ฐใƒฌใƒผใฎ่ƒŒๆ™ฏใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚Œใฐใ€ไธ€ใค็›ฎใฎinputใซใ‚ญใƒผใƒœใƒผใƒ‰ใง็งปๅ‹•ใงใใ‚‹ใ‚ใ€œ๏ผใ€

See the Pen `:focus-visible` by limoza (@limoza) on CodePen.

๐Ÿ‘ฉ๐Ÿปใ€Œใฉใ†ใ‹ใ—ใ‚‰๏ผŸใ€
๐Ÿ‘ฉ๐Ÿปใ€Œinputใฏใ‚ญใƒผใƒœใƒผใƒ‰ๅ…ฅๅŠ›ใ‚’ใ‚ตใƒใƒผใƒˆใ™ใ‚‹่ฆ็ด ใ‚ˆใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใ ใ‹ใ‚‰ใ€ใ‚ฏใƒชใƒƒใ‚ฏๆ™‚ใ‚ญใƒผใƒœใƒผใƒ‰ๆ“ไฝœๆ™‚ใฎไธกๆ–นใงoutlineใŒ้ฉ็”จใ•ใ‚Œใฆใ„ใ‚‹ใ‚ใ€

๐Ÿ‘ฉ๐Ÿปใ€Œใงใ‚‚ใ€buttonใฏใ€ใฉใ†ใ‹ใช๏ผŸใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใ‚ฏใƒชใƒƒใ‚ฏๆ™‚ใฏใ‚นใ‚ฟใ‚คใƒซใŒ้ฉ็”จใ•ใ‚Œใšใ€ใ‚ญใƒผใƒœใƒผใƒ‰ๆ“ไฝœๆ™‚ใฎใฟoutlineใŒ้ฉ็”จใ•ใ‚Œใฆใ„ใ‚‹ใ‚๏ผใ€

:flag_de:ใ€Œใƒ›ใƒณใƒˆใ ใ‚พใ€œใ€œใ€œ๏ผ๏ผใ€
:flag_de:ใ€Œๅผท่ชฟใŒๅฟ…่ฆใชไบบใ‚’ใ‚ฟใƒผใ‚ฒใƒƒใƒˆใ—ใฆใ‚นใ‚ฟใ‚คใƒซใ‚’ๅฝ“ใฆใ‚‰ใ‚Œใฆใ‚‹ใ‚พใ€œใ€

๐Ÿ‘ฉ๐Ÿปใ€Œใ“ใ‚Œใงใ€:focus-visibleใฎๅฟ…่ฆๆ€งใŒใ‚ใ‹ใฃใŸใ‹ใ—ใ‚‰๏ผŸใ€
๐Ÿ‘ฉ๐Ÿปใ€Œ่ฆ‹ใฆใฎ้€šใ‚Šใ€ใจใฃใใซใปใผใ™ในใฆใฎใƒ–ใƒฉใ‚ฆใ‚ถใงใ‚ตใƒใƒผใƒˆใ•ใ‚Œใฆใ„ใ‚‹ใ‚ใ€œ๏ผใ€

image.png

:flag_de:ใ€Œใ‹ใƒผใกใ‚ƒใ‚“ใ€ใ‚ชใƒฉใจใฃใฆใ‚‚ใŠๅ‹‰ๅผทใซใชใฃใŸใ‚พ๏ผใ€
:flag_de:ใ€Œใ“ใ‚Œใ‹ใ‚‰ใฏ:focus-visibleใ‚’ไฝฟใฃใฆใ„ใใ‚พใ€œ๏ผใ€

๐Ÿ‘ฉ๐Ÿปใ€Œใˆใ‚‰ใ„ใ‚ใญ๏ผใ—ใ‚“ใกใ‚ƒใ‚“๏ผใ€
๐Ÿ‘ฉ๐Ÿปใ€Œใ“ใ‚Œใ‹ใ‚‰ใ‚‚ๅผ•ใ็ถšใใŠๅ‹‰ๅผท้ ‘ๅผตใ‚Šใพใ—ใ‚‡ใ†ใญใ€œใ€œใ€œใ€œใ€œใ€

:flag_de:ใ€Œใปใปใƒผใ„๏ผ๏ผ๏ผˆใƒใƒงใ‚ณใƒ“้ฃŸในใŸใ„๏ผ‰ใ€

ใ€€
ใ€€
ใ€€

โ–ผๅ‚่€ƒใซใ•ใ›ใฆใ„ใŸใ ใ„ใŸใ‚ตใ‚คใƒˆ
https://zenn.dev/sakito/articles/c5034684f2266c
https://evoworx.dev/blog/focus-visible/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
46