再挑戦への記録☆目指せ☆ちょこちょこアフィリエイター☆

スクロールバー

《ＨＴＭＬタグの基本知識ＩＮＤＥＸ》

いろいろタグ	テキスト装飾	フォント	テキスト（おまけ）	バナーリンクの貼り方	アクセスアップ	水平区切り線
文字を囲む線	画像の枠	テーブルタグ	豆知識	色の名前	画像リンクの方法	楽天友達の輪

１.
右記のタグソースは、この枠のものです。
枠線の色は変更できます。
文章が指定された高さに満たない場合は、スクロールバーが現れない設定にしてあります。
これは、普通のスクロールバーがついた枠です。
段階的にスクロールバーをデザインしてみましょう

ここに文字などを入れて下さいね。

※上記のタグソースはコピペＯＫです。

２.
スクロールバーの色を変更してみました。色の指定は変更できます。

文章が指定された高さに満たない場合は、スクロールバーが現れない設定にしてあります。

※ＩＥ6.0でしか動作確認していないので、ご了承くださいね。

<p style="width:280px;height:150px;overflow:auto;text-align:left;padding:10px;border-style:solid;border-width:1px;border-color:#ff3399;scrollbar-bace-color:#ffccff;scrollbar-arrow-color:#ffccff;scrollbar-face-color:#ffccff"> ここに文字などを入れてくださいね。

※上記のタグソースはコピペＯＫです。

３.
スクロールバーの影の色を変更してみました。色の指定は変更できます。

文章が指定された高さに満たない場合は、スクロールバーが現れない設定にしてあります。

※ＩＥ6.0でしか動作確認していないので、ご了承くださいね。

<p style="width:280px; height:150px;overflow:auto;text-align:right;padding:10px;border-style:solid;border-width:1px;border-color:#ff3399;scrollbar-bace-color:#ffccff;scrollbar-arrow-color:#ffccff;scrollbar-face-color:#ffccff;scrollbar-3dlight-color:#ff3399;scrollbar-darkshadow-color:#ff3399;scrollbar-shadow-color:#ffffff"> ここに文字などを入れてくださいね。

※上記のタグソースはコピペＯＫです。

４.
背景画像を挿入＆固定します。

文章が指定された高さに満たない場合は、スクロールバーが現れない設定にしてあります。

※ＩＥ6.0でしか動作確認していないので、ご了承くださいね。

ちょっとみにくいですねぇ・・・ごめんなさーい！！

width（幅）とheight（高さ）の
数字を変更すれば
いろいろと用途が広がりますね。
日記に使うときはwidthを600に
設定してください。
heightは、好きな高さで！！

<p style="width:280px; height:150px;overflow:auto;text-align:right;padding:10px;border-style:solid;border-width:1px;border-color:#ff0000;scrollbar-bace-color:#ffffff;scrollbar-track-color:#ffffff;scrollbar-arrow-color:#ff0000;scrollbar-face-color:#ffffff;scrollbar-highlight-color:#ff0000;scrollbar-3dlight-color:#ffffff;scrollbar-darkshadow-color:#ffffff;scrollbar-shadow-color:#ff0000;background-attachment:fixed;background-image:url(http://からはじまる画像のＵＲＬを入れる);background-position:left bottom;background-repeat:no-repeat">ここに文字などを入れてくださいね。

※上記のタグソースはコピペＯＫです。ここでは文字色を「chocolate」にしています。

５.どれをどういじれば色が変わるのか・・・
実験してみたいと思います。
文章が指定された高さに満たない場合は、
スクロールバーが現れない設定にしてあります。

※ＩＥ6.0でしか動作確認していないので、ご了承くださいね。
あくまでも実験中です。何だかよくわからないものになってます・・・。

border-color:#000000←（黒・・・外枠の線）
scrollbar-bace-color:#ffffff←（trackのを消すと陰のついた色が出てくる）
scrollbar-track-color:#ffff99←（黄色・・・#ffffffにすると白に）
scrollbar-arrow-color:#9900ff←（紫・・・三角の部分）
scrollbar-face-color:#ffccff←（ピンクの部分）
scrollbar-highlight-color:#660000（茶色・・・上のふち）
scrollbar-3dlight-color:#ff0033（赤系・・・上側の陰）
scrollbar-darkshadow-color:#ff0000（赤・・・下側の陰）
scrollbar-shadow-color:#3399ff（水色・・・下のふち）

※width（幅）とheight（高さ）の数字を変更すれば
いろいろと用途が広がりますね。
日記に使うときはwidthを600に設定してください。
heightは、好きな高さで！！

<p style="width:280px; height:150px;overflow:auto;text-align:right;padding:10px;border-style:solid;
border-width:1px;border-color:#ff0000;scrollbar-bace-color:#ffffff;scrollbar-track-color:#ffff99;scrollbar-arrow-color:#9900ff;scrollbar-face-color:#ffccff;scrollbar-highlight-color:#660000;scrollbar-3dlight-color:#ff0033;scrollbar-darkshadow-color:#ff0000;scrollbar-shadow-color:#3399ff;background-attachment:fixed;background-image:url(http://からはじまる画像のＵＲＬを入れる);background-position:left bottom;background-repeat:no-repeat">ここに文字などを入れてくださいね。

※上記のタグソースはコピペＯＫですが、画像のＵＲＬはご自分のＰＣに保存してあるものを入れてくださいね。

いろいろな
色やデザインの
スクロールを
お勉強していきましょう
あわせて「背景画像の固定」についても
お勉強してみたいと思います。
スクロールしても
背景は固定されます。
テキストは
スクロールに応じて移動します。
・・・・・・・

・・・・・・・

こちらは
指定してあるheight（高さ）を
超えると、スクロールが
現れるようになっています。

こんなこともできるよ。
四角の部分の枠が片側消えてるでしょ。

いろいろ実験しながらやっていくと
自分のものになっていくよ。
背景は固定されてます。
テキストは
スクロールに応じて移動します。
・・・・・・・

・・・・・・・

今回のお勉強の参考文献
「ＨＴＭＬ＆スタイルシート　レッスンブック」
「ホームページ作成Tipテクニック」

ここに文字などを入れてくださいね。
ここに文字などを入れてくださいね。
ここに文字などを入れてくださいね。
ここに文字などを入れてくださいね。
ここに文字などを入れてくださいね。
ここに文字などを入れてくださいね。
ここに文字などを入れてくださいね。
ここに文字などを入れてくださいね。
ここに文字などを入れてくださいね。
ここに文字などを入れてくださいね。

<p style="width:280px;height:100px;overflow:auto;text-align:left;padding:10px;border-style:solid;border-width:1px;border-color:#ffcccc;scrollbar-bace-color:#ffffff;scrollbar-arrow-color:#ffffff;scrollbar-face-color:#ffffff;scrollbar-shadow-color:#ffffff;"> ここに文字などを入れてくださいね。 
ここに文字などを入れてくださいね。 
ここに文字などを入れてくださいね。 
ここに文字などを入れてくださいね。 
ここに文字などを入れてくださいね。 
ここに文字などを入れてくださいね。 
ここに文字などを入れてくださいね。 
ここに文字などを入れてくださいね。 
ここに文字などを入れてくださいね。 
ここに文字などを入れてくださいね。

ジャンル別一覧