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] リストの最初や最後だけなどに便利な擬似要素

どうも、べ〜やんです。 今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。 リスト一部だけ リストの最初や最後だけなど任意のリストだけデザインを …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

BEMを意識しよう

どうも、べ〜やんです。 今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。 HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。 BEM …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[CSS] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …