2010年05月15日

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

Color Me Shop! pro 待望の新サービス☆『ロケットネット』
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。