１．マウスカーソルを変更する

cursor : キーワード、画像のURL（.cur.aniのどちらか）;

＜キーワード＞
　auto：ブラウザが自動的に指定
　crosshair：十字カーソル
　default：標準的なカーソル（矢印）
　pointer：アンカー上にあるときのカーソル
　move：対象が移動可能であるときのカーソル
　e-resize：ウィンドウサイズ変更（右方向）時のカーソル
　ne-resize：ウィンドウサイズ変更（右上方向）時のカーソル
　nw-resize：ウィンドウサイズ変更（左上方向）時のカーソル
　n-resize：ウィンドウサイズ変更（上方向）時のカーソル
　se-resize：ウィンドウサイズ変更（右下方向）時のカーソル
　sw-resize：ウィンドウサイズ変更（左下方向）時のカーソル
　s-resize：ウィンドウサイズ変更（下方向）時のカーソル
　w-resize：ウィンドウサイズ変更（左方向）時のカーソル
　text：文字を範囲指定するカーソル
　wait：時間のかかる作業を行っているときのカーソル
　help：ヘルプを利用できるときに表示されるカーソル

(例)
<TABLE border="1"><TBODY><TR>
<TD style="cursor:auto;">auto</TD>
<TD style="cursor:crosshair;">crosshair</TD>
<TD style="cursor:default;">default</TD>
<TD style="cursor:pointer;">pointer</TD>
</TR><TR>
<TD style="cursor:move;">move</TD>
<TD style="cursor:e-resize;">e-resize</TD>
<TD style="cursor:ne-resize;">ne-resize</TD>
<TD style="cursor:nw-resize;">nw-resize</TD>
</TR><TR>
<TD style="cursor:n-resize;">n-resize</TD>
<TD style="cursor:se-resize;">se-resize</TD>
<TD style="cursor:sw-resize;">sw-resize</TD>
<TD style="cursor:s-resize;">s-resize</TD>
</TR> <TR>
<TD style="cursor:w-resize;">w-resize</TD>
<TD style="cursor:text;">text</TD>
<TD style="cursor:wait;">wait</TD>
<TD style="cursor:help;">help</TD>
</TR></TBODY></TABLE>

（結果）
＊それぞれのキーワードにカーソルを合わせると、形が変わります。
auto crosshair default pointer
move e-resize ne-resize nw-resize
n-resize se-resize sw-resize s-resize
w-resize text wait help



２．スクロールバーの色を設定する

scrollbar-base-color : 色指定; スクロールバーのベース色を指定します。

＜色指定＞
　#RRGGBB・・・・・R（赤）、G（緑）、B（青）の部分に２桁ずつの英数字（1からF）を指定。
　#RGB・・・・・・・・ 上の方法で２桁が同じ場合に省略して指定。
　　　例： #11aa66 → #1a6 、#0055ff → #05f
　rgb(R,G,B)・・・ ・R（赤）、G（緑）、B（青）の部分に 0〜255 の数字を指定。
　rgb(R%,G%,B%)・・R（赤）、G（緑）、B（青）の部分に 0〜100 の数字で％指定。
　カラーネーム・・るカラーネームを記入する。
　　　例： red　blue　green　yellow　orange　purple　pink　black　white
　色指定に関してはHTML講座のこちらも参照してみてください

スクロールバーの属性は<body>タグに記述します。

scrollbar-track-color : 色指定;　　スクロールバーを移動するスペース
scrollbar-face-color : 色指定;　　スクロールバーの本体
scrollbar-arrow-color : 色指定;　　左右の矢印部分
scrollbar-highlight-color : 色指定;　　矢印を囲む枠線（光の当たる部分）
scrollbar-shadow-color : 色指定;　　矢印を囲む枠線（影の部分）
scrollbar-3dlight-color : 色指定;　　矢印を立体化させている部分（光の当たる部分）
scrollbar-darkshadow-color : 色指定;　　矢印を立体化させている部分（影の部分）

(例1)
<body style="scrollbar-base-color :red">
(例2）
<body style="
scrollbar-track-color :olive;
scrollbar-face-color : gray;
scrollbar-arrow-color : yellow;
scrollbar-highlight-color : blue;
scrollbar-shadow-color : green;
scrollbar-3dlight-color : purple;
scrollbar-darkshadow-color :black;">

（結果１）

（結果２）




３．IMEをコントロールする

ime-mode:キーワード;

＜キーワード＞
　active:初期値が日本語入力モードになります
　inactive:初期値が英数字入力モードになります
　disabled:英数字入力モードになります。IMEによるモードの変更ができません。
　auto:IMEに影響はない（デフォルト）

(例)
日本語　<input type="text" size="30" style="ime-mode: active;"><BR>
英語　 　<input type="text" size="30" style="ime-mode: inactive;"><BR>
英語のみ<input type="text" size="30" style="ime-mode: disabled;"><BR>

（結果）
日本語　
英語　 　
英語のみ



４．印刷時の改ページを指定する。

page-break-after:キーワード;　　　要素の直前の改ページ
page-break-before:キーワード;　　　要素の直後の改ページ

＜キーワード＞
　always：改ページを行う
　empty-string：改ページを行わない
　auto：改ページを制御しない（デフォルト）

(例)
<div style="page-break-before:always;">



５．はみ出た部分の表示の仕方を指定する
overflow:キーワード; はみ出た部分の表示の仕方を指定する

＜キーワード＞
hidden：文字がエリアからはみ出た場合は表示しない。
scroll：スクロールバーをつけることができる。
visible：文字がはみ出したら、はみ出たまま表示する。
auto：自動で設定する。

(例)
<div style="width:200px; height:50px; background-color:#ff6; overflow:scroll;">
(scroll)ある程度文章が長くないと違いが確認できないのですが、いったい何を書けばよいのでしょうか。</div><BR>
<div style="width:200px; height:50px; background-color:#ff6; overflow:hidden;">
(hidden)ある程度文章が長くないと違いが確認できないのですが、いったい何を書けばよいのでしょうか。</div><BR>
<div style="width:200px; height:50px; background-color:#ff6; overflow:visible;">
(visible)ある程度文章が長くないと違いが確認できないのですが、いったい何を書けばよいのでしょうか。</div><BR>

（結果）
(scroll)ある程度文章が長くないと違いが確認できないのですが、いったい何を書けばよいのでしょうか。

(hidden)ある程度文章が長くないと違いが確認できないのですが、いったい何を書けばよいのでしょうか。

(visible)ある程度文章が長くないと違いが確認できないのですが、いったい何を書けばよいのでしょうか。





初心者による初心者のためのCSS講座_TOPに戻る