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

はじめに

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

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

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

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

対象読者

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

@containerとは

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

たとえば、以下のような場面です。

• 狭いスペースでは、コンテンツを縦並びにして収めたい
• 広いスペースがあるときは、画像と文字を横に並べたい

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

基本的な使い方

基本構文

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

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

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

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

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

コード全文

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

.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-typeを指定した要素）のサイズに合わせて切り替えます。
しかし、container-nameというプロパティを使えば、どのコンテナを基準にしているかコード上で明確になり、可読性が向上します。

以下の例では、親要素.layoutにcontainer-nameを指定し、その中にある.sidebarと.main-contentの見た目を、.layoutのサイズに応じて切り替えています。

<div class="layout">
  <div class="layout-inner">
    <aside class="sidebar">
      <h2>サイドバー</h2>
      <p>メニューや広告など</p>
    </aside>
    <main class="main-content">
      <h2>メインコンテンツ</h2>
      <p>記事の本文など</p>
    </main>
  </div>
</div>

/* 親要素を名前付きコンテナとして定義 */
.layout {
  container-name: layout;
  container-type: inline-size;
}
 
/* 通常の見た目（狭いとき：縦並び） */
.sidebar {
  background: #e0e0e0;
  padding: 16px;
  margin-bottom: 16px;
}
 
.main-content {
  background: #f5f5f5;
  padding: 16px;
}
 
/* layoutコンテナが広くなったときの見た目（横並び） */
@container layout (min-width: 600px) {
  .layout-inner {
    display: flex;
    gap: 16px;
  }
 
  .sidebar {
    width: 200px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
 
  .main-content {
    flex: 1;
  }
}

解説

.layoutにcontainer-name: layout;を指定することで、この要素のサイズをlayoutという名前で参照できるようになります。
@container layout ...と書くことで、.layout-innerや.sidebar、.main-contentといった子孫要素の見た目を、.layoutコンテナのサイズに応じてまとめて切り替えられます。

なお、Container Queriesはコンテナの子孫要素にのみ適用されるため、.layout自身にはスタイルを適用できません。そのため、.layout-innerというラッパー要素を設けて、そこにFlexboxのスタイルを適用しています。

このようにcontainer-nameを使えば、どのコンテナを基準にするかを明示的に指定できるため、複雑なレイアウトでも柔軟に対応できます。

終わりに

今回は要素のサイズに応じて見た目を切り替える方法である@containerについて解説しました。
これまでのように画面の幅に頼らず、特定の要素の大きさに合わせて文字サイズやレイアウトを変えられるため、より細かく、思い通りにデザインを調整できます。
ぜひこの記事を参考に使ってみてください。