FC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう！ 		FC2動画
自分で撮った動画を公開！共有！携帯でも利用できる！！ 		FC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう！ 		FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう！
TOP > タグのお勉強 > title − スクロールバーをつくる
[Edit][NewEntry] [Admin]

スクロールバーをつくる

スクロールバーのつくり方

スクロールバーとはこのブログを見ている時に、あなたのパソコンのブラウザの一番右に上下に動かして、上から下まで見る事ができるようになるバーの事です。つまり記事などが長くて短く表示したい時に、スクロールバーを作ると少ないスペースで見せる事ができます。

では説明していきたいと思います。


<textarea rows="5" cols="45"
style="border-style:solid;
padding:4px;background:#FAEBD7;
scrollbar-base-color:#FF0000; 
scrollbar-face-color: #FF0000;
scrollbar-track-color:#444444;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #CCCCCC;
scrollbar-darkshadow-color: #666666; 
scrollbar-arrow-color: #660000;">
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く
</textarea>
 

上から順番に説明していきます。
・textareaはスクロールバーの基本です。
・rows="5"……………………縦の段数を数字で指定します。 
・cols="45" …………………横の幅の長さを数字で指定します。
・style="border-style:solid;" …枠線の種類を指定できます。
（線の種類は実践-solid・二重線-double・点線-dotted・なし-none）
・padding:4px;………………枠の中の余白を量を指定できます。
・background:#色;………枠の中の背景の色を決める事ができます。
●●●scrollbar-・・・・ここからはスクロールバーの色指定●●● 
・scrollbar-base-color:#色;  　　 スクロールの全体的な色を指定 
・scrollbar-face-color:#色;  　　 スライドさせる部分の色
・scrollbar-track-color:#色;  　  スライドさせる部分の背景の色
・scrollbar-3dlight-color:#色;    外側の立体の明るい部分の色
・scrollbar-highlight-color:#色;  内側の立体の明るい部分の色
・scrollbar-shadow-color:#色; 　  内側の立体の暗い部分の色
・scrollbar-darkshadow-color:#色; 外側の立体の暗い部分の色
・scrollbar-arrow-color:#色;      矢印部分の色を指定
スクロールバーの色の場所が、文字の説明だけではわかり辛いという人は、詳しい場所が画像付きでこちらで説明されています。

※注意点
・scrollbar-base-colorは上記の様に個々に細かく設定されていたら、細かい方が優先するので意味がなくなります。
・また、基本のscrollbar-base-colorだけや、個々の細かい設定は全部設定しなくても表示されるので、base-colorとarrow-colorだけでも大丈夫です。ちなみに何1つ指定しないとノーマルなものになります。
・スクロールバーへの色の設定は基本的にIEでしか反映されません。

簡単に色を設定するには

スクロールバーの色を変えたいけど、めんどくさいという方はスクロールバー専門街に行けば沢山のスクロールバーがあるので、該当部分を張り替えて外枠だけを自分で変えれば簡単にできますよ。

自分で選んで色を変えたいという方は、スクロールバー色設定に行けばそんなに苦労せずに目で確認しながら色を決めれます。

もっとスクロールバーを飾る方法


<table cellpadding="3" 
style="border:ridge 4px #66cc00;">
<tr><td bgcolor="#66cc33">
<!--スクロール始まり-->
<textarea rows="5" cols="35" style="background:#ffffff;
border-style:none;line-height:150%;
scrollbar-face-color: #00CC00;
scrollbar-arrow-color: #a0ffa0;
scrollbar-face-color: #309030;
scrollbar-3dlight-color: #207020;
scrollbar-darkshadow-color: #005000;
scrollbar-highlight-color: #80c080;
scrollbar-shadow-color: #308030;">
ヌル
文字を書く
</textarea>
<!--スクロール終わり-->
</td></tr>
</table>

テーブルタグとあわせて使うと、自分で色々アレンジできるのでデザイン豊かなスクロールバーができます。<td>〜</td>の間にスクロールバーのtextareaタグを入れればいいだけです。
そしてこの様に文字と文字との行間を広げたければtextareaのSTYLEの後ろにline-height:150%;を付け加えると文字間隔が広がります。

関連ページ）
・スクロールバーをつくる
・スクロールバーで囲う


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★　　[アフィリエイトとは？]
リンクシェア
の詳細はこちら
 エーハチネット
の詳細はこちら
 ﾊﾞﾘｭｰｺﾏｰｽ
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20060429 |
  • さん ＠管理人 #
  • [Edit]
公式仕様にはありませんのでご注意
　scrollbar関連のプロパティは基本的にインターネットエクスプローラ専用です。無視するユーザーエージェントもありますから、かならずしも設定が反映されるとは限りませんのでご注意ください。

参考資料（下記に記述がないプロパティは非公式と考えてよいでしょう）：
http://www.scollabo.com/banban/ref/css.html
http://www.lucky-bag.com/appendix/css-property/css-property-list_ja.html

CSS Level2　仕様書和訳：
http://www.y-adagio.com/public/standards/tr_css2/toc.html
  • 20060620 |
  • Jさん ＠管理人 #zTzwXBXw
  • [Edit]
Re；公式仕様にはありませんのでご注意
注意書きが必要でしたね。少しずつ直していきたいと思います。
  • 20060620 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/94-0aae6f8c   

HOME | ▲

Template Designed by DW99