スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スクロールバー付きのBOX

共有プラグイン *スクロール付きのBOX(Div=ブロック要素)*
登録日:2006.07.05

width:450px; × height:150px;のサンプル
スクロールバー付きのBOXサンプル
スクロールバー付きのBOXサンプル
スクロールバー付きのBOXサンプル
スクロールバー付きのBOXサンプル
スクロールバー付きのBOXサンプル
スクロールバー付きのBOXサンプル
スクロールバー付きのBOXサンプル
スクロールバー付きのBOXサンプル
スクロールバー付きのBOXサンプル

Fc2ブログ共有テンプレートの製作・配布は終了しましたが、共有プラグインに登録した*スクロールバー付きのBOX*は現在も配布中です。
ここでは*スクロールバー付きのBOX*の補足説明を少しUPしています。参考にしていただけたら幸いです。

1. スクロールバーはBOX内容領域がBOX(div=ブロック要素)の高さ(初期値150px)を超えないと表示されません。
2. コメントフォームにあるテキストエリアとは別物です。HTMLタグが使えます。
3. カスタマイズはご自由にどうぞ。ブログ以外でのご利用もご自由にどうぞ。

スクロールバー付きのBOX ⇒ 共有プラグイン登録

<div style="height:150px; overflow:auto; border:1px solid #000000; background-color:#FFFFFF; color:#000000; padding:3px; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#000000; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#000000; scrollbar-shadow-color:#000000; scrollbar-track-color:#FFFFFF;">*ここにテキストや画像を入れて下さい。BOXの高さを超えないとスクロールバーは表示されません。またお洒落スクロースバーはIEのみです。*</div>

簡易基本ver. ⇒ 共有プラグイン未登録

<div style="height:150px;overflow:auto;">*ここにテキストや画像を入れて下さい。BOXの高さを超えないとスクロールバーは表示されません。*</div>

スクロール付きのBOX ⇒ 解説

height:150px; ⇒ BOXの高さ初期値150px
overflow:auto; ⇒ このプロパティは削除しない
border:1px solid #000000; ⇒ BOXを囲む外側の枠線
background-color:#FFFFFF; ⇒ BOX内容領域の背景色
(このプロパティを削除又は background-color:transparent; にすると背景色透過
color:#000000; ⇒ BOX内容領域ののテキスト色
padding:3px; ⇒ BOXを囲む外枠線と内容領域間の余白
scrollbar-3dlight-color:#FFFFFF;~scrollbar-track-color:#FFFFFF; ⇒ オシャレスクロールバー/IEのみ
width:●●px; ⇒ 配布ソースには含んでないがwidthプロパティを追加することで横幅領域の範囲指定可

※その他のプロパティも追加可能。用途別にidやclassを付けて使い分けてもOK。

FC2Ad

 「AZ+ 歪リン」

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。