CSS 要素のはみ出し overflowの使い方 hidden scrollの違い

CSS

【CSS overflowの使い方】hiddenやscrollの違い

今回はCSSのoverflowプロパティの使い方について紹介していきます。

 

この記事を読むと分かること

  • overflowプロパティの概要について
  • overflowプロパティで使用できる値とその意味について
  • overflow-x・overflow-yの使い方について

 

 

overflowプロパティとは?

overflowプロパティは、要素がボックスの外側にはみ出てしまった際に、はみ出た部分をどのように表示させるかを指定する事ができるプロパティです。

基本的に要素がボックスからはみ出るということはないのですが、以下のように横幅(width)や高さ(height)を指定している場合、要素がボックスからはみ出てしまうことがあります。

横幅(width)や高さ(height)を指定していることで要素がボックスからはみ出てしまっているケース。

このような場合にoverflowプロパティを使って、はみ出ている要素を隠したり、スクロールバーで表示させたりすることができます。

overflowプロパティを使って、はみ出ている要素を隠している例。

 

 

overflowで使用できる値

それではここからはoverflowプロパティで使用できる値を1つづつ紹介していきます。

■overflowで使用できる値

  • visible(初期値):はみ出た部分をそのまま表示する
  • hidden:はみ出た部分を隠す
  • scroll:はみ出た部分をスクロールで表示する
  • auto:はみ出た部分の処理をブラウザ側に委ねる(基本的にはscrollと同じ結果になる)

 

visible(初期値):はみ出た部分をそのまま表示する

1つ目の値は、visibleです。

こちらの値を使用すると、ボックスからはみ出た部分をそのまま表示することができるようになります。

overflow: visibleを指定している例。

なおこちらの値は初期値の為、何も指定しなかった場合と同じ表示結果になります。

 

hidden:はみ出た部分を隠す

2つ目の値は、hiddenです。

こちらの値を使用すると、ボックスからはみ出た部分を見えなくする事ができます。

overflow: hiddenを指定している例。

 

scroll:はみ出た部分をスクロールで表示する

3つ目の値は、scrollです。

こちらの値を使用すると、ボックスからはみ出た部分をスクロールで表示できるようにする事ができます。

overflow: scrollを指定している例。

ちなみにoverflow: scrollで表示されるスクロールバーの見え方は閲覧環境によって異なります。

Google ChromeとInternet Explorerのスクロールバーの表示の違いを表した図。

 

auto:はみ出た部分の処理をブラウザ側に委ねる(基本的にはscrollと同じ結果になる)

4つ目の値は、autoです。

こちらの値を使用すると、はみ出た部分の処理をブラウザ側に委ねる事ができます。

overflow: autoを指定している例。

なおほとんどの場合は、overflow: scrollの表示結果と同じになります。

 

 

overflow-x・overflow-yの使い方

また補足ですが、overflowプロパティと似たプロパティにoverflow-x・overflow-yプロパティがあります。

  • overflow-x ・・・ ボックスの横方向にはみ出た部分をどのように表示させるかを指定する事ができる
  • overflow-y ・・・ボックスの縦方向にはみ出た部分をどのように表示させるかを指定する事ができる

前述したようにInternet Explorer(Windows)ではoverflowプロパティを指定するとデフォルトでスクロールバーが下側と右側に表示されてしまいます。

Internet Explorerでのスクロールバーの表示のされ方。

ただし、下側にしかスクロールしない場合「下側に表示されているスクロールバーは表示させたくない」という場合もあると思うので、そういった場合はoverflow-yを使用してあげることでボックスの右側のスクロールバーのみを表示し、下側のスクロールバーは非表示にする事が可能です。

overflow-y: scroll;とすることで、下側のスクロールバーは非表示にする事が可能。

 

 

まとめ・overflowプロパティの使い方!

まとめです。今回はoverflowプロパティの使い方について紹介しました。

overflowプロパティを使えるようになると、画像のトリミングやスマホで横方向にスクロールさせるテーブルなどを実装することが可能ですので、ぜひ覚えておきましょう。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS