2023年に使えるようになったCSSでレイアウトや表現について紹介します。
2023ʹ͑ΔΑ͏ʹͳͬͨCSSʙ৽͍͠ΞχϝʔγϣϯϨΠΞτख๏ʙ
View Slide
ݪ ཌྷגࣜձࣾ ICSϑϩϯτΤϯυΤϯδχΞ@crayfisher_zari@t.nishihara710@crayfisher-zari.bsky.social
ීஈ͜ΜͳهࣄΛॻ͍͍ͯ·͢ಠཱͨ͠CSS translateɾrotateɾscaleϓϩύςΟ͔ͩΒͰ͖Δɺ๛͔ͳΞχϝʔγϣϯςΫχοΫʂҙ֎ͱԞਂ͍CSSͷfont-weightͷhttps://ics.media/entry/230830/ https://ics.media/entry/230309/NEW !
࠷ۙ͑ΔΑ͏ʹͳͬͨCSSɾίϯςφΫΤϦɾ:has() ٙࣅΫϥεɾࡾ֯ؔɾಠཱͨ͠ transform ϓϩύςΟɾεΫϩʔϧۦಈΞχϝʔγϣϯɾίϯςφΫΤϦ has() ΛͬͨɺμογϡϘʔυը໘ɾεΫϩʔϧۦಈΞχϝʔγϣϯΛͬͨσʔλϏδϡΞϥΠθʔγϣϯͰ͖ΔΑ͏ʹͳͬͨϨΠΞτ৽͍͠දݱྫ
ίϯςφΫΤϦ
ίϯςφΫΤϦͱ ...ʁཁૉͷ෯ʹԠͨ͡CSSͷग़͚͕͠ՄೳϝσΟΞΫΤϦͷཁૉόʔδϣϯΈ͍ͨͳΠϝʔδ20232݄͔Β༻Մೳ
ϝσΟΞΫΤϦ͕ܭଌ͢Δ෯ίϯςφΫΤϦ͕ܭଌ͢Δ෯ϝσΟΞΫΤϦͱͷҧ͍
ίϯςφΫΤϦͷϝϦοτҙίϯϙʔωϯτ୯ҐͷϨεϙϯγϒ͕Γ͘͢ͳΔཁૉ͕ඞཁͳͷͰɺHTMLઃܭʹ͕ඞཁ
:has() ٙࣅΫϥε
:has() ٙࣅΫϥεͱ ...ʁಛఆͷࢠཁૉΛͬͨηϨΫλʔ͕ՄೳࢠཁૉʹԠͨ͡ηϨΫλʔըظతFirefoxҎ֎Ͱ༻Մೳ
:has() ٙࣅΫϥεͷϝϦοτࢠཁૉͷঢ়ଶʹԠͨ͡ཁૉͷελΠϧมߋ͕Մೳˠಈతͳঢ়ଶมߋʹରͯ͠ॊೈʹରԠͰ͖Δʂ
ࡾ֯ؔ
CSSͷࡾ֯ؔͱ ...ʁࡾ֯ؔΛ͔ͭͬͨͷࢦఆ͕Մೳ20233݄͔Β༻ՄೳΈΜͳͷτϥϚsin, cos, tanasin, acos, atan͕༻Մೳ
ࡾ֯ؔԁʹؔ͢Δ࠲ඪ͕ಘҙtransform: translate(calc(cos(30deg) * var(--r)),calc(sin(0deg) * var(--r)));30degrcos(30deg) ʷ rsin(30deg) ʷ rx=yΣϒͷ߹ɺԼ͖͕ y ࠲ඪͷਖ਼ํʹͳΔͷͰֶͱҧ͏ͷͰগ͠ҙ
CSSࡾ֯ؔͷϝϦοτ֯Λར༻ͨ͠ࢦఆ͕ՄೳʹͳΔԁܗͷϨΠΞτ͕Γ͘͢ͳΔ༨ஊؒతʹ˽2 КͷΑ͏ͳΛCSSͰѻ͑ΔΑ͏ʹͳͬͨˠCSSมʹԫۚൺനۜൺͷΑ͏ͳΛࢉग़Ͱ͖Δ
ಠཱͨ͠transformϓϩύςΟ
ಠཱͨ͠transformϓϩύςΟͱ ...ʁtranslate, rotate, scale ͕ಠཱͨ͠ϓϩύςΟͱͯ͠༻Մೳskew() ಠཱͤͣ2022 8݄͔Β༻Մೳ
ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯtransform: translatetransform: rotateैདྷ2ͭཁૉ͕ඞཁ
ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯtranslaterotate͜Ε͔Β1ͭཁૉͰՄೳ
ಠཱͨ͠transformϓϩύςΟͷϝϦοτෳࡶͳΞχϝʔγϣϯهड़͘͢͠ͳΓɺΠʔδϯάͷௐಠཱͯ͠ௐͰ͖Δ
εΫϩʔϧۦಈΞχϝʔγϣϯ
εΫϩʔϧۦಈΞχϝʔγϣϯͱ ...ʁεΫϩʔϧྔʹԠͨ͡ஈ֊తͳΞχϝʔγϣϯ͕Մೳࠓ·ͰJavaScript ͕ඞཁͩͬͨΑ͏ͳදݱͰ͖ΔʂChromeɺEdgeͷΈ༻Մೳ
εΫϩʔϧۦಈΞχϝʔγϣϯͷϝϦοτύϥϥοΫεͷΑ͏ͳදݱCSSͷΈͰՄೳ࣍ୈͰ͍Ζ͍Ζͳදݱ͕Ͱ͖Δҙಛఆ·Ͱ͖ͨΒΞχϝʔγϣϯΛ࣮ߦ͢ΔΑ͏ͳൃՐܕͷͷͰ͖ͳ͍
࣮ྫ
ίϯςφΫΤϦͱ :has() ٙࣅΫϥεhttps://ics-creative.github.io/pwa_night_vol55/container_query/
ࡾ֯ؔͱಠཱͨ͠transformϓϩύςΟhttps://ics-creative.github.io/pwa_night_vol55/container_query/
εΫϩʔϧۦಈΞχϝʔγϣϯhttps://ics-creative.github.io/pwa_night_vol55/scroll_driven/
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ICS ͰϑϩϯτΤϯυΤϯδχΞΛืूதhttps://ics-web.jp/recruit/
ࢀߟจݙ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/