こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
「スマホではいい感じなのに、
別のページに置いたらレイアウト崩れた…」
こんな経験、ありませんか？
- 同じコンポーネントなのに表示が違う
- レイアウトがページごとに微妙にズレる
- メディアクエリが増えすぎてカオス
これ、かなり多くの現場で起きています。
原因はシンプルです。
“画面幅だけ”でデザインを判断しているからです。
これまでのレスポンシブは、
画面が768px以上ならこう
1024px以上ならこう
という「画面基準」でした。
でも実際のUIはどうでしょう？
同じカードでも、
- サイドバーの中
- メインコンテンツの中
- モーダルの中
で、置かれる場所が変わります。
なのに、画面幅だけで判断するのは無理があります。
そこで登場したのが、
@containerです。
これを使うと、
コンポーネントが“自分のサイズ”を見て動くようになります。
つまり、
「この場所ではこう見せる」
を自分で判断できるようになるんです。
この記事では、
この革命的な仕組みを
小学生でもわかるレベルで、
かつ実務で使える形で解説します。
読み終わる頃には、
メディアクエリ中心の設計から卒業できます。
結論：画面ではなく「親要素」で判断する
新しい考え方
メディアクエリ → 画面サイズを見る @container → 親要素のサイズを見る
これがすべてです。
コード例
@container (width > 400px) {
.card {
display: flex;
}
} この意味はこうです。
「このカードが置かれている親の幅が400px以上なら横並びにする」
画面サイズは一切見ていません。
なぜメディアクエリでは限界があるのか
問題①：再利用できない
- ページごとに調整が必要
- 使い回すと崩れる
問題②：コードが増える
- ブレイクポイントが増える
- 管理が難しくなる
問題③：実際のUIに合っていない
現実
同じ画面でも配置はバラバラ
画面基準では限界があります。
@containerのすごさ
コンポーネントが自分で判断する
従来
外から指定される
これから
自分で判断する
これが一番の革命ポイントです。
メリット
- どこに置いても崩れない
- 再利用性が高い
- 設計がシンプルになる
実務での使い方
親要素にcontainer指定
.wrapper {
container-type: inline-size;
} 条件を書く
@container (width > 500px) {
.card {
display: flex;
gap: 16px; }
} これだけで自律型コンポーネントが完成します。
デザインシステムとの相性が最強な理由
- コンポーネント単位で完結
- 使い回しが前提になる
- 破綻しない設計になる
重要
「どこで使うか」を考えなくていい
設計思想そのものが変わります。
よくある注意点
- container指定を忘れる
- 対応ブラウザを確認する
- メディアクエリと併用する
ポイント
完全に置き換えではなく「使い分け」
まとめ
- メディアクエリは画面基準
- @containerは親要素基準
- 再利用性が大幅アップ
これからは「コンポーネントが自分で判断する時代」です。
レスポンシブ設計は、
次のステージに進みました。
まずは1つのコンポーネントから試してみてください。
satokotadesignキャンペーン実施中！
