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

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

overflow-y

overflow-yは要素の上下から出たコンテンツの振る舞いを示すプロパティです。

基本構文

overflow-y: 値;

値

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

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

サンプル

ソースコード

<style>
p {
    height: 100px;
    padding: 15px;
    border: 1px solid black;
    overflow-y: scroll;
}
</style>

<p>
    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>

プレビュー