div要素ベースのメディアクエリ
2024-10-03
CSSにおけるメディアクエリとコンテナクエリ
はい、CSSでは、メディアクエリをdiv要素に基づいてサイズ変更することが可能です。これは、コンテナクエリと呼ばれる機能を使用します。コンテナクエリは、メディアクエリと似た構文を持ちますが、画面の幅ではなく、特定の要素の幅に基づいてスタイルを適用します。
例
.container {
width: 800px;
}
@container (min-width: 600px) {
.container {
width: 1000px;
}
}
この例では、.containerクラスの要素が、幅が600ピクセルを超える場合に、幅が1000ピクセルに拡大されます。これは、画面の幅ではなく、.container要素の幅に基づいて決定されます。
注意
- コンテナクエリを使用する場合には、ブラウザのサポート状況を確認する必要があります。
- コンテナクエリは、CSSレベル3で提案された機能であり、すべてのブラウザでサポートされているわけではありません。
div要素ベースのメディアクエリの実例
以下は、div要素の幅に基づいてメディアクエリを適用するCSSコードの例です。
.container {
width: 800px;
}
@container (min-width: 600px) {
.container {
width: 1000px;
}
}
解説
.containerクラスの要素は、デフォルトで幅が800ピクセルに設定されています。@containerルールを使用することで、.container要素の幅に基づいてメディアクエリを定義しています。(min-width: 600px)の部分は、.container要素の幅が600ピクセル以上の場合に、その中のスタイルが適用されることを指定しています。- 600ピクセル以上の場合は、
.container要素の幅が1000ピクセルに拡大されます。
JavaScriptによる動的なスタイル変更
JavaScriptを使用して、要素の幅を検知し、それに応じてスタイルを変更することができます。
const container = document.querySelector('.container');
function updateContainerWidth() {
if (container.offsetWidth >= 600) {
container.style.width = '1000px';
} else {
container.style.width = '800px';
}
}
window.addEventListener('resize', updateContainerWidth);
updateContainerWidth();
このコードでは、.container要素の幅を検知し、600ピクセル以上であれば幅を1000ピクセルに、それ以下であれば800ピクセルに設定しています。
CSSのメディアクエリとJavaScriptの組み合わせ
CSSのメディアクエリとJavaScriptを組み合わせて、より複雑な条件に基づいてスタイルを変更することもできます。
@media (min-width: 600px) {
.container {
width: 1000px;
}
}
const container = document.querySelector('.container');
function updateContainerWidth() {
if (container.offsetWidth < 600) {
container.classList.remove('container-large');
} else {
container.classList.add('container-large');
}
}
window.addEventListener('resize', updateContainerWidth);
updateContainerWidth();
このコードでは、CSSのメディアクエリで基本的なスタイルを設定し、JavaScriptで追加の条件に基づいてクラスを追加または削除しています。
CSSのカスタムプロパティ（CSS Variables）
CSSのカスタムプロパティを使用して、要素の幅を動的に設定し、他のスタイルに反映させることができます。
:root {
--container-width: 800px;
}
.container {
width: var(--container-width);
}
@media (min-width: 600px) {
:root {
--container-width: 1000px;
}
}
このコードでは、:root要素のカスタムプロパティ--container-widthを使用して、.container要素の幅を設定しています。メディアクエリを使用して、このプロパティの値を変更することができます。
css media-queries container-queries
