CSS overflowの基本的な使い方を覚える

CSS overflowの基本的な使い方を覚える

CSSでoverflowの使い方をhiddenで要素がはみ出さないようにできるという知識くらいしかなかったので、overflowプロパティとhiddenの値以外も含めた使い方を覚えることにしました。

記事ではoverflowのプロパティ、値の順番で使い方を書きました。

CSSで指定するoverflowの基本的な使い方にはなりますが参考になることがあればと思います。

 

CSSのoverflowプロパティの使い方

 

CSSでoverflowプロパティを使用すると、ボックス内の領域に収まらずにはみ出してしまうコンテンツをどのように表示するかを指定することができます。

CSSのoverflowの使い方はプロパティとして指定をします。

 

セレクタ{
    overflow: 値;
}

 

具体的な例で基本的なoverflowの使い方を覚えてみたいと思います。

 

<div class="overflow">
    <img src="/images/img.jpg" alt="画像">
</div>

 

例えばHTMLのdivの親要素内にimgタグでマークアップした画像を親要素よりも大きめの表示にしてdivのボックスからはみ出した画像をCSSのoverflowで指定する場合の使い方です。

 

.overflow{
    width: 500px;
    height: 350px;
    margin: 0 auto;
    border: 3px solid yellowgreen;
}

.overflow img{
    width: 550px;
    height: 400px;
}

 

CSSで親要素のdivのボックスサイズを横500pxに、縦を350pxの固定サイズにしてボーダーを表示させた要素に、画像サイズを横550pxと縦400pxで表示すると、親要素のボックスよりサイズが大きい画像は、以下の画像のように親要素からはみ出します。

 

 

.overflow{
    width: 500px;
    height: 350px;
    margin: 0 auto;
    border: 3px solid yellowgreen;
    overflow: hidden;
}

.overflow img{
    width: 550px;
    height: 400px;
}

 

親要素からコンテンツがはみ出したとき、CSSで親要素のdivボックスのセレクタ内にoverflowプロパティを記述して値をhiddenで指定したoverflowの使い方をします。

 

 

するとoverflow:hidden;のCSSが適用されて、はみ出していた子要素の画像は親要素のボックス内からはみ出すことなく収まります。

 

Advertisement

 

CSSのoverflowの基本的な使い方としてはプロパティとして記述をして値を指定しますが、はみ出す要素の親要素に指定することを覚えておきたいです。

他にも基本として覚えておきたいoverflowのプロパティがあります。

 

overflow-yで縦方向

 

overflowのプロパティにはoverflow-yというプロパティがあり縦方向の指定ができます。

overflow-yの基本的な使い方はoverflowと同じくCSSのプロパティとして使用します。

 

.overflow{
    width: 500px;
    height: 350px;
    margin: 0 auto;
    border: 3px solid yellowgreen;
    overflow-y: scroll;
}

.overflow img{
    width: 550px;
    height: 400px;
}

 

overflow-yをプロパティとして記述して値を指定します。値はscrollを使ってみます。

 

 

するとスクロールバーが表示されてスクロールができるようになります。また親要素の領域内からはみ出すことなくコンテンツが収まります。

このときoverflow-yで縦方向を指定してスクロールを適用したはずなのに、横スクロールも適用されてしまいます。これは横方向のoverflowの値が暗黙的にautoの値が適用されるためだということを調べてみて覚えました。

そのためoverflow-yで縦方向だけの適用範囲にしたい場合などには、overflow-xの使い方を覚えておくと良いです。

 

overflow-xは横方向

 

CSSのoverflow-xは横方向を指定するときに使えるoverflowのプロパティです。

overflow-xで横方向のはみ出た領域を指定する基本的な使い方はCSSのプロパティとして記述して、値ではみ出した要素をコントロールします。

先述したoverflow-yで縦方向を指定したときに横方向にもスクロールが暗黙的に適用されてしまいましたが、overflow-yとoverflow-xの値を同じセレクタで個別に指定すると、要素からはみ出した縦と横を個別に指定できる使い方ができます。

 

.overflow{
    width: 500px;
    height: 350px;
    margin: 0 auto;
    border: 3px solid yellowgreen;
    overflow-y: scroll;
    overflow-x: hidden;
}

.overflow img{
    width: 550px;
    height: 400px;
}

 

例えば親要素のボックスから縦横にはみ出た画像の横方向だけはスクロールバーの表示をなしにして、縦はスクロールさせる場合の使い方ですが、親要素のセレクタでoverflow-x: hidden;とoverflow-y: scroll;の二つで個別指定します。

 

 

するとoverflow-xで指定した横方向のはみ出した画像は、hiddenの値の適用によって親要素のボックス内で横スクロールなしで画像が親要素に収まり表示できます。

ここまではCSSでoverflowの基本的なプロパティの使い方を覚えてみました。

 

overflowの値の使い方

 

CSSのoverflowの値の基本的な使い方も覚えることにします。

CSSのoverflowの値には4つの値があります。

 

  • visible
  • hidden
  • scroll
  • auto

 

セレクタ{
    overflow: visible;
}

セレクタ{
    overflow: hidden;
}

セレクタ{
    overflow: scroll;
}

セレクタ{
    overflow: auto;
}

 

CSSの基本的な書き方なので大丈夫だとは思いますが、上記のようにoverflowの値として記述する使い方をします。

overflowの値の使い方はCSSを実際に書いた表示結果を確認しながらだと覚えやすかったです。

 

visible:はみ出す

 

CSSのoverflowの値でvisibleは要素からはみ出したコンテンツをはみ出したままで表示できます。

気になったので「vivible」の意味を翻訳してみたら「見える」でした。

 

 

