CSSのoverflowを完全マスター｜全4種類を実例付きで解説

（最終更新日：2023年12月）

✔このような方へ向けて書かれた記事となります

「CSSのoverflowプロパティってどのように使うの？」
「overflowプロパティの設定方法を知りたい」
「実際にoverflowプロパティを使った例が見たい」

✔当記事を通じてお伝えすること

• CSSのoverflowプロパティの基本概念
• overflowプロパティの設定方法と応用事例
• 実際のサイトでのoverflowプロパティの使い方

当記事では、CSSのoverflowプロパティの基本的な使い方から、さまざまなオプションを活用した応用例まで、具体的なサンプルを用いてわかりやすく解説しています。

ぜひ最後までお読みいただき、実践的な知識を身につけてください。

✔動画で学びたい方はこちら

CSS overflowとは何か

こちらでは、CSSの重要なプロパティである「overflow」の基本について解説します。

ウェブページのレイアウトやデザインの制御に大いに役立つでしょう。

• overflowプロパティの概要と機能
• overflowプロパティの値：visible、hidden、scroll、auto
• CSS overflowの実践的な使い方と例
• CSS overflowを使用する際の注意点

overflowプロパティの概要と機能

overflowプロパティは、要素の内容が要素のボックスを超えた場合の表示方法を制御します。

たとえば、テキストがその親要素のボックスをはみ出す場合、そのはみ出し部分をどのように表示するかを指定できるのです。

overflowプロパティの値：visible、hidden、scroll、auto

overflowプロパティは、主に以下の4つです。

それぞれの値は、要素を異なる方法で表示します。

1. visible
   デフォルト値で、内容がボックスを超えてもそのまま表示。ボックスはオーバーフローしている内容を隠しません。
2. hidden
   ボックスを超えた内容を隠します。要素のボックスの境界を越えた内容は表示されません。
3. scroll
   ユーザーがスクロールできるようにスクロールバーを表示。内容がボックスに収まっていてもスクロールバーは表示されます。
4. auto
   この値は、内容がボックスを超えている場合に限りスクロールバーを表示します。

CSS overflowの実践的な使い方と例

CSSのoverflowプロパティは、多くの実践的なシチュエーションで利用可能です。

• 限られたスペースに大量のテキストや画像を表示したいとき
• スクロール可能なコンテンツエリアを作成したいとき

以下は、overflowプロパティを使用した実例です。

div {
  width:150px;
  height: 150px;
  overflow: scroll;
  border: 1px solid black;
}

div要素の高さと幅を150ピクセルに固定し、overflowをscrollに設定。

その結果、div内の内容が150ピクセルのボックスを超える場合、ユーザーはスクロールできます。

ページのデザインを乱すことなく大量の内容を扱うことが可能です。

また、画像ギャラリーのように一部の画像のみを表示し、残りをスクロールで見られるようにすることも可能。

CSS overflowを使用する際の注意点

overflowプロパティを適用する際は、注意も必要です。

すべてのブラウザが同じようにoverflowを扱いません。

クロスブラウザの互換性を確保することが重要です。

これはとくにoverflowのscroll値についていえることで、一部のモバイルブラウザではスクロールバーが表示されないかもしれません。

overflowの活用方法

こちらでは、CSSのoverflowプロパティの活用方法について詳しく見ていきます。

以下にoverflowプロパティの主な値とその振る舞いについて見ていきましょう。

• visible: そのまま表示する
• hidden: はみ出た部分を非表示に
• scroll: スクロールバーを表示
• auto: 必要に応じてスクロールを表示

visible: そのまま表示する

overflow: visibleはoverflowプロパティのデフォルト値。

この設定により要素のボックスがコンテンツを収容できない場合でも、はみ出したコンテンツはそのまま表示されます。

この設定下では、はみ出た部分に対してスクロールバーは表示されません。

例えば、あるdiv要素に大きな画像が含まれていても、その全体が見え続けるでしょう。

/* visible */
.box-visible {
  width: 200px;
  height: 200px;
  overflow: visible;
  border: 1px solid black;
}

hidden: はみ出た部分を非表示に

overflow: hiddenは、要素のボックスからはみ出したコンテンツを非表示にするもの。

この設定を用いると、はみ出た部分はクリップされ、ユーザーには見えなくなります。

例えば、一部のテキストが要素のボックスからはみ出していた場合、そのはみ出た部分は表示されず、見切れた形になります。

/* hidden */
.box-hidden {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 1px solid black;
}

scroll: スクロールバーを表示

overflow: scrollは、コンテンツが要素のボックスからはみ出した場合にスクロールバーを強制的に表示するものです。

