全ブラウザ対応したcontainer queryは何がスゴイのか？

全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。

デモ①
SNSリアクションバー（container-type, @container）
https://codepen.io/tonkotsuboy/pen/PoBMMZw

デモ②
古都めぐり（cqw）
https://codepen.io/tonkotsuboy/pen/jOvOqOG

Zenn記事
https://zenn.dev/moneyforward/articles/css-container-query

Twitter
https://twitter.com/tonkotsuboy_com

3/1（水）に「TechFeed Experts Night#14 」で発表した内容です。
https://techfeed.io/events/techfeed-experts-night-14

Transcript

1. શϒϥ΢βରԠͨ͠
   DPOUBJOFSRVFSZ͸Կ͕εΰΠͷ͔ʁ
   ϚωʔϑΥϫʔυࣛ໺૖
   
   5FDI'FFE&YQFSUT/JHIUʙઈର໾ཱͭʂ࠷ઌ୺ͷ$44૯͟Β͍
   

   View Slide

2. ࣛ໺૖!UPOLPUTVCPZ@DPN
   

   View Slide

3. ࣥචɿ+BWB4DSJQUίʔυϨγϐू
   

   View Slide

4. ࣥචɿ೔ܦιϑτ΢ΣΞ
   

   View Slide

5. !NFEJBʹΑΔϨεϙϯγϒରԠͷ՝୊
   01
   

   View Slide

6. SNSͷϖʔδͷϦΞΫγϣϯόʔ։ൃ
   

   View Slide

7. SNSͷϖʔδͷϦΞΫγϣϯόʔ։ൃ
   

   View Slide

8. ਌ཁૉͷྖҬʹΑͬͯ2छྨͷαΠζ͕͋Δ
   ʮ͍͍ͶʯͳͲͷςΩετ͋Γ
   ΞΠίϯɾ਺஋ͷΈ
   

   View Slide

9. @mediaͷج४͸΢Πϯυ΢෯
   

   View Slide

10. ը໘෯1480pxҎ্ͷͱ͖
    ʮ͍͍ͶʯͳͲͷςΩετ͋Γ
    ʮ͍͍ͶʯͳͲͷςΩετ͋Γ
    

    View Slide

11. ɹը໘෯ 1080pxҎ্1480pxະຬͷͱ͖
    ʮ͍͍ͶʯͳͲͷςΩετ͋Γ
    ΞΠίϯɾ਺஋ͷΈ
    

    View Slide

12. ɹը໘෯859pxҎ্1080pxະຬͷͱ͖
    ʮ͍͍ͶʯͳͲͷςΩετ͋Γ
    ʮ͍͍ͶʯͳͲͷςΩετ͋Γ
    

    View Slide

13. ը໘෯825pxҎ্859pxະຬͷͱ͖
    ʮ͍͍ͶʯͳͲͷςΩετ͋Γ
    ΞΠίϯɾ਺஋ͷΈ
    

    View Slide

14. ը໘෯825pxະຬͷͱ͖
    ·ͩ·ͩͨ͘͞Μͷ৚݅෼ذ͕͋Δ🤯
    

    View Slide

15. ͨ͘͞Μͷ @media Λॻ͔ͳ͍ͱ͍͚ͳ͍
    @media (min-width: 1480px) {
    
    
    .reaction-bar-1 { /* テキスト表⽰ */ }
    
    
    .reaction-bar-2 { /* テキスト表⽰ */ }
    
    
    }
    
    
    @media (min-width: 1080px) and (max-width: 1480px) {
    
    
    .reaction-bar-1 { /* テキスト表⽰ */ }
    
    
    .reaction-bar-2 { /* アイコン・数値のみ */ }
    
    
    }
    
    
    @media (min-width: 859px) and (max-width: 1080px) {
    
    
    .reaction-bar-1 { /* テキスト表⽰ */ }
    
    
    .reaction-bar-2 { /* テキスト表⽰ */ }
    
    
    }
    
    
    @media (min-width: 825px) and (max-width: 859px) {
    
    
    .reaction-bar-1 { /* テキスト表⽰ */ }
    
    
    .reaction-bar-2 { /* アイコン・数値のみ */ }
    
    
    }
    
    
    /* 以下略 */
    
    
    ︙
    ը໘෯ 1080px Ҏ্ 1480px ະຬͷͱ͖
    ϝΠϯΤϦΞɿ ςΩετදࣔ
    Լ෦ΤϦΞɿΞΠίϯɾ਺஋ͷΈ
    ը໘෯ 1480px Ҏ্ͷͱ͖
    ϝΠϯΤϦΞɿ ςΩετදࣔ
    Լ෦ΤϦΞɿςΩετදࣔ
    ը໘෯ 859px Ҏ্ 1080px ະຬͷͱ͖
    ϝΠϯΤϦΞɿ ςΩετදࣔ
    Լ෦ΤϦΞɿςΩετදࣔ
    ը໘෯ 825px Ҏ্ 859px ະຬͷͱ͖
    ϝΠϯΤϦΞɿ ςΩετදࣔ
    Լ෦ΤϦΞɿΞΠίϯɾ਺஋ͷΈ
    ʜ
    

    View Slide