上の画像は親要素のdivのボックス内の子要素にh2とpタグで文章をマークアップしてから、CSSでoverflowの値「visible」を使うために、ごにょごにょとデザインしたボックスです。

 

.overflow_text{
    background-color: #555;
    color: yellowgreen;
    width: 100%;
    max-width: 500px;
    height: 300px;
    margin: 30px auto;
    padding: 20px;
    border: 3px solid deeppink;
    overflow: visible;
}

.overflow_text h2,p{
    text-align: center;
    line-height: 2.5em;
}

 

そしてデザインしたボックスの子要素のpタグを、これでもかというほど増やしてから、CSSで親要素のセレクタにoverflowと値をvisibleにしたoverflow: visible;の記述を加えます。

 

 

すると親要素のdivのサイズは、高さを300pxで固定しているので、増やした子要素のpタグで表示される文章が300pxの高さに収まらなくなり、上の画像のように元気よく下にはみ出してくれます。

overflowの値でvivibleは結果的にoverflowをCSSで指定しなかった場合と同じ表示になります。

 

Advertisement

 

 

vivibleの値の使い道がわからなかったので考えた結果、はみ出したままの文章の間に入れた画像だけをスクロールしてみたら、文章のoverflow: visible;は適用されたままで、overflow: scroll;が効いたので、overflowの使い方の一つとして覚えておけそうです。

 

hidden:要素内に収める

 

CSSのoverflowの使い方で値をhiddenで指定すると、要素からはみ出したコンテンツを要素内に収めることができます。

「hidden」の意味を翻訳してみたら「隠された」でした。

CSSのoverflowの値hiddenの使い方は、はみ出してしまっている要素の親要素のセレクタにoverflow: hidden;を記述して使います。

 

 

今回2回目の登場のoverflow boxくんですが、親要素のボックスにoverflow: hidden;を指定しておくことで、どんだけpタグを増やして文章を書いていこうが、固定された高さのボックス内からはみ出すことになるコンテンツは表示されません。表示されることのないかわいそうなはみ出し者のコンテンツ達。

 

.overflow_text{
    background-color: #555;
    color: yellowgreen;
    width: 100%;
    max-width: 500px;
    height: 300px;
    margin: 30px auto;
    padding: 20px;
    border: 3px solid deeppink;
    overflow: hidden;
}

.overflow_text h2,p{
    text-align: center;
    line-height: 2.5em;
}

 

上記のようにCSSでoverflow: hidden;を親要素に記述することで要素内に収める使い方ができますが、このとき収まりきらなかったはみ出し者のコンテンツ達はoverflowの値でscrollの使い方を覚えれば救うことができます。

 

scroll:縦横のスクロール

 

CSSのoverflowの値をscrollで指定するとスクロールバーが表示されます。そして、はみ出してしまったコンテンツを親要素内からはみ出さないようにでき、隠れてしまった部分を縦横のスクロール操作によって閲覧が可能になります。

 

 

overflow: scroll;

 

overflowの値のscrollの使い方は、スクロールさせたい要素の親要素にoverflow: scroll;と記述して使います。

そうするとスクロールバーが表示されるのでoverflow: scrollの使い方を間違えていないことが表示結果で分かりやすいです。

 

間違えた失敗から覚えたことを紹介します。

overflowのscrollの使い方を覚えたくて、横並びにした画像を横スクロールさせてみたときに、横スクロールできないことがあったのですが、基本的な使い方を間違えていたようで、親要素の幅を広げてoverflow: scrollを指定しまっていました。

横幅が足りているのでスクロールするはずがないのですが、overflow: scrollの指定は親要素で、そして子要素の幅を親要素の幅よりも固定幅で広くする使い方をすることで、スクロールバーが表示してスクロールしてくれます。

 

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

 

CSSでoverflowの値をautoにした場合は、必要に応じてスクロールできるようにスクロールバーが表示できます。

必要に応じてスクロールというのは、要素からはみ出す部分がある場合にはスクロールが可能になり、要素からはみ出す部分がなければスクロールはしないという意味です。

 

overflow: auto

 

overflowの値のautoの使い方はスクロールさせたい要素の親要素にoverflow: autoと記述して使います。

 

 

overflowのautoの使い方はパンくずリストが覚えやすかもしれません。

 

 

CSSで横並びにしたパンくずリストは、PCの画面では幅が広いのでパンくずリスト全体を表示できますが、スマホの画面の場合はパンくずリストが横に長いと要素がはみ出してしまうことがあります。

 

.breadcrumb ul{
    background-color: #d6d6d6;
    width: 100%;
    display: flex;
    padding: 10px;
    white-space: nowrap;
    overflow-x: auto;
}
.breadcrumb li{
    padding-left: 10px;
    font-size: 0.9rem;
}

 

例はパンくずリストですが、横並びの幅がはみ出してしまう場合の使い方としても有効で、overflow-xプロパティの値にautoを指定して親要素に記述すると、幅が狭いときはスクロールバーを表示してスクロールが可能になるという必要に応じて切り替える使い方ができるのです。

下の画像はパンくずリストの親要素にoverflow-x: auto;を指定して、画面を狭くしたときに横スクロールが表示されてる画像です。

 

 

まとめ

 

CSSでoverflowの基本的な使い方はoverflowのプロティと値の組み合わせ方を覚えることが大切だと思えました。

はみ出したコンテンツをどのようにはみ出さないように表示するかは、CSSでデザインするWebサイトのコンテンツごとに異なりますので、あらかじめoverflowでどんな使い方ができるのか理解しておくと、コンテンツごとに適したoverflowのプロパティと値をチョイスできるので悩むことが減りそうです

CSSカテゴリの最新記事