オーバーフロー

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 41/76。

CSSでは、overflowプロパティが、要素のboxからはみ出すコンテンツに何が起こるかを制御します。要素のコンテンツが、指定された幅と高さに収まらないほど大きい場合、overflowプロパティによって、コンテンツを切り取るか、scrollbarを追加するか、要素の境界の外側にはみ出したコンテンツを表示するかが決まります。

overflowプロパティを使用する基本的な構文は次のとおりです：

selector {
    overflow: value;
}

value：次のいずれかに設定できる、希望するオーバーフローの動作：

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

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

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

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

例：

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

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

overflow-x プロパティと overflow-y プロパティを使用すると、horizontal と vertical 方向の overflow の動作をそれぞれ個別に制御することもできます。

.example {
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: scroll; /* Add a vertical scrollbar */
}

チャレンジ

簡単

長いテキストを含む段落（<p>）を持つ division（<div>）を含むHTMLドキュメントが与えられています。あなたの課題は、overflowプロパティを使用して、はみ出したコンテンツの表示方法を制御することです。以下の手順に従ってください：

<div>要素を対象とするCSSルールをWriteします。widthを300pxに、heightを150pxに、borderを1px solid blackに設定します。
<div>のoverflowプロパティをscrollに設定して、要素にスクロールバーを追加します。

REQUIRED OUTPUT FORMAT: [Your translated content here]

自分で試してみよう

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