要素のサイズでUIを切り替える！@containerでレスポンシブ対応

はじめに
- 対象読者
@containerとは
基本的な使い方
- 基本構文
- コード全文
少し応用的な使い方
- 解説
終わりに

はじめに

こんにちは。株式会社TOKOSのタクヤです。

いきなりですが、「CSSで画面サイズに合わせてデザインを変えたいのに、うまくいかない…」そんな風に思ったことはありませんか？

CSSでは画面の幅に合わせてデザインを変える方法が一般的かと思いますが、最近では要素の大きさに応じて見た目を変えられる、新しい書き方が登場しています。

この記事では、その新しい方法@containerについて、はじめての方でも分かるように使い方をやさしく解説します。

対象読者

CSSを学び始めた方
メディアクエリでのレスポンシブに限界を感じている方

@containerとは

@container は、ある要素のサイズに合わせて見た目を変えられるCSSの仕組みです。
これまでのCSSでは、画面の幅に合わせて文字の大きさや配置などを切り替えるのが一般的でした。でも実際のWebサイトでは、画面全体ではなくある特定の要素のサイズに合わせて見た目を調整したい場面も多くあります。

たとえば

狭いスペースでは、文字を大きくして読みやすくしたい
広いスペースがあるときは、画像と文字を横に並べたい

こういったときに便利なのが @container です。
その要素のサイズに合わせてCSSのスタイルを切り替えられるので、見た目の調整がもっと自由に、細かくできるようになります。

基本的な使い方

基本構文

@containerを使うには、まず見た目を切り替える基準となる要素を設定する必要があります。

style.css

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

この指定によって、.container のサイズを基準に見た目を切り替えることができるようになります。

style.css

@container (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

このように記述すると、.container のサイズが600px以上のとき、.text の文字サイズが大きくなります。

コード全文

index.html

<div class="container">
  <p class="text">この文字はコンテナのサイズによって大きさが変わります。</p>
</div>

style.css

.container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  padding: 24px;
  background: #f5f5f5;
  margin: 0 auto;
}

.text {
  font-size: 16px;
  color: #333;
}

/* .container のサイズが600px以上になったらフォントサイズを大きくする */
@container (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

少し応用的な使い方

通常の @container は、その中にある要素の見た目を、すぐ外側の要素のサイズに合わせて切り替えます。
ですが container-name というプロパティを使えば、離れた場所にある要素のサイズに応じて別の要素の見た目を変えることもできます。

index.html

<div class="container">
  <h2 class="title">お知らせ</h2>
</div>
<p class="note">この注意書きの文字サイズは「お知らせ」セクションのサイズによって変わります。</p>

style.css

/* 名前付きコンテナの定義 */
.container {
  container-name: main;
  container-type: inline-size;
}

/* 通常の見た目 */
.note {
  font-size: 14px;
  color: #555;
}

/* mainという名前のコンテナが広くなったときの見た目 */
@container main (min-width: 600px) {
  .note {
    font-size: 18px;
  }
}

解説

.container に container-name: main; をつけることで、この要素のサイズを main という名前で参照できるようになります。
.note は .container の子要素ではありませんが、@container main ... と書くことで、mainという名前の要素のサイズに応じて見た目を切り替えられます。