css-container-queries
✓コンポーネントベースのレスポンシブデザインに CSS コンテナクエリを適用します。ビューポート サイズではなくコンテナ サイズに適応する応答性の高いコンポーネントを実装する場合に使用します。
SKILL.md
A guide for implementing container-based responsive design using CSS container queries and Tailwind CSS.
Container queries enable styling elements based on their container's size rather than the viewport size. Unlike media queries that respond to the browser window, container queries make components self-contained and truly reusable.
| Responds to | Viewport size | Container size | | Reusability | Layout-dependent | Fully portable | | Use case | Page layouts | Component styling | | Syntax | @media | @container |
コンポーネントベースのレスポンシブデザインに CSS コンテナクエリを適用します。ビューポート サイズではなくコンテナ サイズに適応する応答性の高いコンポーネントを実装する場合に使用します。 ソース: flpbalada/my-opencode-config。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
css-container-queries とは？
コンポーネントベースのレスポンシブデザインに CSS コンテナクエリを適用します。ビューポート サイズではなくコンテナ サイズに適応する応答性の高いコンポーネントを実装する場合に使用します。 ソース: flpbalada/my-opencode-config。
css-container-queries のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/flpbalada/my-opencode-config
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01