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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

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

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

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …