以前、コンテナクエリの基本的な理解では、メディアクエリと似ていると感じました。
@container (min-width: 200px) {
.card {
font-size: 1rem;
}
}
@container (min-width: 400px) {
.card {
font-size: 1.2rem;
}
}
@container (min-width: 800px) {
.card {
font-size: 2rem;
}
}
詳しく調べてみると、コンテナクエリには vw や vh のような単位もあります。
コンテナクエリには、以下の 6 つの単位があります。
- cqi：コンテナの行方向の 1%
- cqw：コンテナの幅の 1%
- cqb：コンテナのブロック方向の 1%
- cqh：コンテナの高さの 1%
- cqmin：
cqiとcqbのうち小さい方の値 - cqmax：
cqiとcqbのうち大きい方の値
cq はコンテナクエリを意味します。
おお、これはすごいですね。親要素のサイズを知ることは、多くのアニメーションにとって非常に便利で、要素の変換距離をより簡単に制御できます。
@keyframes slidein {
from {
transform: translateX(100cqw);
}
to {
transform: translateX(0);
}
}
vw と同様に、これらの単位もコードを簡素化し、レスポンシブなコードをより簡単に作成することができます。
.card {
font-size: clamp(1rem, 3cqw , 2rem);
}
私たちは cqw を使用して複数のメディアクエリの記述を簡略化し、clamp 関数を使用してテキストのサイズの上下限を指定することができます。これは、異なる解像度に対する最適化に非常に効果的です。
もっと詳しく#
幅をクエリする場合
/* コンテナを定義する */
.container {
container-type: size;
}
/* コンテナクエリを使用し、コンテナの幅が300px以上の場合にスタイルを適用する */
@container (min-width: 300px) {
.element {
/* スタイル */
}
}
アスペクト比をクエリする場合
/* コンテナを定義する */
.container {
container-type: aspect-ratio;
aspect-ratio: 16 / 9; /* アスペクト比を16:9に設定する */
}
/* コンテナクエリを使用し、コンテナのアスペクト比が16:9以上の場合にスタイルを適用する */
@container (aspect-ratio >= 16 / 9) {
.element {
/* スタイル */
}
}
方向をクエリする場合
/* コンテナを定義する */
.container {
container-type: inline-size;
}
/* コンテナクエリを使用し、コンテナの方向が横向きの場合にスタイルを適用する */
@container (orientation: landscape) {
.element {
/* スタイル */
}
}
コンテナ名を指定する場合
/* コンテナを定義し、名前を指定する */
.container {
container-type: size;
container-name: myContainer;
}
/* コンテナ名を使用してクエリを行う */
@container myContainer (min-width: 600px) {
.element {
/* スタイル */
}
}