CSSのoverflowプロパティの値一覧と使い方

CSSのoverflowプロパティとは

CSSにはoverflowというプロパティがあります。これは、ボックスの内容がボックス自体のサイズよりも大きくなった場合に、ブラウザがどのように表示すべきかを指定するためのものです。

例えば、固定サイズのコンテナ内に長いテキストや大きな画像を配置したとき、はみ出した部分をそのまま表示するのか、隠すのか、スクロールできるようにするのかを制御できます。

overflowプロパティには、主に以下の4つの値を指定できます。

値	説明
`visible`	初期値です。内容が親要素（包含ブロック）の境界線からはみ出していても、そのまま表示されます。
`hidden`	はみ出した内容は、親要素の境界で切り取られます。スクロールバーは表示されません。
`scroll`	親要素のサイズは変わりませんが、内容がはみ出していなくても常にスクロールバーが表示され、ユーザーがスクロールして内容を確認できるようになります。
`auto`	scrollと目的は同じですが、内容が実際にはみ出した場合にのみスクロールバーが表示されます。多くの場面で推奨される値です。

また、縦方向・横方向それぞれ個別に指定したい場合は、overflow-xやoverflow-yを使用することもできます。

CSSのoverflow: scrollプロパティとは？使い方とサンプルコードを解説
CSSのoverflowプロパティに値scrollを指定すると、要素からはみ出したコンテンツはクリップ（切り取られ）され、スクロールバーが表示されます。これにより、ユーザーはスクロール操作で隠れた部分も含めて、すべてのコンテンツを読むことができるようになります。なお、overflow: scrollは縦横両方向にスクロールバーが表示される点が特徴です。コンテンツがはみ出していない場合でもスクロールバーが表示されるため、必要なときだけスクロールバーを出したい場合はoverflow: autoを使うのが一般的です。サンプルコード以下のコードを実行すると、CSSのoverflow: scrollプロ
CSSのoverflow:hiddenとは？使い方と実装例をわかりやすく解説
CSSのoverflowプロパティにhidden（非表示）を指定すると、要素のボックスからはみ出したコンテンツが切り取られ、表示されなくなります。スクロールバーも表示されないため、あふれた部分を完全に隠したい場合に便利です。以下のコードを実行して、overflow: hiddenの動作を確認してみましょう。サンプルコード <!DOCTYPE html> <html> <head> <style> div {