Tweet
Tweet

Slide 1

Slide 1 text

͜͜1ʙ2೥͘Β͍Ͱ ࢖͑ΔΑ͏ʹͳͬͨ ΢Σϒͷ৽ػೳʹ͍ͭͯ ϥϯμϜʹ஻Δ! 2024.03.15 ෱ԬϑϩϯτΤϯυษڧձ #1 ओཁϒϥ΢βʔͷ࠷৽൛ ͕͢΂ͯରԠͨ͠ ( )

Slide 2

Slide 2 text

ͳʹ΋ͳ͍ϖʔδ

Slide 3

Slide 3 text

CSS͕ωετʹରԠ CSS

Slide 4

Slide 4 text

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting 10೥લʹཉ͔ͬͨ͠ɻ

Slide 5

Slide 5 text

Ϗϡʔϙʔτͷछྨ͕૿͑ͨ CSS lvh / svh / dvh [new]

Slide 6

Slide 6 text

lvh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚΉϏϡʔϙʔτߴ͞

Slide 7

Slide 7 text

svh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚ·ͳ͍Ϗϡʔϙʔτߴ͞

Slide 8

Slide 8 text

dvh πʔϧόʔͷදࣔঢ়ଶʹ͋ΘͤͯಈతʹมԽ͢ΔϏϡʔϙʔτߴ͞

Slide 9

Slide 9 text

lvh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚΉϏϡʔϙʔτߴ͞ svh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚ·ͳ͍Ϗϡʔϙʔτߴ͞ dvh πʔϧόʔͷදࣔঢ়ଶʹ͋ΘͤͯಈతʹมԽ͢ΔϏϡʔϙʔτߴ͞ ※ ैདྷͷvh͸ϒϥ΢βʔͷʮσϑΥϧτͷߴ͞ʯͱͳΓɺϒϥ΢βʔͷ࣮૷ґଘʢ͓ͦΒ͘lvhͱಉ͡ʹͳΔʣɻ ※ ΋ͪΖΜlvw, svw, dvw΋͋Δͷ͕ͩɺ্هͷʮද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʯʹεΫϩʔϧόʔͷྖҬ ͸ؚ·Εͳ͍ͷͰɺ͋·Γ࣮༻্ͷҙຯ͸ͳ͍Α͏ʹࢥ͏ ·ͱΊ

Slide 10

Slide 10 text

svmin / svmax / lvmin / lvmax / dvmin / dvmax / vmin / vmax [new] Ϗϡʔϙʔτͷॎԣͷ͏ͪେ͖͍஋ or খ͍͞஋ΛऔΕΔ

Slide 11

Slide 11 text

transformػೳଟ͗͢ˠ෼ׂ CSS scale, rotate, translate͕ͦΕͧΕಠཱͨ͠ϓϩύςΟʹͳͬͨɻ ʢskew͸ͳ͔ͥͳ͍ʣ ΞχϝʔγϣϯͰ࢖͏ͱ͖ʹศརɻ

Slide 12

Slide 12 text

top, right, bottom, left ·ͱΊͯࢦఆͰ͖ΔΑ͏ʹͳͬͨ CSS →

Slide 13

Slide 13 text

accent-colorϓϩύςΟͰ ϥδΦϘλϯɾνΣοΫϘο Ϋεͷ৭͕؆୯ʹมߋՄೳʹ CSS CSS Render

Slide 14

Slide 14 text

range syntax CSS → ैདྷͷه๏ͩͱʮmax-widthͱҰக͢Δ৔߹͸Ͳ͚ͬͪͩͬʁʯͱͳΓ͕ͪͩͬͨͷͰɺͦ ͏͍͏؍఺Ͱ΋Θ͔Γ΍͘͢ͳͬͨɻ

Slide 15

Slide 15 text

container queries CSS ΢Οϯυ΢αΠζͰ͸ͳ͘೚ҙͷཁૉͷαΠζʹجͮ͘CSS੾Γସ͕࣮͑ݱՄೳʹɻ https://developer.mozilla.org/en-US/docs/Web/CSS/container-type

Slide 16

Slide 16 text

ʢࢲݟʣ ίϯϙʔωϯτ͕ࣗ਎ͷදࣔྖҬʹԠͯ͡ܝग़߲໨ͷαΠζײΛௐ੔͢Δͱ͍࣮ͬͨ૷ ͕JavaScriptͳ͠Ͱൺֱత؆୯ʹ࣮૷Ͱ͖ΔΑ͏ʹͳͬͨɻ ͨͩίϯςφʔ͸ίϯϙʔωϯτͷϧʔτཁૉʹݶఆ͢ΔͳͲԿΒ͔ͷنଇੑΛ࣋ͨͤ ͳ͍ͱϋΠίϯςΩετ͗͢Δ࣮૷ʹͳͬͯ͠·͏͔΋͠Εͳ͍ɻ

Slide 17

Slide 17 text

:has selector CSS ಛఆͷཁૉΛؚΜͰ͍Δ͜ͱΛ৚݅ʹελΠϧద༻͕Մೳʹ ※্هઆ໌͸ҰྫͰ͋Γɺ:hasηϨΫλʔͷػೳΛ໢ཏతʹઆ໌͍ͯ͠ͳ͍ https://developer.mozilla.org/en-US/docs/Web/CSS/:has imgΛ಺แ͢Δh2ཁૉʹελΠϧΛద༻

Slide 18

Slide 18 text

ʢࢲݟʣ ෳࡶͳCSSηϨΫλʔͷ࢖༻͸ՄಡੑΛ௿Լͤ͞Δɻ :hasͷ࢖༻͕૝ఆ͞ΕΔଟ͘ͷέʔεʹ͓͍ͯ͸ɺ۪௚ʹΫϥε෼͚͢Δ͔ɺReactίϯ ϙʔωϯτ಺ͰJavaScriptʹΑΔग़͠෼͚Λ͓͜ͳͬͨ΄͏͕Մಡੑͷ؍఺Ͱྑ͍ͱࢥ ͏ɻ

Slide 19

Slide 19 text

഑ྻͷඇഁյૢ࡞ Array.prototype.toSorted(); Array.prototype.toReverted(); Array.prototype.toSpliced(); Array.prototype.with(); ES

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Promise.withResolvers ES ֎෦͔Β resolve / reject ͠΍͘͢ͳͬͨɻ

Slide 22

Slide 22 text

Object.groupBy() Map.groupBy() ES https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

PopoverAPI HTML HTML͚ͩͰϙοϓΦʔόʔද͕࣮ࣔ૷Ͱ͖Δ More examples: https://mdn.github.io/dom-examples/popover-api/ • popovertargetactionଐੑͰด͡ΔϘλϯ΋࡞ΕΔ • .togglePopover() ͰJavaScript͔Βͷද੍ࣔޚ΋Մೳ • ::backdropٙࣅཁૉͰഎܠΛ҉͘͢Δ͜ͱ΋Մೳ

Slide 25

Slide 25 text

ཁૉͱPopover APIͷҧ͍ʢ͋Δ͍͸ซ༻ʣʹ͍ͭͯ೺Ѳ͓ͯ͘͜͠ͱΛਪ঑ https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#concepts_and_usage

Slide 26

Slide 26 text

ͳʹ΋ͳ͍ϖʔδ