項目を作る２

100万ポイント山分け！1日5回検索で1ポイントもらえる

594097

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

***　項目を作る２　***

今日は、前回作った項目に、効果を付けるタグを紹介していきますネ☆彡

★背景に色を付ける★

↓ココで使うタグはコレ

ここにリスト

★…枠（スクロール）の横幅
☆…　　　〃　　　　の縦幅
#******…背景色のRGB

↑上記の幅を、『横…200・縦…100』と入れ、
『ココにリスト』の所に表示される文字を、このページのリンク先にし、
背景色を『#FAEBD7』で書いて見てみると…

項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２

こんな感じになります。リンク先のタグは通常の文字と同じで、<a href="http://">文字</a>ですよ♪

合わせて、横のスクロールをナシにする『 overflow-y:scroll;overflow-x:auto; 』
…を付け加えてみると、このようなタグになります。

↓↓↓

項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２

段々長くなりますよぉ～★　(^_^;)

***スクロールの色を指定する***

↓ココで使うタグはコレ

かなり長くなってしまいますので、そのままコピーして使って下さい★
それぞれの色を指定するには、下記の通りです｡｡｡
（確認しながら変えた方が早いと思いますが…笑）

★	バーの色
☆	バーが掛かっていない所の色
▲	三角の部分の色
●	バーの、左・上枠のハイライトカラー
□	バーの、右・下の枠色
○	バーの、左・上の枠色
■	バーの、右・下枠のダークカラー

●と○・■と□については、変えてもそれほど変化がないので、
同色で良いと思いますが、3D調にしたいなら　細かく変えてみて下さい｡｡｡
とりあえず、↓のように入れて効果を見てみると…

<p style="width:400;height:100;overflow-y:scroll;overflow-x:auto;background-color:#faebd7;
scrollbar-face-color: #996633 ; scrollbar-track-color: #ffffff ;
scrollbar-arrow-color: #ffffff ; scrollbar-highlight-color: #ffffff ;
scrollbar-shadow-color: #ffffff ; scrollbar-3dlight-color: #000000 ;
scrollbar-darkshadow-color: #ffffff ;">
<a href="http://plaza.rakuten.co.jp/tamachan/002044">項目を作る２</a>

↓↓↓

項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２

こうなる訳です。。。ε- (￣、￣A) フゥー長い…

さらに、枠を付ける『border-style:inset;』加えてみると…

<p style="width:400;height:100;overflow-y:scroll;overflow-x:auto;background-color:#faebd7;
scrollbar-face-color:#996633; scrollbar-track-color:#ffffff;
scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff; scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#ffffff; border-style:inset; ">
<a href="http://plaza.rakuten.co.jp/tamachan/002044">項目を作る２</a>

↓↓↓

項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２
 項目を作る２