クイックホームページメーカーやWebサイト作成に関する情報サイト。QHM専門のリンク集・デザインカスタマイズを中心に情報を公開中！

スクロール付ボックスを設置する

解説

2009-02-14　「おまじない」でも使えるようになりました！！！

↓　を見てみてね！

最強のスクロール付きボックス！！

当サイトのヘッドラインと同様のスクロール付ボックスを設置します。
※外部ファイルを読み込むことはできません。

なおiframeタグによるスクロール付ボックスは様々な問題を抱えているので、
よほどの場合じゃない限り使わないほうが無難です。

<iframe src="□□□" width="○○○" height="○○○"></ifame>

記述例 

#html{{
<div style="margin:0px;padding:0px;" align="left"><div
style="margin:0px;padding:0px;line-height:1.3;"><div
style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border:
2px groove #696969;text-align:left;font-size:100%;height:10em;scrollbar-base-color:#696969;">

「ここに内容」　（「」と、このコメントは消して下さい）

</div></div></div>
}}

表示例


※スクロールバーの色を変えたい時は、「scrollbar-base-color:#696969」のところを変更して下さい。（IEしか変化しません）
※ボックスの縦幅を変えたい時は、「height:10em」のところを変更して下さい。
※ボーダー（外枠）を変えたい時（色や太さ）は、「border: 2px groove #696969」のところを変更して下さい。
（ボーダースタイルの【groove】の説明や指定は下のアドレスから確認してください
↓
http://dpura.web6.jp/dc/index.php?border-style1
※スクロールバーはボックスよりも中の内容が多くなった時（縦に長くなった時）に自動的に表れます。
「注、当然ながら、中の内容が少ない時にはスクロールバーは現れません」


基本操作 

※スクロールバーの色を変えたい時は、「scrollbar-base-color:」のところを変更して下さい。（IEしか変化しません）
※文字色を変えたい時は、「color:」のところを変更して下さい。
（「color:」の説明や指定は下のアドレスから確認してください
※背景色を変えたい時は、「background-color:」のところを変更して下さい。
（「background-color:」の説明や指定は下のアドレスから確認してください
※ボックスの縦幅を変えたい時は、「height:」のところを変更して下さい。
（「height:」の説明や指定は下のアドレスから確認してください
※ボックスの横幅を変えたい時は、「width:」のところを変更して下さい。
（「width:」の説明や指定は下のアドレスから確認してください
※ボーダー（外枠）を変えたい時（色や太さ）は、「border:」のところを変更して下さい。
（「border:」の説明や指定は下のアドレスから確認してください
※スクロールバーはボックスよりも中の内容が多くなった時（縦に長くなった時）に自動的に表れます。
「注：当然ながら、中の内容が少ない時にはスクロールバーは現れません」

応用 

コピー＆ペーストで使える''スクロール付ボックス''を３０種類ご用意しました。
一番自分のサイトに合っているのを選んだ上でカスタマイズしてご利用下さい。

スクロール付ボックスを設置する