cssでスクロール画面の作成方法

■cssでスクロール画面の作成方法

cssを使ってスクロールできる画面を作成します。
はみ出た部分をスクロールすることで、たくさんの領域をとることなくすっきりとしたレイアウトにすることができます

col1
col2
col3
col4
col5
col6
col7

こんな感じにスクロールする画面ができます。





■やり方
　やり方は簡単です。cssにoverflowといれればいいだけです！
基本は「overflow:auto;」で大丈夫です。

【例】
(test.css）
#div{
width:250px;
height:100px;
overflow:auto;
}

こんな風に書けばOK
あとはHTMLでその部分を呼び出すように書けばいいだけです。


■overflow:値
visible :領域をはみ出して表示する [初期設定]
hidden :はみ出た部分を表示しない
scroll :スクロールで表示する
auto :自動 [基本はスクロールで表示]


【例】
(1)overflow: visible;

col1
col2
col3
col4
col5
col6
col7

(2)overflow: hidden

col1
col2
col3
col4
col5
col6
col7

(3)overflow: scroll

col1
col2
col3
col4
col5
col6
col7

(4)overflow: auto

col1
col2
col3
col4
col5
col6
col7

カリスマ仲人のへの道。結婚相談業者募集！