こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。 今回のテーマはContainer Queriesです。 Container Queriesは、祖先要素として存在するコンテナのスタイルに応じてCSSを適用するための機能です。利用時は@containerで宣言します。 従来でも ...

コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍する新機能です。 そんなコンテナ ...

Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。 このCSSの新機能コンテナクエリによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の ...

従来のメディアクエリ（@media）は、ビューポートのサイズに基づいてスタイルを適用していましたが、コンテナクエリ（@container）は、特定の要素（コンテナ）のサイズやスタイルに基づいてスタイルを適用することができます。これにより、コンポーネント ...

</div> </div> --- # コンテナクエリーの使用例 プロフィールのカード <div style="display: flex; justify-content: space-between"> <img src="/profile ...

programming#css#container-queries#html-tutorial#how-to-resize-images-easily#how-to-make-an-ad#hackernoon-top-story#how-to-set-up-a-container#resizing-images-guide ...

メディアクエリーのようにビューポートではなく、コンテナの幅に応じてレイアウトを柔軟に調整するテクニックを紹介。calc関数を上手に活用した、マニアックなCSSトリックたちです。 はじめに、タイトルとは裏腹にこの記事は、メディアクエリ不要論を ...

要素は、[コンテナーサイズの問い合わせ](/ja/docs/Web/CSS/CSS_containment/Container_queries)のためのクエリーコンテナーとして、 **` ...