overflow プロパティ (CSS)

overflow: visible;

overflow: hidden;

overflow: clip;

overflow: scroll;

overflow: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
    Inn Hall. Implacable November weather. As much mud in the streets as if the
    waters had but newly retired from the face of the earth.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

/* キーワード値 */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;

/* 2 値構文: 水平 | 垂直 */
overflow: hidden visible;

/* グローバル値 */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

div {
  height: 10em;
  width: 15em;
  border: 3px solid;
  padding: 10px;

  background-color: #ededed;
  background-clip: content-box;
}

div {
  overflow: visible;
}

<div>
  <h2>overflow: visible;</h2>
</div>
<div>
  <p>
    この例では、<code>overflow</code> プロパティが <code>visible</code> に設定されています。スクロールコンテナーは生成されず、コンテンツはコンテナーからはみ出します。
  </p>
</div>

div {
  overflow: scroll;
}

<div>
  <h2>overflow: scroll;</h2>
</div>
<div>
  <p>
    この例では、<code>overflow</code> プロパティが <code>scroll</code> に設定されています。これにより、スクロールコンテナーが生成され、必要がない場合でもスクロールバーが常に表示されます。
  </p>
</div>

div {
  overflow: auto;
}

<div>
  <h2>overflow: auto;</h2>
</div>
<div>
  <p>
    この例では、<code>overflow</code> プロパティが <code>auto</code> に設定されています。あふれたコンテンツがあるため、スクロールコンテナーが生成されます。コンテンツはパディングボックス内にクリップされ、スクロールバーによってはみ出したコンテンツまでスクロールできるようになります。
  </p>
</div>

div {
  overflow: hidden;
}

<div>
  <h2>overflow: hidden;</h2>
</div>
<div>
  <p>
    この例では、<code>overflow</code> プロパティが <code>hidden</code> に設定されています。hidden に設定されている場合でも、<a href="https://mdn.go-mizu.dev/ja/docs/Web/HTML/Guides/Content_categories#対話型コンテンツ">対話型コンテンツ</a>は、フォーカスが当たるとスクロールして表示領域内に表示されるようになります。コンテンツがあふれているため、スクロールバーは存在しません。しかし、この要素はスクロールコンテナーとなります。
    タブキーを押すと、この <input aria-label="input" placeholder="input" /> にフォーカスが移り、画面内に表示される位置までスクロールされます。このコンテンツは、プログラムによるスクロールも可能です。
  </p>
</div>

div {
  overflow: clip;
}

<div>
  <h2>overflow: clip;</h2>
</div>
<div>
  <p>
    この例では <code>overflow</code> プロパティは <code>clip</code> に設定されています。hidden の場合、<a href="https://mdn.go-mizu.dev/ja/docs/Web/HTML/Guides/Content_categories#対話型コンテンツ">対話型コンテンツ</a> は、フォーカスが当たってもスクロールして表示領域内に表示されることはありません。はみ出したコンテンツはコンテナーに合わせて切り取られます。スクロールコンテナーは作成されません。
    Tabキーを押すと、この <input aria-label="input" placeholder="input" /> にフォーカスが移りますが、表示範囲内にスクロールされることはありません。キーボードユーザーはこのコンテンツに到達できません。また、このコンテンツはプログラムによるスクロールもできません。
  </p>
</div>
<fieldset>
  <legend><code>overflow-clip-margin</code> の値を選択</legend>
  <ul>
    <li>
      <label
        ><input type="radio" name="overflow" value="0" /> overflow-clip-margin:
        0;</label
      >
    </li>
    <li>
      <label
        ><input type="radio" name="overflow" value="3em" />
        overflow-clip-margin: 3em;</label
      >
    </li>
  </ul>
</fieldset>

ul {
  list-style-type: none;
}
label {
  font-family: monospace;
}
:has([value="0"]:checked) div {
  overflow-clip-margin: 0;
}
:has([value="3em"]:checked) div {
  overflow-clip-margin: 3em;
}

@supports not (overflow-clip-margin: 0) {
  body::before {
    content: "このブラウザーはまだ overflow-clip-margin に対応していません。";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;

    width: 100%;
  }
}

div {
  height: 10em;
  width: 15em;
  border: 3px solid;
  padding: 10px;
  background-color: #ededed;
  background-clip: content-box;
}
p {
  font-size: 1.5rem;
  line-height: 1.6;
  font-family: sans-serif;
}
h2 {
  font-family: monospace;
}
body {
  height: 98vh;
  overflow: clip;
  display: flex;
  flex-flow: row wrap;
  gap: 3em;
}

<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

div {
  margin: 2em;
  font-size: 1.2em;
}

p {
  width: 5em;
  height: 5em;
  border: dotted;
  margin-top: 0.5em;
}

div:nth-of-type(5),
div:nth-of-type(6) {
  margin-top: 200px;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}