FC2ブログ
02.13
Fri
・カーソルの形状を変更する方法


今回はカーソルの形状を変更する方法について学んでいきます。




リンク部分にstyle=" "を追加し、defaultの部分を変更します。


<a href="リンク先URL.html" style="cursor:default">~</A>

標準カーソル。矢印の場合が多い。



「~」には、リンクであることがわかる言葉や画像をいれます。




キーワード
使用例
説明

auto

crosshair

default

hand

move

text

wait

help

n-resize

s-resize

w-resize

e-resize

ne-resize

nw-resize

se-resize

sw-resize

progress

not-allowed

all-scroll


楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

楽天市場TOPページへ

ブラウザが自動で指定。

十字カーソル。

標準カーソル。矢印の場合が多い。

指型カーソル。

move指定物移動可能時のカーソル。矢印の十字。

テキスト範囲選択時のカーソル。

読み込み時、処理時のカーソル。

ヘルプ利用可時のカーソル。

ウインドウ上のサイズ変更時のカーソル。

ウインドウ下のサイズ変更時のカーソル。

ウインドウ左のサイズ変更時のカーソル。

ウインドウ右のサイズ変更時のカーソル。

ウインドウ右上のサイズ変更時のカーソル。

ウインドウ左上のサイズ変更時のカーソル。

ウインドウ右下のサイズ変更時のカーソル。

ウインドウ左下のサイズ変更時のカーソル。

進行中カーソル。※IE6.0以上のみ対応

禁止カーソル。※IE6.0以上のみ対応

全スクロール時のカーソル。※IE6.0以上のみ対応


このタグを<HEAD>~</HEAD>の間に入れてください。
ページ全体に適用されます。

<STYLE type="text/css">
<!--
BODY{
cursor : crosshair;/*ページ全体のカーソルを十字に*/
}
A{
cursor : help;/*リンクをヘルプに*/
}
TABLE{
cursor : wait;/*表の中を砂時計に*/
}
-->
</STYLE>


リンク部分にカーソルを当てると形状が変わります。


・リンクにカーソルを合わせると バックの色が変わる

このタグを<HEAD>~</HEAD>の間に入れてください。
ページ全体に適用されます。

<style type="text/css"><!--a:hover {color :#ffffff ; background-color :#effcc33;}--></style>

※青い文字の箇所は自分の好きな色に変えて使ってくださいね。


 パソコン快適術&HTML&小技ページTOP
関連記事
スポンサーサイト




comment 0 trackback 0
トラックバックURL
http://oyedihawakisi.blog37.fc2.com/tb.php/1494-e16abb9d
トラックバック
コメント
管理者にだけ表示を許可する
 

 New Favorite blog Entries 最新記事 33サイト掲載中

back-to-top