これは、はみ出たコンテンツが存在しない場合でもスクロールバーが表示されることを意味します。

これにより、一定のデザインやレイアウトを維持することが可能です。

/* scroll */
.box-scroll {
  width: 200px;
  height: 200px;
  overflow: scroll;
  border: 1px solid black;
}

auto: 必要に応じてスクロールを表示

overflow: autoは、コンテンツが要素のボックスからはみ出した場合に、必要に応じてスクロールバーを表示。

はみ出たコンテンツが存在する場合に限り、スクロールバーが表示されることを意味します。

必要なときだけスクロールバーが表示され、スペースの効率的な利用が可能となります。

/* auto */
.box-auto {
  width: 200px;
  height: 200px;
  overflow: auto;
  border: 1px solid black;
}

構文と値の使い方

こちらでは、overflowプロパティの具体的な構文と、その値の詳細な使い方について見ていきましょう。

どんな場面で使うのかを明確にできます。

• 各プロパティの使用場面
• 横方向と縦方向のスクロール制御

各プロパティの使用場面

4つのoverflowプロパティの値の中でも、visibleとhiddenは比較的単純な動作を示します。

対してscrollとautoは、要素のサイズやコンテンツの量によって異なる挙動を示すため、注意が必要です。

とくに、autoはコンテンツがはみ出した場合にのみスクロールバーを表示するため、動的なコンテンツやレスポンシブデザインにおいて重要な役割を果たします。

横方向と縦方向のスクロール制御

overflowプロパティには、overflow-xとoverflow-yという2つの関連プロパティも存在します。

これらはそれぞれ要素の横方向と縦方向のスクロール挙動を制御するもの。

overflow-x: scroll
overflow-y: hidden

上の例では、横方向にはスクロールバーが表示され、縦方向のコンテンツがはみ出てもその部分は非表示になります。

overflowとscrollbarのカスタマイズ

次に、overflowプロパティと、それによって生成されるスクロールバーのカスタマイズ方法についてご覧いただきます。

スクロールバーの見た目を変更することで、ユーザーエクスペリエンスを向上させられるでしょう。

• スクロールバーのサイズ変更
• スクロールバーの色変更

スクロールバーのサイズ変更

スクロールバーのサイズは、Webkitブラウザであれば、::-webkit-scrollbarセレクタと関連プロパティを用いて調整が可能です。

::-webkit-scrollbar { width: 10px; }

上記のように指定することで、スクロールバーの幅を10pxに設定できます。

この機能はWebkitブラウザ特有のものなので、ほかのブラウザでは動作しないことに注意が必要です。

スクロールバーの色変更

スクロールバーの色もまた、Webkitブラウザであればカスタマイズ可能です。

::-webkit-scrollbar-thumbセレクタを用いてスクロールバーの色を指定できます。

::-webkit-scrollbar-thumb { background: #888; }

こちらでは、スクロールバーの色がグレーになります。

同様に、この機能もWebkitブラウザ特有のものなので、ほかのブラウザでは動作しないことに注意が必要です。

実践例: レスポンシブなテーブルデザイン

最後に、overflowプロパティを活用したレスポンシブなテーブルデザインの実践例を見てみましょう。

レスポンシブなテーブルデザインでは、スクリーンの幅によってテーブルの表示方法が自動的に変更されます。

具体的には、以下のような動作になります。

• 大きなスクリーンではテーブルの全ての列が表示される
• スクリーンが小さくなると、テーブルが横スクロール可能になり、はみ出した列をスクロールして見れる

これを実現するためには、テーブル要素にoverflow: autoを設定し、必要に応じてスクロールバーが表示されるようにします。

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  .responsive-table {
    overflow-x: auto;
  }
</style>
</head>
<body>

<div class="responsive-table">
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <!-- 他の列を追加 -->
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <!-- 他のデータを追加 -->
    </tr>
    <!-- 他の行を追加 -->
  </table>
</div>

</body>
</html>

この方法を使用すると、どんなスクリーンサイズのデバイスからでもテーブルの全てのデータを利用者が確認できるようになります。

これはとくに、大量の情報を一覧表示するウェブアプリケーション、例えばダッシュボードや管理画面などで非常に有用なテクニックです。

まとめ

当記事では、CSSのoverflowプロパティについて詳しく解説しました。

• 基本的な概念から具体的な値の使い方
• overflowプロパティの概要と使用例
• スクロールバーのカスタマイズ方法

これらの知識を活用することで、ユーザーエクスペリエンスを向上させられます。

CSSのoverflowプロパティは、その単純な構文とパワフルな機能から、ウェブデザインにおいて重要なツールのひとつです。

これらの知識を活用し、自分自身のウェブデザインスキルを一段階上げていきましょう。