16. ߋʹ஫จ͕௥Ճ͞ΕΔ
    w φϏήʔγϣϯόʔͷ෯Λม͑ͨͷͰɺ
    

    ϝΠϯΤϦΞͷ෯΋มΘΓ·ͨ͠
    w φϏήʔγϣϯ͸։ดػೳΛ΋ͨͤͨͷͰɺ
    

    ։͍ͨͱ͖͚ͩ෯͕มΘΓ·͢
    w ˓˓QYͷͱ͖͚ͩϨΠΞ΢τ͕͓͔͍͠Ͱ͢
    

    View Slide

17. ΢Πϯυ΢αΠζ͚ͩͰ
    ෳࡶͳϨεϙϯγϒରԠ͸ݶք͕͋Δ🤯
    

    View Slide

18. ͦ͜Ͱొ৔͢Δͷ͕
    ίϯςφΫΤϦ💐
    

    View Slide

19. ίϯςφΫΤϦ
    02
    

    View Slide

20. ΢Πϯυ΢αΠζͰ͸ͳ͘
    ೚ҙͷཁૉͷαΠζΛج४ʹ͢Δ💐
    

    View Slide

21. ೚ҙͷཁૉͷαΠζΛج४ʹͰ͖Δ
    

    View Slide

22. ج४ͱͳΔཁૉʮίϯςφʯ
    ίϯςφ
    ίϯςφ
    

    View Slide

23. ج४ͱͳΔཁૉʮίϯςφʯ
    ίϯςφ
    େ͖ͳίϯςφɿʮ͍͍ͶʯͳͲͷςΩετදࣔ
    খ͞ͳίϯςφɿΞΠίϯɾ਺஋ͷΈ
    

    View Slide

24. ίϯςφΫΤϦΛ࢖͏3εςοϓ
    ᶃج४ͱͳΔίϯςφΛܾఆ͢Δ
    ᶄํ޲Λࢦఆ͢Δ
    ᶅΫΤϦΛॻ͘
    

    View Slide

25. ᶃج४ͱͳΔίϯςφΛܾఆ͢Δ
    

    View Slide

26. ࠓճ͸
    .reaction-barཁૉΛ
    ίϯςφʹ͠·͢
    ᶃ ج४ͱͳΔίϯςφͷܾఆ
    
    
    
    
    
    
    返信ボタン
    
    
    返信する
    
    
    60
    
    
    
    
    
    
    
    
    いいねボタン
    
    
    いいね
    
    
    120
    
    
    
    
    
    
    
    
    
    

    View Slide

27. container-type͔containerϓϩύςΟΛઃఆ
    ϓϩύςΟ͕ઃఆ͞Εͨཁૉ͕ίϯςφʹͳΔ
    .reaction-bar {
    
    
    container-type: ○○;
    
    
    }
    

    View Slide

28. ᶄํ޲Λࢦఆ͢Δ
    

    View Slide

29. ࠓճ͸ΠϯϥΠϯํ޲ʢԣ෯ʣΛج४ʹ͢Δ
    ίϯςφ
    ΠϯϥΠϯํ޲ʢԣ෯ʣͷαΠζ͕େ͖͍ͱ͖
    ΠϯϥΠϯํ޲ʢԣ෯ʣͷαΠζ͕খ͍͞ͱ͖
    

    View Slide

30. ͲͪΒͷํ޲Λج४ʹελΠϧΛ͋ͯΔ͔ʁ
    ΠϯϥΠϯ
    ϒϩοΫ
    ˞ਤͷΠϯϥΠϯɾϒϩοΫํ޲͸೔ຊޠ
    

    View Slide

31. ΠϯϥΠϯํ޲ͷΈ
    container-type: inline-size;
    

    View Slide

32. ΠϯϥΠϯํ޲ɾϒϩοΫํ޲ͷ྆ํ
    container-type: size;
    

    View Slide

33. ࠓճ͸ΠϯϥΠϯํ޲ʢԣ෯ʣΛج४ʹ͢Δ
    .reaction-bar {
    
    
    container-type: inline-size;
    
    
    }
    

    View Slide

34. ᶅΫΤϦΛॻ͘
    

    View Slide

35. @containerͰίϯςφʹԠͨ͡ελΠϧ
    @container (max-width: 560px) {
    
    
    /*
    
    
    コンテナが560px以下のときにだけのスタイル
    
    
    */
    
    
    }
    

    View Slide

