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

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

全ブラウザ対応した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

tonkotsuboy_com

March 01, 2023
Tweet

More Decks by tonkotsuboy_com

Other Decks in Technology

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