コンテナクエリのCSSの基本的な使い方

最近､HTMLとCSSについて学習しています｡大概は知っていますが､今日はコンテナクエリのCSSにいついて書いてみたいと思います｡

完成

完成は以下になります｡画面を小さくしたり､大きくすると､色が変わります｡是非､お試しあれ｡

基本的な書き方

基本的な書き方｡まずは､HTMLを紹介します｡かなり簡単に書いております｡

HTML

<div class="box">
<ul>
<li>テスト</li>
<li>テスト</li>
<li>テスト</li>
</ul>
</div>

難しくない､HTMLです｡boxでulを囲んでいます｡ここではulにしていますが､これは任意です｡この場では､ulを使っています｡

CSS

CSSは以下になります｡

.box {
  container-type: inline-size;
}
.box ul {
  display: flex;
  gap: 20px;
}
.box ul li {
  background: aqua;
  width: 300px;
  height: 200px;
}

@container (min-width:480px) {
  .box ul li {
    background: red;
  }
}

親要素(box)にcontainer-type: inline-size;を書きます｡これを書かないとダメです｡あとは､ulに対して､flexを書きます｡ulの中のliに効かす､CSSです｡liに水色の色を指定しています｡この部分が赤色になります｡

あとは､条件分岐で､@container (min-width:480px)を書きます｡ここでは､480pxから､赤色に変化します｡この辺りは､メディアクエリと大差ありません｡

理屈が分かれば簡単ですが､経験上､min-widthは400px以上にしないと､色が変わりませんでした｡480pxだと､変化します｡400pxでも可能でしたが､僕は480pxにしました｡理由は何となくです(笑)｡

でも､これで行こうと思います｡

メディアクエリと比較して

まだ､使いはじめたばかり｡このサイトをコンテナクエリで組み直すか考え中｡大規模工事が必要なので､考え中です｡テストサイトを作って､色々いじってみたり｡考え中です｡

本番のファイルでするのは､中々､リスクが高い｡今度､試してみます｡

さいごにSCSSも一応､紹介しておきます｡

SCSS

.box{
container-type: inline-size;

ul{
display: flex;
gap: 20px;

li{
background: aqua;
width: 300px;
height: 200px;
}
}
}

@container(min-width:480px){

.box{
ul{
li{
background: red;
}
}
}
}

さいごに

メディアクエリで十分か｡ネットでメリットを読みましたが､今ひとつ､魅力を感じませんでした｡新しもの好きなので､今回､解説してみました｡

新しいと言っても､前から存在しています｡最近､知りました｡僕にとっては､新しいことです｡

今後､コンテナクエリをガッツリと作りたいと思います｡