2023 CSS

2023年に使えるようになったCSSでレイアウトや表現について紹介します。

Transcript

1. 2023೥ʹ࢖͑ΔΑ͏ʹͳͬͨCSS
   ʙ৽͍͠Ξχϝʔγϣϯ΍ϨΠΞ΢τख๏ʙ
   

   View Slide

2. ੢ݪ ཌྷ
   גࣜձࣾ ICS
   ϑϩϯτΤϯυΤϯδχΞ
   @crayfisher_zari
   @t.nishihara710
   @crayfisher-zari.bsky.social
   

   View Slide

3. ීஈ͸͜ΜͳهࣄΛॻ͍͍ͯ·͢
   ಠཱͨ͠CSS translateɾrotateɾscale
   ϓϩύςΟ͔ͩΒͰ͖Δɺ
   ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ
   ҙ֎ͱԞਂ͍CSSͷfont-weightͷ࿩
   https://ics.media/entry/230830/ https://ics.media/entry/230309/
   NEW !
   

   View Slide

4. ࠷ۙ࢖͑ΔΑ͏ʹͳͬͨCSS
   ɾίϯςφΫΤϦ
   ɾ:has() ٙࣅΫϥε
   ɾࡾ֯ؔ਺
   ɾಠཱͨ͠ transform ϓϩύςΟ
   ɾεΫϩʔϧۦಈΞχϝʔγϣϯ
   ɾίϯςφΫΤϦ΍ has() Λ࢖ͬͨɺμογϡϘʔυը໘
   ɾεΫϩʔϧۦಈΞχϝʔγϣϯΛ࢖ͬͨσʔλϏδϡΞϥΠθʔγϣϯ
   Ͱ͖ΔΑ͏ʹͳͬͨϨΠΞ΢τ΍৽͍͠දݱྫ
   

   View Slide

5. ίϯςφΫΤϦ
   

   View Slide

6. ίϯςφΫΤϦͱ͸ ...ʁ
   ਌ཁૉͷ෯ʹԠͨ͡
   CSSͷग़͠෼͚͕Մೳ
   ϝσΟΞΫΤϦͷ਌ཁૉόʔδϣϯΈ͍ͨͳΠϝʔδ
   2023೥2݄͔Β࢖༻Մೳ
   

   View Slide

7. ϝσΟΞΫΤϦ͕ܭଌ͢Δ෯
   ίϯςφΫΤϦ͕ܭଌ͢Δ෯
   ϝσΟΞΫΤϦͱͷҧ͍
   

   View Slide

8. ίϯςφΫΤϦͷϝϦοτ
   ஫ҙ఺
   ίϯϙʔωϯτ୯ҐͷϨεϙϯγϒ͕΍Γ΍͘͢ͳΔ
   ਌ཁૉ͕ඞཁͳͷͰɺHTMLઃܭʹ޻෉͕ඞཁ
   

   View Slide

9. :has() ٙࣅΫϥε
   

   View Slide

10. :has() ٙࣅΫϥεͱ͸ ...ʁ
    ಛఆͷࢠཁૉΛ΋ͬͨ
    ηϨΫλʔ͕Մೳ
    ࢠཁૉʹԠͨ͡ηϨΫλʔ͸ըظత
    FirefoxҎ֎Ͱ࢖༻Մೳ
    

    View Slide

11. :has() ٙࣅΫϥεͷϝϦοτ
    ࢠཁૉͷঢ়ଶʹԠͨ͡਌ཁૉͷελΠϧมߋ͕Մೳ
    ˠಈతͳঢ়ଶมߋʹରͯ͠ॊೈʹରԠͰ͖Δ
    ʂ
    

    View Slide

12. ࡾ֯ؔ਺
    

    View Slide

13. CSSͷࡾ֯ؔ਺ͱ͸ ...ʁ
    ࡾ֯ؔ਺Λ͔ͭͬͨ
    ஋ͷࢦఆ͕Մೳ
    2023೥3݄͔Β࢖༻Մೳ
    ΈΜͳͷτϥ΢Ϛ
    sin, cos, tan
    asin, acos, atan
    ͕࢖༻Մೳ
    

    View Slide

14. ࡾ֯ؔ਺͸ԁʹؔ͢Δ࠲ඪ͕ಘҙ
    transform: translate(
    calc(cos(30deg) * var(--r)),
    calc(sin(0deg) * var(--r))
    );
    30deg
    r
    cos(30deg) ʷ r
    sin(30deg) ʷ r
    x
    =
    y
    ΢Σϒͷ৔߹ɺԼ޲͖͕ y ࠲ඪͷਖ਼ํ޲ʹͳΔͷͰ
    ਺ֶͱҧ͏ͷͰগ͠஫ҙ
    

    View Slide

