SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.14
  • CATEGORY
TITLE

【CSS】overflowの使い方 hidden、scrollの指定方法など

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は【CSS】overflowの使い方 hidden、scrollの指定方法
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • overflowの使い方について学びたい方へ
  • 今回はoverflowについての記事になります
overflowの役割

上の図のように、コンテンツからはみ出た部分を非表示、スクロールを指定することが可能になります。

overflowについて

overflowについて

overflowとは、ボックスからコンテンツがはみ出た際の表示方法を指定します。
書き方は以下のようになります。

要素 {overflow: 値};
指定できる値
  • visible(初期値)
    初期値になります。ボックスからコンテンツがはみ出た箇所は表示されます。
  • hidden
    ボックスからコンテンツがはみ出た箇所は非表示になります。
  • scroll
    スクロールバーを表示し、ボックスからコンテンツがはみ出た箇所は非表示になります。
  • auto
    ブラウザの設定に合わせ、多くの場合はスクロールバーが表示されます。

overflow指定方法について

overflow指定方法について

ここから、指定方法について解説していきます。

visibleの指定方法

visibleとは、初期値になります。
ボックスからコンテンツがはみ出た箇所は表示されます。

visibleの指定方法

ホームページ制作、名刺制作、ロゴ制作など、
デザインをする際には配色は欠かせない
要素の1つになってきますよね。
私も、配色で悩んだ経験はたくさんあります。

<p>ホームページ制作、名刺制作、ロゴ制作など、<br>
デザインをする際には配色は欠かせない<br>
要素の1つになってきますよね。<br>
私も、配色で悩んだ経験はたくさんあります。</p>
.txt {
  width: 380px;
  height: 120px; /*--heightを指定--*/
  background-color: #FD5E5A;
  padding: 10px;
  box-sizing: border-box;
  
  /*--visibleを指定--*/
  overflow: visible;
}

heightを指定していない場合

heightを指定しているため、このようにはみ出した箇所も表示されてしまいます。
heightを指定していない場合は「height: auto」が適用されるため、はみ出ることはありません。

visibleの指定方法

ホームページ制作、名刺制作、ロゴ制作など、
デザインをする際には配色は欠かせない
要素の1つになってきますよね。
私も、配色で悩んだ経験はたくさんあります。

<p>ホームページ制作、名刺制作、ロゴ制作など、<br>
デザインをする際には配色は欠かせない<br>
要素の1つになってきますよね。<br>
私も、配色で悩んだ経験はたくさんあります。</p>
.txt {
  width: 380px;
  /*--heightを削除--*/
  background-color: #FD5E5A;
  padding: 10px;
  box-sizing: border-box;
  
  /*--visibleを指定--*/
  overflow: visible;
}

hiddenの指定方法

hiddenとは、
ボックスからコンテンツがはみ出た箇所は非表示になります。
overflowプロパティで一番よく使う値になります。

最後の一文「私も、配色で悩んだ経験はたくさんあります。」が高さの領域に入っていないため、
非表示になります。

hiddenの指定方法

ホームページ制作、名刺制作、ロゴ制作など、
デザインをする際には配色は欠かせない
要素の1つになってきますよね。
私も、配色で悩んだ経験はたくさんあります。

<p>ホームページ制作、名刺制作、ロゴ制作など、<br>
デザインをする際には配色は欠かせない<br>
要素の1つになってきますよね。<br>
私も、配色で悩んだ経験はたくさんあります。</p>
.txt {
  width: 380px;
  height: 120px; /*--heightを指定--*/
  background-color: #FD5E5A;
  padding: 10px;
  box-sizing: border-box;
  
  /*--hiddenを指定--*/
  overflow: hidden;
}

scrollの指定方法

scrollとは、
スクロールバーを表示し、ボックスからコンテンツがはみ出た箇所は非表示になります。
縦方向にスクロールして表示されます。

scrollの指定方法

ホームページ制作、名刺制作、ロゴ制作など、
デザインをする際には配色は欠かせない
要素の1つになってきますよね。
私も、配色で悩んだ経験はたくさんあります。

<p>ホームページ制作、名刺制作、ロゴ制作など、<br>
デザインをする際には配色は欠かせない<br>
要素の1つになってきますよね。<br>
私も、配色で悩んだ経験はたくさんあります。</p>
.txt {
  width: 380px;
  height: 120px; /*--heightを指定--*/
  background-color: #FD5E5A;
  padding: 10px;
  box-sizing: border-box;
  
  /*--scrollを指定--*/
  overflow: scroll;
}

横方向にスクロールの指定方法

縦方向のスクロールではなく、横方向にスクロールも可能になります。
white-spaceプロパティとoverflowを指定し、横方向にスクロールができるように指定します。

white-space:nowrapとは、コンテンツが改行しないようにしています。
※今回は横方向にスクロールのため、widthの領域を少し小さくしております。

横方向にスクロール

ホームページ制作、名刺制作、ロゴ制作など、
デザインをする際には配色は欠かせない
要素の1つになってきますよね。
私も、配色で悩んだ経験はたくさんあります。

<p>ホームページ制作、名刺制作、ロゴ制作など、<br>
デザインをする際には配色は欠かせない<br>
要素の1つになってきますよね。<br>
私も、配色で悩んだ経験はたくさんあります。</p>
.txt {
  width: 200px;
  height: 120px; /*--heightを指定--*/
  background-color: #FD5E5A;
  padding: 10px;
  box-sizing: border-box;
  
  /*--scrollを指定--*/
  overflow: scroll;
  white-space:nowrap;
}

overflow-xとoverflow-yの指定方法

overflowには、x=横方向y=縦方向の指定も可能になります。

overflow-x:表示方法の指定
overflow-y:表示方法の指定になります。

指定できる値に関しては、overflowと同様になります。
例として「縦方向のスクロールを非表示にし、横方向のスクロールのみ表示する」ことも可能になります。

-x、-yの指定方法

ホームページ制作、名刺制作、ロゴ制作など、
デザインをする際には配色は欠かせない
要素の1つになってきますよね。
私も、配色で悩んだ経験はたくさんあります。

<p>ホームページ制作、名刺制作、ロゴ制作など、<br>
デザインをする際には配色は欠かせない<br>
要素の1つになってきますよね。<br>
私も、配色で悩んだ経験はたくさんあります。</p>
.txt {
  width: 200px;
  height: 120px; /*--heightを指定--*/
  background-color: #FD5E5A;
  padding: 10px;
  box-sizing: border-box;
  
  /*--scrollを指定--*/
  overflow-x: scroll; /*--横方向をスクロールを表示--*/
  overflow-y: hidden; /*--縦方向をスクロールを非表示--*/
  white-space:nowrap;
}

autoの指定方法

autoとは、
ブラウザの設定に合わせ、多くの場合はスクロールバーが表示されます。
基本的にはscrollと同じようにスクロールで表示されます。
※ブラウザに依存してしまう可能性があるため、様々な端末、ブラウザで表示をチェックしましょう。

autoの指定方法

ホームページ制作、名刺制作、ロゴ制作など、
デザインをする際には配色は欠かせない
要素の1つになってきますよね。
私も、配色で悩んだ経験はたくさんあります。

<p>ホームページ制作、名刺制作、ロゴ制作など、<br>
デザインをする際には配色は欠かせない<br>
要素の1つになってきますよね。<br>
私も、配色で悩んだ経験はたくさんあります。</p>
.txt {
  width: 380px;
  height: 120px; /*--heightを指定--*/
  background-color: #FD5E5A;
  padding: 10px;
  box-sizing: border-box;
  
  /*--autoを指定--*/
  overflow: auto;
}

まとめ

今回はこれで以上です。

POINT
  • overflowとは、ボックスからコンテンツがはみ出た際の表示方法を指定します。
  • heightを指定しなければ、overflowは指定しなくても問題ありません。
  • x=横方向、y=縦方向になります。
  • ブラウザに依存してしまう可能性があるため、様々な端末、ブラウザで表示をチェックしましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top