簡モ：スクロールバーの応用

 

 

 

　簡単モード　

 

 

スクロールバーの応用

 

 

 

・下記サンプルの▼カラ▲マデを「コピー」して、

　簡単モードの投稿画面に「貼り付け」てから文章入力してください。

 

・スクロール枠のサイズ調整も行えます。（ □ をドラッグして調整します。）

 

＜　注意　＞

　　ＩＥ以外のブラウザには、反映しません。

 

 

■　スクロールバー　透明指定

※　サンプル　（コピーで使用可能です。）

 

 ▼

文章

 

 

 

 

 

▲

 

※　HTML　入力例

▼
<div style="overflow:auto;

scrollbar-arrow-color: none ;
scrollbar-face-color:  #eeeeee;
scrollbar-track-color: #eeeeee;
filter:chroma(color=#eeeeee);
border:solid 1px #999999;
width:450px;height:150px;
font-size:12pt;color:#663333;
font-family:ＭＳ Ｐゴシック;">
<div align="center">

<br>
文章

<br><br>
</div></div>
▲

scrollbar-arrow-color:     none   ;　　矢印（▼）の色を指定する。
scrollbar-face-color:      #eeeeee;　　透明指定により透明になる。
scrollbar-track-color:     #eeeeee;　　透明指定により透明になる。　　

filter:chroma(color=#eeeeee);　   　　　　透明にする色を指定する。

【注意】

文字や画像に透明指定と同じ色（#eeeeee）色が使用されていた場合は、文字や画像も透過処理されます。（画像は虫食い状態になります。）

 

 

 

■　スクロールバー　半透明指定

※　サンプル　：　不透明度70％　　（コピーで使用可能です。）

 

    ▼

文章

▲

 

※　HTML　入力例

▼
<div style="overflow:auto;
scrollbar-arrow-color: #ff0000;
scrollbar-face-color:  #ffcccc;
scrollbar-track-color: #eeeeee;
filter:chroma(color=#eeeeee)alpha(opacity=70);
border:solid 1px #ffaaaa;
width:450px;height:150px;
font-size:12pt;color:#663333;
font-family:ＭＳ Ｐゴシック;">
<div align="center">

<br>
文章

<br><br>
</div></div>
▲ 

scrollbar-arrow-color:　   #ff0000;　 矢印（▼）の色を指定する。
scrollbar-face-color:　　　#ffcccc;　 スクロールバーの表面の色を指定する。

scrollbar-track-color:　　 #eeeeee;   透明指定により透明になる。

filter:chroma(color=#eeeeee)alpha(opacity=70);　透明にする色を指定する。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　不透明度(%)を指定する。(0〜100）

 

スクロールバーだけの半透明ができなかったー

 

 

【注意】

文字や画像に透明指定と同じ色（#eeeeee）が使用されていた場合は、文字や画像も透過処理されます。（画像は虫食い状態になります。）

スクロールバー内の文字や画像、全てが半透明になります。

 

 

 

ＨＴＭＬの作成方法

 

Ｆｉｌｔｅｒの機能説明

 

無断使用は、ご遠慮ください。

 

既に使用されている方もおられますが、記事に上げておきます。

 

Chｒｏｍａの別の使い方を試していますが、上手くいってません。

スクロールバーでは上手く反映しているのに、

別の場所に指定した場合、反映しないのはなぜだ〜〜〜。

指定方法が間違っているのかなー？

出来そう思えたのに出来ないよ〜〜〜〜。