$30 off During Our Annual Pro Sale. View Details »

2023 CSS

nishihara
September 20, 2023

2023 CSS

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

nishihara

September 20, 2023
Tweet

More Decks by nishihara

Other Decks in Technology

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