【CSS】overflow - 領域から出たコンテンツの振る舞い

CSSのoverflowプロパティをご紹介します。

overflow

overflowは要素の上下左右から出たコンテンツの振る舞いを示すプロパティです。
上下と左右の振る舞いを個別に定義するにはoverflow-y、overflow-xを使用します。

【CSS】overflow-x - 領域から出たコンテンツの振る舞い（左右）

【CSS】overflow-y - 領域から出たコンテンツの振る舞い（上下）

基本構文

overflow: 値;

値

一般的な値は次の通りです。

値	意味
auto	ユーザーエージェント（ブラウザ）の仕様
visible	表示
hidden	非表示
scroll	スクロール

サンプル

ソースコード

<style>
div {
    height: 100px;
    padding: 15px;
    border: 1px solid black;
    overflow-x: scroll;
}
.p1 {
    white-space: nowrap;
}
</style>

<div>
    <p class="p1">ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ</p>
    <p class="p2">
        ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ<br>
        ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ<br>
        ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ<br>
        ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ<br>
        ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ<br>
        ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ<br>
        ABCDE FGHIJ KLMNO PQRST UVWXYZ ABCDE FGHIJ KLMNO PQRST UVWXYZ<br>
    </p>
</div>

プレビュー