コンテナクエリについて学ぶ

時代はコンテナクエリだと言われていますが､検索上位に表示される記事は似ています｡そこで､できるだけ､オリジナルにしたいと思っています｡以下を2カラム､いわゆる､ブログレイアウトにしたいと思っています｡

下のものが､コンテナクエリで2カラムレイアウトを作りました｡400pxまでは1カラムになります｡

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

HTML

<div class="wrapper">
<div class="content">
<div class="left">

<div class="left__item">
<figure><img src="images/cloud.JPG"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>

<div class="left__item">
<figure><img src="images/tou.JPG"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>

<div class="left__item">
<figure><img src="images/sakura.JPG"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>

</div>

<aside class="side-bar">
<p>サイドバー</p>
<figure><img src="images/yama.jpg"></figure>
</aside>

</div>

</div>

wrapperで全体を囲んでいます｡contentでleftとside-barを囲んでいます｡特に難しいものではありません｡

CSS

.wrapper {
  container-type: inline-size;
}

.content {
  display: flex;
  gap: 10px;
}

.left {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.left__item {
  width: calc(50% - 10px);
}

@container (max-width:400px) {
  .content {
    display: block;
  }
  .left {
    display: block;
  }
  .left__item {
    width: 100%;
  }
}

wrapperにcontainer-type: inline-size;を書き､コンテナクエリを宣言します｡あとは､スタイルを書いていく｡コンテナクエリで､コンテナが400pxまでのスタイルを書きます｡

メディアクエリと大差はありません｡@mediaか､@containerの違いかですが､理念が異なるので注意が必要です｡

ポイントはこれになります｡

HTMLとCSSを知っている人でしたら､コードをご理解頂くことは出来るかと思います｡

ただ､メディアクエリの感覚で書くと､上手くいかないことが多いです｡

flexと同じ場所に書けない？

上のコードで行くと､wrapperがなくても問題ないと思いますが､contentに書くと見事にアウトでした｡少し前のデモサイトでは大丈夫でしたが､今回は無理でした｡そういうものなのか｡

ここは､より深く勉強したいですね｡

flexとcontainerを共存させて大丈夫な場合とそうでない場合あり｡コンテンツのレイアウトで使い分ける必要があるのかな｡引き続き､検証したいと思っています｡

• 浪人のサムライ
  コンテナクエリでデモサイトを作ってみた

さいごに

最近､デモサイトを作っていないので､少し忘れている部分がありました｡模写コーディングをしようかな｡考え中です｡