CSS/CSSでマウスカーソルの形状を設定する
の編集
Top
/
CSS
/
CSSでマウスカーソルの形状を設定する
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
#navi(../) * CSSでマウスカーソルの形状を設定する [#a4745ccf] CSSでマウスカーソルの形状を設定する方法を以下に記します。 #contents #htmlinsertpcsp(web-top.html,web-sp.html) * 確認用ページ [#eff84983] 以下のURLで本記事の設定を確認することができます。 http://web.just4fun.biz/css/2/ * マウスカーソルの形状を設定する書式 [#jfa998d5] マウスカーソルの形状を設定する書式は以下の通りです。 cursor: 形状値 マウスカーソルの形状値はいかのようのものがあります。 |形状値|説明| |default|ブラウザのデフォルトの形状| |auto|自動的に適切な形状になる| |crosshair|十字の形状| |help|ヘルプを示す形状| |move|移動可能の形状| |pointer|リンクの形状| |text|テキスト選択の形状| |wait|処理中の形状| |n-resize&br;s-resize&br;w-resize&br;e-resize&br;ne-resize&br;nw-resize&br;se-resize&br;sw-resize|サイズ変更を示す形状・東西南北で示す| * マウスカーソル形状を変更するCSSとHTML [#fa622952] 実際の動作に関しては確認ページでマウスカーソルの形状が変化する事を確認してみてください。 http://web.just4fun.biz/css/2/ ** スタイルシート [#r99b4c22] #ref(cursor.css) .default { cursor: default } .auto { cursor: auto } .crosshair { cursor: crosshair } .help { cursor: help } .move { cursor: move } .pointer { cursor: pointer } .text { cursor: text } .wait { cursor: wait } .n-resize { cursor: n-resize } .s-resize { cursor: s-resize } .w-resize { cursor: w-resize } .e-resize { cursor: e-resize } .ne-resize { cursor: ne-resize } .nw-resize { cursor: nw-resize } .se-resize { cursor: se-resize } .sw-resize { cursor: sw-resize } ** HTML [#n5876deb] #ref(cursor.html) <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>CSS TABLE TR TD TEST</title> <link rel="stylesheet" type="text/css" href="cursor.css" /> </head> <body> マウスカーソルを以下のリンクに移動してください。<br /> マウスカーソルの形状が変更されます。<br /> <a href="#" class='default'>{ cursor: default }</a><br /> <a href="#" class='auto'>{ cursor: auto }</a><br /> <a href="#" class='crosshair'>{ cursor: crosshair }</a><br /> <a href="#" class='help'>{ cursor: help }</a><br /> <a href="#" class='move'>{ cursor: move }</a><br /> <a href="#" class='pointer'>{ cursor: pointer }</a><br /> <a href="#" class='text'>{ cursor: text }</a><br /> <a href="#" class='wait'>{ cursor: wait }</a><br /> <a href="#" class='n-resize'>{ cursor: n-resize }</a><br /> <a href="#" class='s-resize'>{ cursor: s-resize }</a><br /> <a href="#" class='w-resize'>{ cursor: w-resize }</a><br /> <a href="#" class='e-resize'>{ cursor: e-resize }</a><br /> <a href="#" class='ne-resize'>{ cursor: ne-resize }</a><br /> <a href="#" class='nw-resize'>{ cursor: nw-resize }</a><br /> <a href="#" class='se-resize'>{ cursor: se-resize }</a><br /> <a href="#" class='sw-resize'>{ cursor: sw-resize }</a><br /> </body> </html> #htmlinsertpcsp(web-btm.html,web-sp.html)
タイムスタンプを変更しない
#navi(../) * CSSでマウスカーソルの形状を設定する [#a4745ccf] CSSでマウスカーソルの形状を設定する方法を以下に記します。 #contents #htmlinsertpcsp(web-top.html,web-sp.html) * 確認用ページ [#eff84983] 以下のURLで本記事の設定を確認することができます。 http://web.just4fun.biz/css/2/ * マウスカーソルの形状を設定する書式 [#jfa998d5] マウスカーソルの形状を設定する書式は以下の通りです。 cursor: 形状値 マウスカーソルの形状値はいかのようのものがあります。 |形状値|説明| |default|ブラウザのデフォルトの形状| |auto|自動的に適切な形状になる| |crosshair|十字の形状| |help|ヘルプを示す形状| |move|移動可能の形状| |pointer|リンクの形状| |text|テキスト選択の形状| |wait|処理中の形状| |n-resize&br;s-resize&br;w-resize&br;e-resize&br;ne-resize&br;nw-resize&br;se-resize&br;sw-resize|サイズ変更を示す形状・東西南北で示す| * マウスカーソル形状を変更するCSSとHTML [#fa622952] 実際の動作に関しては確認ページでマウスカーソルの形状が変化する事を確認してみてください。 http://web.just4fun.biz/css/2/ ** スタイルシート [#r99b4c22] #ref(cursor.css) .default { cursor: default } .auto { cursor: auto } .crosshair { cursor: crosshair } .help { cursor: help } .move { cursor: move } .pointer { cursor: pointer } .text { cursor: text } .wait { cursor: wait } .n-resize { cursor: n-resize } .s-resize { cursor: s-resize } .w-resize { cursor: w-resize } .e-resize { cursor: e-resize } .ne-resize { cursor: ne-resize } .nw-resize { cursor: nw-resize } .se-resize { cursor: se-resize } .sw-resize { cursor: sw-resize } ** HTML [#n5876deb] #ref(cursor.html) <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>CSS TABLE TR TD TEST</title> <link rel="stylesheet" type="text/css" href="cursor.css" /> </head> <body> マウスカーソルを以下のリンクに移動してください。<br /> マウスカーソルの形状が変更されます。<br /> <a href="#" class='default'>{ cursor: default }</a><br /> <a href="#" class='auto'>{ cursor: auto }</a><br /> <a href="#" class='crosshair'>{ cursor: crosshair }</a><br /> <a href="#" class='help'>{ cursor: help }</a><br /> <a href="#" class='move'>{ cursor: move }</a><br /> <a href="#" class='pointer'>{ cursor: pointer }</a><br /> <a href="#" class='text'>{ cursor: text }</a><br /> <a href="#" class='wait'>{ cursor: wait }</a><br /> <a href="#" class='n-resize'>{ cursor: n-resize }</a><br /> <a href="#" class='s-resize'>{ cursor: s-resize }</a><br /> <a href="#" class='w-resize'>{ cursor: w-resize }</a><br /> <a href="#" class='e-resize'>{ cursor: e-resize }</a><br /> <a href="#" class='ne-resize'>{ cursor: ne-resize }</a><br /> <a href="#" class='nw-resize'>{ cursor: nw-resize }</a><br /> <a href="#" class='se-resize'>{ cursor: se-resize }</a><br /> <a href="#" class='sw-resize'>{ cursor: sw-resize }</a><br /> </body> </html> #htmlinsertpcsp(web-btm.html,web-sp.html)
テキスト整形のルールを表示する
添付ファイル:
cursor.css
283件
[
詳細
]
cursor.html
372件
[
詳細
]