Yugien - 遊戯苑
テーマ

CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

container-type is a property that designates an element as a container so that its size can be used to change the design of its contents.

container-type

一言で言うと

container-typeは、「この要素をコンテナクエリ（中身ではなく自分のサイズでデザインを変える仕組み）の基準にするかどうか」を決めるCSSプロパティです。

もっとわかりやすく

普段、画面の大きさに合わせてデザインを変えるには @media を使いますよね。でも「画面」じゃなくて、「特定の要素のサイズ」に合わせて中の見た目を変えたくなることがあります。

たとえば：

このとき、対象の要素に container-type を指定すると、その要素の幅や高さを基準にして、中身のスタイルを変えることができるのです。

使い方の基本

CSS

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

これで、.sidebar 要素の「横幅」が変化したときに、それに応じたスタイルの変更が可能になります。

よく使う値

none（デフォルト）
コンテナにならない
inline-size
横幅を基準にする
size
横幅＋高さの両方を基準にする（対応ブラウザに注意）

補足

このプロパティは @container という新しいルールと一緒に使うことが前提です。

CSS

@container (min-width: 400px) {
	.content {
		font-size: 1.5rem;
	}
}

上記のように書くことで、「親の幅が400px以上のときだけ、中の.contentの文字を大きくする」などが可能になります。

まとめ