- Web制作
- 親要素の指定ミスで、コンテナクエリがうまく動かなかった？
親要素の指定ミスで、コンテナクエリがうまく動かなかった？
最近追加されたCSSであるコンテナクエリ。書籍などでも、まだまだ見かけないですし、そんなに使われていないかもしれません。
ただ、そうは言ってもいずれ必要になると思い、練習の一環としてサンプルページを作ってみました。
そしたら、ありがたいことに（？）、プロパティの設定に戸惑った箇所があり、今後のためにも、記録として残しておこうと思います。
※ただ、まだまだコンテナクエリを使いこなせていないため、自分の勘違いという可能性もあります。そこら辺は、ご了承ください。
サンプルページ – 親要素の指定ミスで、コンテナクエリがうまく動かなかった？
コンテナクエリを使って、gridのレイアウトを変更する
今回のサンプルでは、「コンテナクエリを使って、gridのレイアウトを変更する」という動きを実装します。
まず、全体のコンテンツ幅を100%に設定し、ブラウザの端から端まで届くようにします。次に、三カラムの構造にして、左カラムと右カラムの幅を固定します。そして、真ん中のカラムは、幅を可変にし、且つ横幅に応じてカラムのレイアウトを変更するようにします。
そして、真ん中のカラムに表示させる見出しを、コンテナクエリを用いてレイアウト変更を行います。
実際の画像で示すと、こんな感じ。
※今回は、スマホサイトは考慮していません。
gridを設定しているタグにcontainerプロパティを指定しても動かない
まず、動かなかったサンプルのコード（見出し部分のみの抜粋）がこちらです。ブラウザの幅を変えても、見出し部分のレイアウトは変わりませんでした。
<style>
.chapter-text {
container-type: inline-size;
max-width: 800px;
margin: auto;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 8rem 6rem;
margin-bottom: 1rem;
}
.chapter-text figure {
grid-column: 1 / 2;
grid-row: 1 / 2;
object-fit: cover;
overflow: hidden;
}
.chapter-text img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chapter-text h2 {
grid-column: 1 / 2;
grid-row: 2 / 3;
font-size: 2rem;
text-align: center;
align-self: center;
font-family: 'Shippori Mincho', serif;
text-shadow: 0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color);
}
@container (min-width: 500px) {
.chapter-text {
grid-template-columns: 38% 31% 31%;
grid-template-rows: 10rem;
margin-bottom: 2rem;
}
.chapter-text figure {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.chapter-text h2 {
grid-column: 1 / 4;
grid-row: 1 / 2;
text-align: right;
font-size: 3rem;
}
}
@container (min-width: 700px) {
.chapter-text {
grid-template-columns: 38% 31% 31%;
grid-template-rows: 14rem;
}
}
</style>
<div class="chapter-text">
<figure>
<img src="container-query-did-not-work-ly-
due-to-parent-element/chapter-1.jpg" alt="">
</figure>
<h2>一、午后の授業</h2>
</div>
次に、きちんと動作したコードが、こちらになります。どこが違うかというと、gridを設定しているタグに親タグを追加し、containerプロパティを指定しています。
<style>
.chapter-wrap {
container-type: inline-size;
}
.chapter-text {
max-width: 800px;
margin: auto;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 8rem 6rem;
margin-bottom: 1rem;
}
.chapter-text figure {
grid-column: 1 / 2;
grid-row: 1 / 2;
object-fit: cover;
overflow: hidden;
}
.chapter-text img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chapter-text h2 {
grid-column: 1 / 2;
grid-row: 2 / 3;
font-size: 2rem;
text-align: center;
align-self: center;
font-family: 'Shippori Mincho', serif;
text-shadow: 0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color),
0px 0px 10px var(--bg-color);
}
@container (min-width: 500px) {
.chapter-text {
grid-template-columns: 38% 31% 31%;
grid-template-rows: 10rem;
margin-bottom: 2rem;
}
.chapter-text figure {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.chapter-text h2 {
grid-column: 1 / 4;
grid-row: 1 / 2;
text-align: right;
font-size: 3rem;
}
}
@container (min-width: 700px) {
.chapter-text {
grid-template-columns: 38% 31% 31%;
grid-template-rows: 14rem;
}
}
</style>
<div class="chapter-wrap">
<div class="chapter-text">
<figure>
<img src="container-query-did-not-work-ly-
due-to-parent-element/chapter-1.jpg" alt="">
</figure>
<h2>一、午后の授業</h2>
</div>
</div>
二つの違いは、コンテナクエリを設定した親タグがあるかどうか
最初のサンプルでは、gridを設定したタグに@containerも設定していました。逆に、正常に動いたサンプルでは、gridを設定したタグに親要素を追加し、そこに@containerを設定しています。
ここからは自分の予想になるのですが、コンテナクエリは、親のサイズに合わせてレイアウトを変更するCSSです。ただ、gridは子要素の幅となるカラムのレイアウトを、gridが設定されているタグで調整します。そのため、「コンテナクエリを設定している親要素がない」ため、きちんと動作しなかったのではないかと考えています。
あと、ネット上のサンプルは、自分が調べた限りではflexを使っているものばかりで、それも気づけなかった一要素かなとも思います。
コンテナクエリは、シチュエーションが限られるかも
で、コンテナクエリが必要かどうかですが、実際にサンプルを作成してみて、今回のような、特定のカラムが固定されている場合は、便利なときがあると思います。ただ、どのカラムも可変するようなレイアウトの場合、コンテナクエリよりは、flexやgridをしっかり使いこなせる方が重要だと思います。
