【CSS】CSSの「overflow:scroll」でボックス領域にスクロールバーを表示させる方法。

2013/05/29 2017/09/13

決まったサイズのDIV領域に「overflow」を設定し、スクロールバーを表示させて狭い範囲でも有効に利用する方法です。

概要

作成した、とあるシステムの管理画面の一覧画面の一部分。
表示させるサイズが決まっているところに、量が多いテキストを表示させたいって場合に使っています。

では早速。

HTMLは、適当なDIVを設置して下さい。
今回、クラス名は class="box1" とでもしておきます。

.box1 {
	height: 500px
	overflow: scroll;
}

.box1 {

height: 500px

overflow: scroll;

}

これで、縦横のスクロールバーが表示されます。
縦だけでいいのに！　ってな場合は、以下を追記してください。

	overflow-x: hidden;

1	overflow-x: hidden;

これで横方向のスクロールバーが消えます。
お手軽ですね！

: 【CSS】改行が入っても文字の頭をそろえる（2行目以降を1文字下げる）方法

箇条書きや注釈に「・」や「※」をよく使うと思いますが、改行すると記号が回りこんで埋もれてしまいがちです。
今回は記号ではありませんが、利用規約をHTML化する作業をしていた時に「(1)」などがやはり回りこんでいたのが非常に気になったので、それを回避、揃える方法を備忘録としてポストします。

: 【CSS】一番単純でスッキリしているtable装飾用のCSS

タイトル通り、一番単純でスッキリしているテーブルのスタイル指定。
自分へのコピペ用としてポストします。

: 【CSS】角丸を表示する時のベンダープレフィックス -moz-border-radius が Firefox で効かなくなっていた件

本当に今更なことなのですが、CSS3で角丸の作り方。Firefox13以降では仕様が変わったために、プレフィックスを省いた書式が必要になっています。そのまとめです。

: 【CSS】CSS3のflexboxで簡単に2カラムのレイアウトを作ってみる

ウェブサイトを作成する際、2カラムや3カラムのレイアウトにしようとすると float や position を使わないと出来ませんでしたが、CSS3では数行のコードで実現可能。忘備録としてポストしておきます。