# テーマでコンテナクエリ？
**URL:** https://meta.discourse.org/t/container-queries-in-themes/299366
**Category:** Development
**Created:** [2024 年 3 月 14 日午後 4:48 UTC](https://meta.discourse.org/t/container-queries-in-themes/299366 "2024-03-14T16:48:25Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2024 年 3 月 14 日午後 4:48 UTC](https://meta.discourse.org/t/container-queries-in-themes/299366/1 "2024-03-14T16:48:25Z")
プラグインやネイティブのDiscourseではこれらを見かけましたが、テーマでは見かけませんでした（例はありますか？）。テーマでは、`.scss`で`@container`はサポートされていますか？
これは通過するようです。例：
```plaintext
.side-by-side {
container-type: inline-size;
container-name: side-by-side;
}
```
👍
しかし、`@container`はそうではありません。コンテナクエリの条件を満たしているにもかかわらず、囲まれたCSSは消えてしまうようです。
```plaintext
@container side-by-side (min-width: 500px) {
.side-by-side {
tbody {
```
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2024 年 3 月 15 日午後 10:47 UTC](https://meta.discourse.org/t/container-queries-in-themes/299366/2 "2024-03-15T22:47:12Z")
コンテナクエリがテーマで機能することを確認するために簡単なテストを行いました。ただし、メディアクエリよりも理解するのがはるかに難しい点に注意してください。チームの数人が当初これを混乱していました。
これらは単なるコンテナのメディアクエリではなく、独自の要件セットがあります。最大の課題は次のとおりです。
> サイズの包含は、要素がコンテンツからサイズ情報を取得する能力を無効にします。これは、無限ループを回避するためにコンテナクエリにとって重要です。
[container-type - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/container-type) より
したがって、動的な幅を持つコンテナでコンテナクエリを使用することはできません。コンテナに固定幅を設定する必要があります。残念ながら、これにより、期待できることの範囲が大幅に制限されます。
> **機能することを示す、非常に奇妙な概念実証を次に示します**
>
> ```scss
> @media screen and (min-width: 500px) {
> .fk-d-button-tooltip {
> width: 300px;
> background: green;
> container-type: inline-size;
> }
> }
>
> @media screen and (min-width: 1000px) {
> .fk-d-button-tooltip {
> width: 500px;
> background: yellow;
> container-type: inline-size;
> }
> }
>
> @container (min-width: 400px) {
> #create-topic {
> background: blue !important;
> }
> }
>
> ```
>
> 400px未満のコンテナ：
>
> 
>
> 400pxを超えるコンテナ：
>
> 
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2024 年 3 月 16 日午前 12:09 UTC](https://meta.discourse.org/t/container-queries-in-themes/299366/3 "2024-03-16T00:09:31Z")
確認いただきありがとうございます。
> [@awesomerobot](#):
>
> コンテナの幅が動的なコンテナでは、コンテナクエリを使用できないということですね。
ああ！
> [@awesomerobot](#):
>
> 残念ながら、これにより期待できることが大幅に制限されます。
まったくですね！ 😢
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2024 年 3 月 16 日午前 10:58 UTC](https://meta.discourse.org/t/container-queries-in-themes/299366/4 "2024-03-16T10:58:12Z")
問題の原因を特定できたと思います。コンテナはテーブルにできず、divにする必要があるようです。
テーブルと、それ以外はほとんど同じであるdivの2つの同一のコンテナを作成したペンを作成しました。
コンテナクエリはテーブルでは失敗しますが、それ以外はほとんど同じであるdivでは成功します。
ここでの最終的な解決策は、コンテナを`div`である`#list-area`に移動したことです。これにより問題が解決しました！
これを見ていただき、本当に感謝しています。テーマでも（機能する範囲で）動作することを確認できたことで、非常に重要な後押しを得られました！
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2024 年 4 月 15 日午前 10:58 UTC](https://meta.discourse.org/t/container-queries-in-themes/299366/5 "2024-04-15T10:58:58Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.