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

はじめに

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

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

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

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

@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-name というプロパティを使えば、離れた場所にある要素のサイズに応じて別の要素の見た目を変えることもできます。

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

/* 名前付きコンテナの定義 */
.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という名前の要素のサイズに応じて見た目を切り替えられます。

終わりに

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

スポンサーリンク