HTML におけるテキストサイズの自動調整

CSS の container-type プロパティを使用することで、HTML 内のテキストサイズを簡単に自動調整することができます。以下は具体的な実装方法です。

HTML の例

<div class="auth-fit">
	<p>this is content</p>
</div>

基本的な CSS 実装

div.auth-fit {
	width: 500px;
	height: 300px;
	padding: 10px;
	background-color: #f0f0f0;
	resize: both;
	overflow: auto;
	container-type: size;
}

div.auth-fit p {
	font-size: 10cqw;
}

上記のコードでは、コンテナに container-type: size; プロパティを追加することで、コンテナのサイズに応じて子要素のスタイルを動的に調整できます。10cqw はコンテナの幅の 10% を意味し、コンテナのサイズが変化してもフォントサイズがそれに応じて調整されます。

フォントサイズの範囲を制限

フォントサイズが大きすぎたり小さすぎたりするのを防ぐために、clamp 関数を使用して font-size に最大値と最小値を設定できます。

div.auth-fit p {
	font-size: clamp(10px, 10cqw, 20px);
}

このコードでは、フォントサイズはコンテナの幅の 10% に基づきますが、最小で 10px、最大で 20px に制限されます。

---

container-name を使用した柔軟なコントロール

container-name プロパティを使用することで、コンテナに名前を付け、条件に応じたスタイルを柔軟に調整できます。

コード例

div.auth-fit {
	width: 300px;
	height: 300px;
	padding: 10px;
	background-color: #f0f0f0;
	resize: both;
	overflow: auto;
	container-name: auth-fit-container; /* コンテナに名前を付ける */
	container-type: size;
}

div.auth-fit p {
	font-size: 1rem; /* デフォルトのフォントサイズ */
}

@container auth-fit-container (width > 500px) {
	div.auth-fit p {
		font-size: 1.2rem; /* コンテナの幅が 500px を超える場合のフォントサイズ */
	}
}

@container auth-fit-container (width < 200px) {
	div.auth-fit p {
		font-size: 0.8rem; /* コンテナの幅が 200px 未満の場合のフォントサイズ */
	}
}

コードの説明

1. コンテナの命名：container-name プロパティを使用してコンテナに auth-fit-container という名前を付け、スタイルルール内で参照可能にします。
2. 条件付きスタイル：@container ルールを使用して、コンテナの幅に応じて異なるフォントサイズを設定します。

まとめ

container-type と container-name プロパティを組み合わせることで、HTML 内で柔軟なテキストサイズの自動調整を実現し、さまざまなレスポンシブデザインのニーズに対応できます。この方法は簡単かつ効率的で、モダンな Web 開発に非常に適しています。