Overflow

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 41/76。

CSSにおいて、overflowプロパティは、要素のボックスからはみ出したコンテンツの扱いを制御します。要素のコンテンツが指定された幅や高さに収まりきらないほど大きい場合、overflowプロパティは、コンテンツを切り取るか、スクロールバーを追加するか、あるいは要素の境界の外側に溢れたコンテンツを表示するかを決定します。

overflow プロパティを使用するための基本的な構文は以下の通りです：

selector {
    overflow: value;
}

value: 期待されるオーバーフローの動作。以下のいずれかになります：

visible: これはデフォルト値です。はみ出したコンテンツは要素のボックスの外側にレンダリングされ、隣接する要素と重なる場合があります。

hidden: はみ出したコンテンツは切り取られ、残りのコンテンツは表示されません。

scroll: 要素にスクロールバー（水平および垂直の両方）を追加し、ユーザーが溢れたコンテンツをスクロールできるようにします。

auto: ブラウザは、コンテンツと利用可能なスペースに基づいてスクロールバーを追加するかどうかを決定します。通常、スクロールバーは必要な場合にのみ追加されます。

例えば：

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

この例では、幅 200px、高さ 100px のすべての <div> 要素に、溢れたコンテンツを表示するためのスクロールバーが追加されます。

overflow-x プロパティと overflow-y プロパティを使用して、水平方向と垂直方向のオーバーフローの挙動を個別に制御することもできます。

.example {
    overflow-x: hidden; /* 水平方向のオーバーフローを隠す */
    overflow-y: scroll; /* 垂直方向のスクロールバーを表示する */
}

チャレンジ

簡単

長いテキストを含む段落（<p>）を持つ、ディビジョン（<div>）が含まれたHTMLドキュメントが与えられています。あなたのタスクは、overflowプロパティを使用して、溢れたコンテンツがどのように表示されるかを制御することです。以下の手順に従ってください。

<div>要素をターゲットにするCSSルールを記述します。widthを300pxに、heightを150pxに、borderを1px solid blackに設定してください。
<div>のoverflowプロパティをscrollに設定して、要素にスクロールバーを追加します。

チートシート

overflow プロパティは、要素のボックスからはみ出したコンテンツの扱いを制御します：

selector {
    overflow: value;
}

Overflow の値：

visible: デフォルト。コンテンツは要素のボックスの外側にはみ出して表示されます
hidden: はみ出したコンテンツは切り取られ、表示されません
scroll: スクロールバー（水平および垂直）を追加します
auto: ブラウザが必要な場合にのみスクロールバーを追加します

例：

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

水平方向と垂直方向のオーバーフローを個別に制御する：

.example {
    overflow-x: hidden; /* 水平方向のオーバーフローを隠す */
    overflow-y: scroll; /* 垂直方向のスクロールバーを追加する */
}

自分で試してみよう

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>