cssを使ってスクロールできる画面を作成します。
はみ出た部分をスクロールすることで、たくさんの領域をとることなくすっきりとしたレイアウトにすることができます
col1
col2
col3
col4
col5
col6
col7
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
col2
col3
col4
col5
col6
col7
(2)overflow: hidden
(3)overflow: scroll
col1
col2
col3
col4
col5
col6
col7
col2
col3
col4
col5
col6
col7
(4)overflow: auto
col1
col2
col3
col4
col5
col6
col7
col2
col3
col4
col5
col6
col7
【インターネット>ホームページ作成の最新記事】