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. ͨ͘͞Μͷ @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 ະຬͷͱ͖ ϝΠϯΤϦΞɿ ςΩετදࣔ Լ෦ΤϦΞɿΞΠίϯɾ਺஋ͷΈ ʜ
  2. ࠓճ͸ .reaction-barཁૉΛ ίϯςφʹ͠·͢ ᶃ ج४ͱͳΔίϯςφͷܾఆ <div class="reaction-bar"> <div class="reaction"> <button>返信ボタン</button>

    <span class="text">返信する</span> <span class="count">60</span> </div> <div class="reaction"> <button>いいねボタン</button> <span class="text">いいね</span> <span class="count">120</span> </div> <!-- 略 --> </div>
  3. 560pxҎԼͷͱ͖͚ͩ.textΛফ͢ .reaction-bar { container-type: inline-size; } @container (max-width: 560px) {

    .reaction-bar .text { display: none; } } <div class="reaction-bar"> <div class="reaction"> <button>返信ボタン</button> <span class="text">返信する</span> <span class="count">60</span> </div> <div class="reaction"> <button>いいねボタン</button> <span class="text">いいね</span> <span class="count">120</span> </div> <!-- 略 --> </div> )5.- $44
  4. .text-container { width: 30dvw; container-type: inline-size; } .text-container .text {

    font-size: 19cqw; } ίϯςφͱfont-sizeͷࢦఆ <div class="text-container"> <p class="text">古都めぐり</p> </div> )5.- $44
  5. .text-container { width: 30dvw; container-type: inline-size; } .text-container .text {

    font-size: 19cqw; } ίϯςφͱfont-sizeͷࢦఆ <div class="text-container"> <p class="text">古都めぐり</p> </div> )5.- $44 DRXʹͨ͠৔߹ɺίϯςφαΠζʹΑͬͯ͸ 
 'JSFGPY΍4BGBSJͰ៉ྷʹ෼ׂͰ͖ͳ͍ͷͰɺগ͠খ͞Ίʹ͓ͯ͘͠