Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

  2. ࣛ໺૖!UPOLPUTVCPZ@DPN

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. ίϯςφΫΤϦ
    02

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. ࠓճ͸
    .reaction-barཁૉΛ
    ίϯςφʹ͠·͢
    ᶃ ج४ͱͳΔίϯςφͷܾఆ






    返信ボタン


    返信する


    60








    いいねボタン


    いいね


    120









    View full-size slide

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


    container-type: ○○;


    }

    View full-size slide

  28. ᶄํ޲Λࢦఆ͢Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. ࠓճ͸ΠϯϥΠϯํ޲ʢԣ෯ʣΛج४ʹ͢Δ
    .reaction-bar {


    container-type: inline-size;


    }

    View full-size slide

  34. ᶅΫΤϦΛॻ͘

    View full-size slide

  35. @containerͰίϯςφʹԠͨ͡ελΠϧ
    @container (max-width: 560px) {


    /*


    コンテナが560px以下のときにだけのスタイル


    */


    }

    View full-size slide

  36. 560pxҎԼͷͱ͖͚ͩ.textΛফ͢
    .reaction-bar {


    container-type: inline-size;


    }


    @container (max-width: 560px) {


    .reaction-bar .text {


    display: none;


    }


    }








    返信ボタン


    返信する


    60








    いいねボタン


    いいね


    120









    )5.- $44

    View full-size slide

  37. σϞ
    IUUQTDEQOJPQFOEFCVH1P#..;X

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. .text-container {


    width: 30dvw;


    container-type: inline-size;


    }


    .text-container .text {


    font-size: 19cqw;


    }
    ίϯςφͱfont-sizeͷࢦఆ



    古都めぐり



    )5.- $44

    View full-size slide

  48. .text-container {


    width: 30dvw;


    container-type: inline-size;


    }


    .text-container .text {


    font-size: 19cqw;


    }
    ίϯςφͱfont-sizeͷࢦఆ



    古都めぐり



    )5.- $44
    DRXʹͨ͠৔߹ɺίϯςφαΠζʹΑͬͯ͸

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

    View full-size slide

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

    View full-size slide

  50. ରԠϒϥ΢β
    04

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. ίϯςφΫΤϦؔ࿈$44
    container-type: inline-size;


    @container


    cqw, cqh

    View full-size slide

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

    View full-size slide

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

    View full-size slide