overflow

オーバーフロー（その他）

意味コンテンツのはみ出し処理

overflowとは？

overflowプロパティは、ボックス内のコンテンツがその領域を超えてはみ出した場合の表示方法を指定します。主に、visible（はみ出した内容を表示）、hidden（はみ出した内容を非表示）、scroll（スクロールバーを表示して内容をスクロール可能に）、auto（ブラウザによる自動判断）の値が使われます。

overflowの具体的な使い方

自動スクロールバーを設定する例

<style>
    div {
        overflow: auto;
    }
</style>

<div style='height: 100px;'>
    このdiv要素は内容がはみ出すとスクロールバーが表示されます。
</div>

div要素内のコンテンツが領域を超えてはみ出した場合、ブラウザが状況に応じてスクロールバーを表示するかどうかを自動で判断し、必要に応じてユーザーがコンテンツをスクロールして全て見られるようにします。

テキストを省略記号で切り詰める例

<style>
  .hidden-overflow {
    overflow: hidden;
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

<div class="hidden-overflow">
  この長いテキストは省略記号で切り詰められます。
</div>

overflow: hiddenを使用して、はみ出したテキストを非表示にし、text-overflow: ellipsisと組み合わせて省略記号（...）で表示します。

overflowに関するよくある質問

Q. overflowの主な値は？

A. overflowの主な値は以下の通りです： - visible: デフォルト値。はみ出た内容をそのまま表示します。 - hidden: はみ出た内容を非表示にします。 - scroll: 常にスクロールバーを表示します。 - auto: 必要な場合のみスクロールバーを表示します。

Q. overflow-xとoverflow-yとは？

A. overflow-xは水平方向、overflow-yは垂直方向のオーバーフローを個別に制御するためのプロパティです。これらを使用すると、例えば水平方向はスクロール可能にし、垂直方向は非表示にするといった設定が可能になります。

Q. overflowとfloatの関係は？

A. overflow: hiddenまたはoverflow: autoを親要素に適用すると、その中のfloat要素を包含することができます。これは「クリアフィックス」テクニックの一つとして知られており、フロートによるレイアウトの崩れを防ぐのに役立ちます。

overflowが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのoverflowやopacity、list-style、z-index、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。