36. 560pxҎԼͷͱ͖͚ͩ.textΛফ͢
    .reaction-bar {
    
    
    container-type: inline-size;
    
    
    }
    
    
    @container (max-width: 560px) {
    
    
    .reaction-bar .text {
    
    
    display: none;
    
    
    }
    
    
    }
    
    
    
    
    
    
    
    
    返信ボタン
    
    
    返信する
    
    
    60
    
    
    
    
    
    
    
    
    いいねボタン
    
    
    いいね
    
    
    120
    
    
    
    
    
    
    
    
    
    )5.- $44
    

    View Slide

37. σϞ
    IUUQTDEQOJPQFOEFCVH1P#..;X
    

    View Slide

38. ίϯςφΫΤϦ͸
    3FBDU౳ͷίϯϙʔωϯτ։ൃͱ
    ૬ੑ͕Α͍
    

    View Slide

39. ίϯςφ͕޿͍͔Ͳ͏͔͚ͩΛߟ͑Ε͹Α͍
    ίϯςφ
    ΠϯϥΠϯํ޲ͷαΠζ͕େ͖͍ͱ͖
    ΠϯϥΠϯํ޲ͷαΠζ͕খ͍͞ͱ͖
    

    View Slide

40. ϦΞΫγϣϯόʔ୲౰ऀ͕ؾʹ͢Δͷ͸ίϯςφ͚ͩ
    ϦΞΫγϣϯόʔΛ࡞Δਓ શମΛ࡞Δਓ
    

    View Slide

41. ίϯςφʹର͢Δׂ߹αΠζ
    03
    

    View Slide

42. DRX DRI
    

    View Slide

43. cqwɿίϯςφ෯ʹର͢Δׂ߹αΠζ
    ίϯςφ
    100cqw
    

    View Slide

44. cqhɿίϯςφߴ͞ʹର͢Δׂ߹αΠζ
    ίϯςφ
    100cqh
    

    View Slide

45. ׆༻ྫ
    

    View Slide

46. ίϯςφ෯ʹରͯ͠5จࣈʹ͍ͨ͠
    

    View Slide

47. ίϯςφ෯ʹରͯ͠5จࣈʹ͍ͨ͠
    ίϯςφ
    

    View Slide

48. 100cqwΛ5෼ׂ͢Δ
    20cqw(100cqw / 5)
    

    View Slide

49. .text-container {
    
    
    width: 30dvw;
    
    
    container-type: inline-size;
    
    
    }
    
    
    .text-container .text {
    
    
    font-size: 19cqw;
    
    
    }
    ίϯςφͱfont-sizeͷࢦఆ
    
    
    
    古都めぐり
    
    
    
    )5.- $44
    

    View Slide

50. .text-container {
    
    
    width: 30dvw;
    
    
    container-type: inline-size;
    
    
    }
    
    
    .text-container .text {
    
    
    font-size: 19cqw;
    
    
    }
    ίϯςφͱfont-sizeͷࢦఆ
    
    
    
    古都めぐり
    
    
    
    )5.- $44
    DRXʹͨ͠৔߹ɺίϯςφαΠζʹΑͬͯ͸
    

    'JSFGPY΍4BGBSJͰ៉ྷʹ෼ׂͰ͖ͳ͍ͷͰɺগ͠খ͞Ίʹ͓ͯ͘͠
    

    View Slide

51. ਌ཁૉͷαΠζ͕มΘͬͯ΋5จࣈ
    IUUQTDEQOJPQFOEFCVHK0W0R0(
    

    View Slide

52. ରԠϒϥ΢β
    04
    

    View Slide

53. @container, container-type, cqw͸શϒϥ΢βରԠࡁΈ
    IUUQTDBOJVTFDPNDTTDPOUBJOFSRVFSJFT
    

    View Slide

54. @container, container-type, cqw͸શϒϥ΢βରԠࡁΈ
    IUUQTDBOJVTFDPNDTTDPOUBJOFSRVFSJFT
    ʹରԠ💐
    

    View Slide

55. ·ͱΊ
    

    View Slide

56. ίϯςφΫΤϦΛ࢖͏ͱ
    ΢Πϯυ΢Ͱ͸ͳ͘೚ҙͷαΠζΛج४ʹ
    ϨεϙϯγϒରԠ͕Մೳ
    

    View Slide

57. ίϯςφαΠζ͑͞ؾʹ͢Ε͹Α͍ͷͰ
    ίϯϙʔωϯτ։ൃ͕ศརʹͳΔ
    

    View Slide

58. ίϯςφΫΤϦؔ࿈$44
    container-type: inline-size;
    
    
    @container
    
    
    cqw, cqh
    

    View Slide

59. هࣄͰ΋ৄ͘͠ղઆ͍ͯ͠·͢
    IUUQT[FOOEFWNPOFZGPSXBSEBSUJDMFTDTTDPOUBJOFSRVFSZ
    

    View Slide

60. Thank y !
    @tonkotsuboy_com
    @matsu_eri
    5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢
    

    View Slide