【CSS】要素の範囲を超えた部分を非表示にする(切り取る)overflow: hidden

CSS(シー・エス・エス)

2024.06.27

この記事は約3分で読めます。

overflow: hiddenとは
主な使用例
テキストの改行や画像の範囲外への出力を防ぐ
フローティング要素がコンテナからはみ出すのを防ぐ
スクロールバーを表示させずにコンテンツを切り取る
まとめ

overflow: hiddenとは

overflow: hiddenは、CSSプロパティの1つで、要素の内容がその領域を超えた場合の動作を指定するものです。

具体的には、以下のような効果があります。

要素の範囲を超えた部分は表示されなくなる(切り取られる)
スクロールバーは表示されない
要素の背景が要素の範囲に収まらない部分は表示されない

主な使用例

主な使用例としては、以下のようなケースが考えられます。

画像やテキストがコンテナからはみ出すのを防ぐ
フローティング要素がコンテナの外にはみ出すのを防ぐ
要素の高さを制限し、コンテンツがはみ出さないようにする

テキストの改行や画像の範囲外への出力を防ぐ

<div style="width: 200px; height: 100px; overflow: hidden;">
  <p>これはかなり長いテキストです。長すぎて、この範囲に収まりきらないでしょう。</p>
  <img src="large-image.jpg" alt="大きな画像" />
</div>

上記の例では、divの範囲を200px x 100pxに制限し、overflow:hiddenを設定しています。テキストと画像がこの範囲を超えた部分は表示されません。

フローティング要素がコンテナからはみ出すのを防ぐ

htmlCopy code<div style="overflow: hidden;">
  <div style="width: 100px; height: 100px; float: left; background: red;"></div>
  <p>このテキストは赤い正方形の横に表示されるはずです。</p>
</div>

上の例では、赤い正方形がフロートしています。overflow:hiddenがない場合、正方形がコンテナからはみ出してしまいます。しかし、overflow:hiddenを設定すると、正方形はコンテナ内に収まります。

スクロールバーを表示させずにコンテンツを切り取る

スクロール機能自体を無効にしてしまうと、横スクロールができなくなってしまいます。そこで、スクロールバー自体は表示させたままで、スタイル調整することをおすすめします。

.scroll-containerに以下のスタイルを追加してください。

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Operaブラウザ */
}

.scroll-container {
  -ms-overflow-style: none; /* IE及びEdge */
  scrollbar-width: none; /* Firefox */
}

これにより、すべてのブラウザでスクロールバーが非表示になります。

また、cursor: grab;により、マウスカーソルがスクロール可能なことを示すグラブアイコンに変更されます。