スタイルシート

下のテキストエリアのスクロールバーのように色を付けることができます。

解りにくいですが、ソースの文字色と対応させてあります。

<BODY>や<TEXTARIA>に

STYLE="
SCROLLBAR-FACE-COLOR:表面色;
SCROLLBAR-HIGHLIGHT-COLOR:左上中色;
SCLOLLBAR-SHADOW-COLOR:右下中色;
SCLOLLBAR-3DLIGHT-COLOR:左上外色;
SCROLLBAR-DARKSHADOW-COLOR:右下外色;
SCROLLBAR-ARROW-COLOR:矢印色;
SCROLLBAR-TRACK-COLOR:背景色;"

⇒スクロールバー色カスタムツールを作ってみました。動作微妙…

カーソルを変えたいもののタグの中に

STYLE="cursor:カーソルの形"

で指定します。

下のそれぞれの文字にマウスカーソルを合わせてみてください。マウスカーソルが変わります。
【STYLE=cursor:default　通常の形（矢印）】
【STYLE=cursor:hand　手の形】
【STYLE=cursor:pointer　ポインタ】
【STYLE=cursor:help　ヘルプ】
【STYLE=cursor:wait　待機中】
【STYLE=cursor:crosshair　十字】
【STYLE=cursor:mave　移動】
【STYLE=cursor:e-resize　右リサイズ】
【STYLE=cursor:en-resize　右上リサイズ】
【STYLE=cursor:nw-resize　左上リサイズ】
【STYLE=cursor:n-resize　上リサイズ】
【STYLE=cursor:se-resize　右下リサイズ】
【STYLE=cursor:sw-resize　左下リサイズ】
【STYLE=cursor:s-resize　下リサイズ】
【STYLE=cursor:w-resize　左リサイズ】
【STYLE=cursor:text　テキスト選択】

スタイルシートでフォームに色をつけたり、枠線を変えたりと、カスタムできます。（IE4以上）

TEXT、TEXTARIA、ボタンなどは基本と同じ、枠や背景、フォントなど

例えばボタンなら

枠線の種類(border-style)
　solid-直線、double-二重線、groobe-溝線、ridge-稜線、
　inset-枠内が窪んでいるように見える、outset-枠内が盛り上がったように見える

　※border-widthを指定するとNN4.0ではバグらしきものでフォーム周辺に枠線の□が別に出来てしまいます。機能に問題はないようです。

SELECTには背景や文字色は指定できましたが、枠線やスクロールバーの指定は効きません(IE5.5で確認)
左は単色つけたセレクト、右はカラフルに
　
左のソース

<SELECT>タグにスタイルシートを指定します。

右のソース

<OPTION>にスタイルを指定しただけでは周りに白い線が残ってしまうので、<SELECT>にも指定しておきます。

上と同じものをSIZE=4にしてみました

<SELECT SIZE=4 STYLE="background-color:#BADEFE;color:#0000A0;">

ラジオボタンやチェックボックスに枠線や背景の指定をしてみると下のようになりました。
ブラウザによって色の入る場所が違います
ラジオボタン　チェックボックス

それぞれに指定したスタイル

background-color:#fff9f9;
color:#4F4FC3;
border-style:solid;
border-color:#4F4FC3;
border-width:2;

ページが切り替わるときの特殊効果を指定出ます。

<HEAD>～</HEAD>に

■部分
http-equiv="page-enter" ページに入る時
http-equiv="page-exit" ページから出る時
http-equiv="site-enter" サイトに入る時
http-equiv="site-exit" サイトから出る時

●部分
duration=切り替え時間(秒)、小数点も指定可能。

▲部分
transition=トランジション番号
23は0～22の効果がランダムで起こります。

0 (Box In)
1 (Box Out)
2 (Circle In)
3 (Circle Out)
4 (Wipe Up)
5 (Wipe Down)
6 (Wipe Right)
7 (Wipe Left)
8 (Vertical Blinds)
9 (Horizotal Blinds)
10 (Checkerboard Across)
11 (Checkerboard Down)
12 (Random Dissolve)

13 (Split Vertical In)
14 (Split Vertical Out)
15 (Split Horizotal In)
16 (Split Horizotal Out)
17 (Strips Left Down)
18 (Strips Left Up)
19 (Strips Right Down)
20 (Strips Right Up)
21 (Random Bars Horizotal)
22 (Random Bars Vertical)
23 (Random)

とりあえずどんなものかサンプルページを見て下さい
⇒縦書きページへ

<BODY>タグの中とそのすぐ内側に<DIV>タグを書いて
下記のようなスタイルを書き込みます。
赤字部分は適当に書き換えても良いですが、スタイルが崩れやすいので注意して下さい。

<BODY STYLE="margin:30;" onLoad="scrollTo(5000,0);">
<DIV STYLE="writing-mode:tb-rl;line-height:200%;
font-size:12px;letter-spacing:0.1em;
position:absolute;height:85%;">

～この間にページの内容を書きます～

</DIV></BODY>

横スクロールするようなページでも最初に右隅から呼び出されます。
相当長いページだと右隅まで行かないのでsclollToの5000の部分をもっと大きな数に変えて下さい。
スクロールしないページの場合には<DIV>のSTYLEにright:10px;
などを付け足さないとページが右寄りにならないかもしれません。

- Labo TOP -