CSS ・ レスポンシブ
@container
コンテナの幅に応じた切り替え
画面全体ではなく、親要素（コンテナ）の幅に応じてスタイルを切り替える仕組みです。置き場所によって形を変える部品をつくれます。
01
サンプルコード
HTML
1<div class="wrap narrow">
2 <div class="card"><div class="thumb"></div><p>幅の狭い場所のカード</p></div>
3</div>
4<div class="wrap wide">
5 <div class="card"><div class="thumb"></div><p>幅の広い場所のカード</p></div>
6</div>
CSS
1.wrap {
2 container-type: inline-size;
3 margin-bottom: 12px;
4}
5.narrow {
6 width: 200px;
7}
8.wide {
9 width: 440px;
10}
11.card {
12 display: grid;
13 gap: 8px;
14 padding: 8px;
15 border: 1px solid #ccc;
16}
17.thumb {
18 height: 50px;
19 background: #e1ad66;
20}
21.card p {
22 margin: 0;
23}
24@container (min-width: 320px) {
25 .card {
26 grid-template-columns: 120px 1fr;
27 }
28}
02
実行結果
ブラウザでの表示
03
解説
@container は、画面の幅ではなく「コンテナ」として指定した祖先要素の幅を条件にして、スタイルを切り替える仕組みです。
使うには、まず親要素に container-type: inline-size を指定します。上の例では、同じカードが狭い枠の中では縦並び、広い枠の中では横並びになっています。
サイドバーにもメイン部分にも置く部品のように、置き場所によって幅が変わる部品に向いています。
04
応用例・注意点
関連するプロパティ・単位
| 名前 | 説明 |
|---|---|
container-type: inline-size | 横幅を条件に使えるコンテナにする |
container-name | コンテナに名前を付ける |
@container 名前 (条件) | 名前付きのコンテナを条件にする |
cqi | コンテナの横幅に対する割合の単位 |
名前を付けて対象を限定する
コンテナが入れ子になっているときは、名前で対象を指定します。
CSS
1.sidebar {
2 container: side / inline-size;
3}
4@container side (max-width: 240px) {
5 .card {
6 font-size: 14px;
7 }
8}
注意点
- 01container-type を指定した要素自身のスタイルは、@container の条件で変えられません。条件に使えるのは祖先のコンテナです。
- 02inline-size を指定したコンテナは、中身の幅に合わせて広がらなくなります。