【CSS】overflowの使い方を徹底解説。※サンプルコードもあります。

本記事の目次

overflowプロパティについて
①visible
②hidden
③clip
④scroll
- スクロールバーの削除
⑤auto
まとめ

overflowプロパティについて

CSSのプロパティの一つであるoverfolwでは、要素のボックスに収まりきれずにはみ出てしまう部分について、どのような処理をするのかを指定できます。

デフォルトではvisibleが設定されています。

.sample{
  overflew: visible;　
}

WEB制作の現場では、要素のボックスからはみ出た部分をスクロールで表示できるように処理するために、scrollを指定することがよくあります。

①visible

overflow: visible; を指定することで、要素のボックスからはみ出た部分をそのまま表示にすることができます。

＜↓以下サンプルです。＞

テキストテキストテキストテキスト

<div class="overflow1">
  <p>
    テキストテキストテキストテキスト
  </p>
</div>

.overflow1{
  padding: 5px;
  border: 1px solid #333;
　　box-shadow:1px 0px 10px #aaa;
}
.overflow1 p{
  width: 200px;
  height: 40px;
  font-size: 18px;
  border: 3px solid red;
　　overflow: visible;
}

②hidden

overflow: hidden; を指定することで、要素のボックスからはみ出た部分を非表示にすることができます。

スクリプトなど、他の手段を用いることによってスクロールさせることは可能です。

＜↓以下サンプルです。＞

テキストテキストテキストテキスト

<div class="overflow2">
  <p>
    テキストテキストテキストテキスト
  </p>
</div>

.overflow2{
  padding: 5px;
  border: 1px solid #333;
　　box-shadow:1px 0px 10px #aaa;
}
.overflow2 p{
  width: 200px;
  height: 40px;
  font-size: 18px;
  border: 3px solid red;
　　overflow: hidden;
}

③clip

overflow: hidden; を指定することで、要素のボックスからはみ出た部分を非表示にすることができます。

一見overflow: hidden;と変わらないようにも見えますが、クリップ（切り抜き）の名の通り、隠している（hidden）のではなく完全に切り抜いている（clip）ため、スクリプトなどの他の手段を用いてもスクロールしたりすることはできません。

＜↓以下サンプルです。＞

テキストテキストテキストテキスト

<div class="overflow3">
  <p>テキストテキストテキストテキストテキスト</p>
</div>

.overflow3{
  padding: 5px;
  border: 1px solid #333;
　　box-shadow:1px 0px 10px #aaa;
}
.overflow3 p{
  width: 200px;
  height: 40px;
  font-size: 18px;
  border: 3px solid red;
　　overflow: clip;
}

④scroll

overflow: scroll; を指定することで、要素のボックスからはみ出た部分をスクロールすることで表示できるようになります。

ブラウザによって異なるスクロールバーが表示されます。

＜↓以下サンプルです。＞

テキストテキストテキストテキストテキストテキストテキストテキスト

<div class="overflow4">
  <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

.overflow4{
  padding: 5px;
  border: 1px solid #333;
　　box-shadow:1px 0px 10px #aaa;
}
.overflow4 p{
  width: 200px;
  height: 80px;
  font-size: 18px;
  border: 3px solid red;
　　overflow: scroll;
}

スクロールバーの削除

スクロールバーはブラウザによって表示が異なるため、見た目を気にする場合はデフォルトでのスクロールバーを削除する必要があります。

スクロールバーを削除するには、ブラウザごとに異なる対応する必要がありますので、それぞれご紹介していきます。

IE、Edge ： -ms-overflow-styleプロパティを利用する。
Chrome、Safari ： ::-webkit-scrollbar（擬似要素）を利用する。
Firebox ： scrollbar-widthプロパティを利用する。

＜↓以下サンプルです。＞

テキストテキストテキストテキストテキストテキストテキストテキスト

<div class="overflow4_bar">
  <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

.overflow4_bar{
  padding: 5px;
  border: 1px solid #333;
　　box-shadow:1px 0px 10px #aaa;
}
.overflow4_bar p{
  width: 200px;
  height: 80px;
  font-size: 18px;
  border: 3px solid red;
　　overflow: scroll;
　　scrollbar-width: none; /* IE、Edge */
  -ms-overflow-style: none; /* Firebox */
}
.overflow4_bar p::-webkit-scrollbar{ /* Chrome、Safari */
  display: none;
}

⑤auto

overflow: auto;を指定することで、要素のボックスからはみ出た部分の処理をブラウザに委ねることができます。

基本的にはoverflow: scroll; を指定した時と同じ動作となります。

WEB制作においてverflow: auto; を指定することはまずないので、覚える必要はあまりありませんが、ご紹介程度に。

＜↓以下サンプルです。＞

テキストテキストテキストテキストテキストテキストテキストテキスト

<div class="overflow5">
  <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

.overflow5{
  padding: 5px;
  border: 1px solid #333;
　　box-shadow:1px 0px 10px #aaa;
}
.overflow5 p{
  width: 200px;
  height: 80px;
  font-size: 18px;
  border: 3px solid red;
　　overflow: auto;
}