【CSS Modules】overflow省略形プロパティの使い方

overflowプロパティは、要素のコンテンツがそのボックスの表示領域からはみ出した際に、そのコンテンツをどのように処理するかを制御するプロパティです。これは、CSSにおけるoverflow-xとoverflow-yという、それぞれ水平方向と垂直方向のはみ出し処理を個別に設定するプロパティのショートハンド（一括指定）です。このプロパティを使用することで、スクロールバーの表示や、はみ出したコンテンツの非表示などを一度に設定できます。

設定できる主な値には、visible、hidden、scroll、auto、clipがあります。visibleは、はみ出したコンテンツをそのままボックスの外に表示させ、レイアウトには影響を与えません。hiddenは、はみ出したコンテンツを完全に隠し、ユーザーはそれを見ることはできません。scrollは、コンテンツがボックスからはみ出すかどうかにかかわらず、常にスクロールバーを表示し、ユーザーがコンテンツをスクロールできるようにします。autoは、コンテンツがはみ出す場合にのみスクロールバーを表示し、それ以外の場合は表示しません。clipは、hiddenと同様にはみ出したコンテンツを切り取りますが、ユーザーがスクロールすることはできません。

このプロパティは、例えば、カード型のデザインにおいてコンテンツが長くなった場合でもカードのサイズを一定に保ちたいときや、特定の領域に収まるように画像を配置したいときなど、様々な場面でWebページのレイアウトを管理するために非常に重要です。適切なoverflowプロパティの値を設定することで、ユーザーエクスペリエンスを向上させ、意図しないレイアウトの崩れを防ぐことができます。

Copy
1selector {
2  overflow: visible | hidden | scroll | auto | clip;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません