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

by tonkotsuboy_com

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣛ໺૖!UPOLPUTVCPZ@DPN

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࣥචɿ೔ܦιϑτ΢ΣΞ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ͨ͘͞Μͷ @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 ະຬͷͱ͖ ϝΠϯΤϦΞɿ ςΩετදࣔ Լ෦ΤϦΞɿΞΠίϯɾ਺஋ͷΈ ʜ

Slide 16

Slide 16 text

ߋʹ஫จ͕௥Ճ͞ΕΔ w φϏήʔγϣϯόʔͷ෯Λม͑ͨͷͰɺ   ϝΠϯΤϦΞͷ෯΋มΘΓ·ͨ͠ w φϏήʔγϣϯ͸։ดػೳΛ΋ͨͤͨͷͰɺ   ։͍ͨͱ͖͚ͩ෯͕มΘΓ·͢ w ˓˓QYͷͱ͖͚ͩϨΠΞ΢τ͕͓͔͍͠Ͱ͢

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ίϯςφΫΤϦ 02

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

೚ҙͷཁૉͷαΠζΛج४ʹͰ͖Δ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

返信ボタン返信する 60

いいねボタンいいね 120

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ᶄํ޲Λࢦఆ͢Δ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ᶅΫΤϦΛॻ͘

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

560pxҎԼͷͱ͖͚ͩ.textΛফ͢ .reaction-bar { container-type: inline-size; } @container (max-width: 560px) { .reaction-bar .text { display: none; } }

返信ボタン返信する 60

いいねボタンいいね 120

)5.- $44

Slide 37

Slide 37 text

σϞ IUUQTDEQOJPQFOEFCVH1P#..;X

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

ίϯςφʹର͢Δׂ߹αΠζ 03

Slide 42

Slide 42 text

DRX DRI

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

׆༻ྫ

Slide 46

Slide 46 text

ίϯςφ෯ʹରͯ͠5จࣈʹ͍ͨ͠

Slide 47

Slide 47 text

ίϯςφ෯ʹରͯ͠5จࣈʹ͍ͨ͠ ίϯςφ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

.text-container { width: 30dvw; container-type: inline-size; } .text-container .text { font-size: 19cqw; } ίϯςφͱfont-sizeͷࢦఆ

古都めぐり

)5.- $44

Slide 50

Slide 50 text

.text-container { width: 30dvw; container-type: inline-size; } .text-container .text { font-size: 19cqw; } ίϯςφͱfont-sizeͷࢦఆ

古都めぐり

)5.- $44 DRXʹͨ͠৔߹ɺίϯςφαΠζʹΑͬͯ͸   'JSFGPY΍4BGBSJͰ៉ྷʹ෼ׂͰ͖ͳ͍ͷͰɺগ͠খ͞Ίʹ͓ͯ͘͠

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

ରԠϒϥ΢β 04

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

·ͱΊ

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

هࣄͰ΋ৄ͘͠ղઆ͍ͯ͠·͢ IUUQT[FOOEFWNPOFZGPSXBSEBSUJDMFTDTTDPOUBJOFSRVFSZ

Slide 60

Slide 60 text

Thank y ! @tonkotsuboy_com @matsu_eri 5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