15. CSSࡾ֯ؔ਺ͷϝϦοτ
    ֯౓Λར༻ͨ͠ࢦఆ͕ՄೳʹͳΔ
    ԁܗͷϨΠΞ΢τ͕΍Γ΍͘͢ͳΔ
    ༨ஊ
    ؒ઀తʹ˽
    2 ΍КͷΑ͏ͳ਺ΛCSSͰѻ͑ΔΑ͏ʹͳͬͨ
    ˠCSSม਺ʹԫۚൺ΍നۜൺͷΑ͏ͳ஋Λࢉग़Ͱ͖Δ
    

    View Slide

16. ಠཱͨ͠transformϓϩύςΟ
    

    View Slide

17. ಠཱͨ͠transformϓϩύςΟͱ͸ ...ʁ
    translate, rotate, scale ͕
    ಠཱͨ͠ϓϩύςΟͱͯ͠࢖༻Մೳ
    skew() ͸ಠཱͤͣ
    2022 ೥8݄͔Β࢖༻Մೳ
    

    View Slide

18. ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ
    transform: translate
    transform: rotate
    ैདྷ͸2ͭཁૉ͕ඞཁ
    

    View Slide

19. ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ
    translate
    rotate
    ͜Ε͔Β͸1ͭཁૉͰՄೳ
    

    View Slide

20. ಠཱͨ͠transformϓϩύςΟͷϝϦοτ
    ෳࡶͳΞχϝʔγϣϯ΋هड़͠΍͘͢ͳΓɺ
    Πʔδϯάͷௐ੔΋ಠཱͯ͠ௐ੔Ͱ͖Δ
    

    View Slide

21. εΫϩʔϧۦಈΞχϝʔγϣϯ
    

    View Slide

22. εΫϩʔϧۦಈΞχϝʔγϣϯͱ͸ ...ʁ
    εΫϩʔϧྔʹԠͨ͡
    ஈ֊తͳΞχϝʔγϣϯ͕Մೳ
    ࠓ·ͰJavaScript ͕ඞཁͩͬͨΑ͏ͳදݱ΋Ͱ͖Δʂ
    ChromeɺEdgeͷΈ࢖༻Մೳ
    

    View Slide

23. εΫϩʔϧۦಈΞχϝʔγϣϯͷϝϦοτ
    ύϥϥοΫεͷΑ͏ͳදݱ΋CSSͷΈͰՄೳ
    ޻෉࣍ୈͰ͍Ζ͍Ζͳදݱ͕Ͱ͖Δ
    ஫ҙ఺
    ಛఆ஍఺·Ͱ͖ͨΒΞχϝʔγϣϯΛ࣮ߦ͢ΔΑ͏ͳ
    ൃՐܕͷ΋ͷ͸Ͱ͖ͳ͍
    

    View Slide

24. ࣮૷ྫ
    

    View Slide

25. ίϯςφΫΤϦͱ :has() ٙࣅΫϥε
    https://ics-creative.github.io/pwa_night_vol55/container_query/
    

    View Slide

26. ࡾ֯ؔ਺ͱಠཱͨ͠
    transformϓϩύςΟ
    https://ics-creative.github.io/pwa_night_vol55/container_query/
    

    View Slide

27. εΫϩʔϧۦಈΞχϝʔγϣϯ
    https://ics-creative.github.io/pwa_night_vol55/scroll_driven/
    

    View Slide

28. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ICS Ͱ͸ϑϩϯτΤϯυΤϯδχΞΛืूத
    https://ics-web.jp/recruit/
    

    View Slide

29. ࢀߟจݙ
    CSS͚ͩͰεΫϩʔϧΞχϝʔγϣϯ͕࡞ΕΔʂ
    ʁ ৽ٕज़ Scroll-driven Animations ͱ͸
    https://ics.media/entry/230718/
    ಠཱͨ͠CSS translateɾrotateɾscaleϓϩύςΟ͔ͩΒͰ͖Δɺ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ
    https://ics.media/entry/230309/
    CSSͷࡾ֯ؔ਺Λཧղ͠Α͏
    ʂ sin()ͱcos() ͰͰ͖Δදݱ
    https://ics.media/entry/230126/
    

    View Slide