こんにちは、最近ミーアキャットの可愛さに気付き、将来飼いたいなって思ってしまったみもざです。
さて、本題に入りたいと思います。
CSSを学んでいる方は理解できるかと思いますが、CSSにはたくさんの種類のプロパティがあり、それぞれのプロパティが違った働きをすることによってHTMLに装飾することができます。
そこで今回は、CSSのプロパティの一つである「overflow」の
・overflowの基本的な使い方
・overflowの使い方〜実践〜
について説明します。
overflowとは
overflowの読み方
「overflow」は、「オーバーフロー」という読み方をします。
overflowとは、「入れ過ぎてしまったよ」「入り切らないよ」といった意味になります。
CSSでのoverflowとは
CSSでのoverflowとは、CSSのプロパティの一つで、要素のボックスからはみ出した時、はみ出した部分をどうするかを設定できる役割を持っています。
言葉だけではイメージを掴みにくいと思うのでデモを用意しました。
See the Pen
overflow_sample1 by mimosa (@im_mimosa)
on CodePen.
オレンジの部分が要素のボックスで、「ABCD」までしかオレンジボックスに収まっていません。
「E」以降ははみ出してしまっています。その時に、「overflow」を使ってはみ出している「E」以降をどうしていくかを指定していきます。
overflowで利用できる値
overflowでは以下の４つの値を使うことができます。
| 値 | 説明 |
|---|---|
| visible | 初期値で、要素のボックスからはみ出した部分が、はみ出したまま表示されます。 |
| hidden | 要素のボックスからはみ出した部分が、隠れて（非表示）要素のボックスに収まっている部分だけ表示されます。 |
| scroll | 「scroll」は、要素のボックスからはみ出した部分が隠れ、スクロールすればはみ出した部分が表示されます。 |
| auto | 「auto」は、要素のボックスからはみ出た部分をどう処理させるかをブラウザ側に任せます。基本的には、「scroll」で指定した時と同じ様に、要素のボックスからはみ出た部分はスクロールをして表示されるようになります。 |
対応ブラウザ
overflowの対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
overflowの基本的な使い方
overflowの使い方
「overflow」は以下のように記述し使います。
|
1 2 3 |
セレクタ{ overflow: 値; } |
※セレクタには、スタイルを適用させたい要素のタグ名や、ID名、クラス名を入れます。
イメージを掴みやすいように、overflowの値別にデモを用意させていただきました。ぜひ参考にしてくださいね。
visible
See the Pen
overflow_visible by mimosa (@im_mimosa)
on CodePen.
overflowを指定していますが、値は初期値の「visible」なので、オレンジの部分からはみ出したままですよね。
See the Pen
overflow_hidden by mimosa (@im_mimosa)
on CodePen.
「overflow」を指定していない時や、「overflow」の値を「visible」にしている時にはみ出して表示されていた「E」以降が表示されていませんよね。
scroll
See the Pen
overflow_scroll by mimosa (@im_mimosa)
on CodePen.
要素のボックスからはみ出た部分は一見、非表示されているように見えますが、ボックス内にカーソルを当ててスクロールしてみると、ボックスからはみ出た部分も見れるようになります。
auto
See the Pen
overflow_auto by mimosa (@im_mimosa)
on CodePen.
要素のボックスからはみ出した部分はスクロールをして表示されるようになっています。
overflowと類似するプロパティとの違い
overflowと類似するプロパティは、overflow-xとoverflow-yがあります。
overflowと、overflow-xとoverflow-yの違いはなんでしょうか？
overflowとoverflow-yの違い
overflow-yは、内容が要素のボックスの中からはみ出した時に、縦にはみ出した部分をどう表示させるかを指定します。
なので、スクロールバーは縦のみの表示となります。
overflowとoverflow-xの違い
overflow-xは、内容が要素のボックスの中からはみ出した時に、横にはみ出した部分をどう表示させるかを指定します。
なので、スクロールバーは横のみの表示となります。
実際にoverflowを使ってみよう
はじめに
実践の前に、実践で使うHTMLの一部分とoverflow以外のcssの部分だけここに記述したいと思います。
【実践で使うHTMLのコードの一部】
|
1 2 3 4 5 6 7 8 |
<p class="practice"> 思考に気をつけなさい、それはいつか言葉になるから。 言葉に気をつけなさい、それはいつか行動になるから。 行動に気をつけなさい、それはいつか習慣になるから。 習慣に気をつけなさい、それはいつか性格になるから。 性格に気をつけなさい、それはいつか運命になるから。 マザー・テレサ </p> |
【実践で使うCSSのコードの部分】
|
1 2 3 4 5 |
.practice { width: 150px; height: 100px; background: orange; } |
上記は、サンプルなので自分で好きなコードを記述してもらっても構いません。
【実践１】要素のボックスからはみ出した部分を非表示にしてみよう
実践の一つ目は、要素のボックスからはみ出した部分を非表示にしてみましょう。
出来ましたか？
はみ出した部分を非表示にしたいときは、「hidden」を使うのでしたね。
以下実践１の解答デモになります。
See the Pen
overflow_practice1 by mimosa (@im_mimosa)
on CodePen.
【実践２】要素のボックスからはみ出した部分をスクロールさせて表示させてみよう
実践の二つ目は、要素のボックスからはみ出た部分をスクロールさせて表示させてみましょう。
出来ましたか？
はみ出た部分をスクロールで表示させたいときは、「scroll」を使うのでしたね。
以下実践２の解答デモになります。
See the Pen
overflow_practice2 by mimosa (@im_mimosa)
on CodePen.
まとめ
いかがでしたか？今回は、overflowについてのお話でした。
要素のボックスからはみ出たときは、「overflow」を使って、はみ出た部分をそのまま表示させたり、非表示にさせたり、スクロールを使って表示させたりすることが出来るということがわかりました。
要素のボックスからはみ出た部分をどうするか指定するときには、「overflow」をぜひ使ってみてくださいね。
この記事が、プログラミング初学者に参考になれば幸いです。
