CODING

[CSS] overflowの使い方

投稿日:


どうも、べ〜やんです。

今回はCSSのoverflowの使い方を紹介します。

テキストが長いけどスペースを大きく取りたくない場合などに便利です。





overflowとは

overflowは要素からはみ出たテキストをどうするのかを指定するプロパティです。


値は4つ

値は以下の4つです。

overflow: visible;  /* デフォルト、はみ出す */
overflow: hidden;    /* はみ出た部分を非表示 */
overflow: scroll;  /* はみ出た部分を隠し+スクロール */
overflow: auto;   /* 各ブラウザの設定に従う */

visible


overflow: visible;はデフォルトの設定ではみ出す部分を、そのままはみ出た状態で表示します。

要素に高さを設定していない場合は、要素の大きさがテキストに合わせて変化するのではみ出ません。

See the Pen wvvpYPp by beeyan (@orientado) on CodePen.


hidden


overflow: hidden;ではみ出た部分を非表示にして隠します。

See the Pen oNNpapb by beeyan (@orientado) on CodePen.


scroll


overflow: scroll;ではみ出た部分を非表示にして隠し、隠れた部分をスクロールで確認できるようにします。

See the Pen mddpzxm by beeyan (@orientado) on CodePen.


横スクロール

横スクロールにしたい場合は、white-space:nowrapも指定します。

See the Pen PooEyeJ by beeyan (@orientado) on CodePen.


x軸とy軸のスクロールを別々に指定する事もできます。

IEでは常にスクロールバーが右側と下側に表示されます。

例えば横にスクロールできなくてもスクロールバーだけは表示されてしまいます。これを防ぐためにy軸をスクロール指定+x軸を非表示指定にして不要なスクロールバーを非表示にできます。

See the Pen NWWXOBz by beeyan (@orientado) on CodePen.


auto


overflow: auto;ははみ出た部分をどうするかを各ブラウザの設定に従います。ほとんどの場合にスクロール表示になるようです。

See the Pen WNNdaaK by beeyan (@orientado) on CodePen.


おわりに


今回はCSSのoverflowの使い方を紹介しました。

ブラウザによって差異があるので注意してください。特にIEではスクロールバーが常に表示されたりデザイン性やサイトの雰囲気に大きく影響します。



-CODING
-, ,

執筆者:


comment

関連記事

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …