はみ出た部分をCSSでスクロールさせたい！
これまで何かをまとめるのに一覧表しても、大きすぎてうまく画面に納まりきらずに見にくくなってしまったことがありました。でも、他の人が書いたブログを見ると、表がスクロールできるようになっていてちゃんと見えるんですよね。あれいいな～。
ということで、今回は「はみ出た部分をCSSでスクロールさせたい！」というテーマで書いていきたいと思います。
- はみ出た部分をスクロールさせたい人
- CSSの勉強をしたい人
- overflowについて知りたい人、試したい人
overflowとは
overflowとは、表示する内容がボックス内に収まりきらない場合の表示方法を指定するプロパティです。
要するに、表示させたいものが大きすぎてはみ出ちゃうときは、どうやって表示させるの？ということを指定する命令です。
overflowの種類
① overflow-x: ★;
② overflow-y: ★;
③ overflow: ★;
※ ★の部分には、visible, hidden, scroll, auto のいずれかの値を書きます。
初期値は、visible です。
① overflow-x: ★;
横方向の表示方法を指定します。
② overflow-y: ★;
縦方向の表示方法を指定します。
③ overflow: ★;
横方向と縦方向をまとめて指定します。
値が2つの場合は、overflow-x、overflow-y の順に指定します。その際、値は半角スペースで区切ります。
例） overflow: scroll visible; これは
overflow-x: scroll;
overflow-y: visible; この2つと同じ意味
値が1つの場合は、overflow-x と overflow-y に同じ値が指定されます。
例） overflow: scroll; これは
overflow-x: scroll;
overflow-y: scroll; この2つと同じ意味
値の種類
① visible
② hidden
③ scroll
④ auto
① visible
収まりきらない内容をはみ出して表示します。
② hidden
収まりきらない内容は表示されません。
③ scroll
表示内容が収まる、収まらないに関わらずスクロール表示になります。
④ auto
必要に応じてスクロール表示になります。
（内容が納まる場合は、スクロールにはなりません。）
細かい動作はブラウザに依存すると思います。
overflowの使い方
See the Pen
Overflow by Ken_chan (@KentaroT)
on CodePen.
上はコード例です。HTMLとCSSのタブを押して、それぞれ確認してみてください。
CSSの auto の部分を hidden にかえたらどうなるかなど、いろいろ変えてみるとどのように動作するかわかりやすいと思います。
いじってみるとわかると思いますが、元々テキストは画面やデザインに合わせて改行したり回り込んだりするので、あまり overflow を使う必要はないかもしれません。div 要素などで、ボックスモデルを利用する場合に使うことが多いでしょう。
table要素に適用するときの注意点
See the Pen
Overflow table by Ken_chan (@KentaroT)
on CodePen.
table を使った表をスクロール表示させたいときは、div要素を使いましょう。id や class を設定して、直接 table要素に overflow を指定してもスクロール表示されないからです。
いかがだったでしょうか。これを知っているだけで、ブログが全然見やすくなります。みなさんもぜひ使ってみてくださいね。
ちょっとでも参考になったら、コメントを書いていただけると嬉しいです
ブログが見やすくなっていくと、嬉しいですね！
コメント