Changer le curseur avec CSS - Types de curseurs de souris et paramètres CSS

Table of Contents - いろいろ Tips - 目次: Sitemap Generator - サイトマップ生成プログラム

In-Page Search - 検索を自ページ設置

Download Counter - ダウンロードカウンター

Draft Manager - ブラウザで下書き保存

Text Encryption - テキスト暗号・復号化

CSS & JavaScript - 圧縮・整形/復元ツール

Simple Yet Powerful Note Tool - メモメモ

Task Management - 仕事/やること管理

Local Storage Check - ローカルストレージチェック

Pixel Art - ピクセルアート作成

Freehand Drawing - フリーハンドドローイング

Pomodoro Timer - ポモドーロタイマー

Text Counter - 文字数カウント

Notepad - メモ帳

原稿用紙エディター

俳句・短歌下書きツール

ウィンドウサイズ

インターネット環境

タブを再び開く

Webページ最新状態

ページ内文字検索

スマホページ内検索

画像を加工する

Macでカラーコードを調べ

Mac用解凍ソフト

ショートカット

コピペの方法

右クリック禁止を回避

ローマ字かな入力変換表

ひらがな→ヘボン式ローマ字変換

ウェブページで長音ローマ字

ファイル差分チェック

音声合成

テキスト読み上げ

テキスト読み上げ書き方

全国公衆電話の場所

よく使う記号

キーボードの記号

キーボードの記号と入力方法

操作で使うキーの名称

CSSでカーソルを変える

Changer le curseur avec CSS
= Types de curseurs de souris et paramètres CSS =

Sur une page web, la forme du curseur de la souris ou du pointeur peut être définie à l’aide de la propriété CSS "cursor".
Ce guide explore les valeurs CSS pour différents types de curseurs et explique comment les configurer.
Vous pouvez cliquer sur les propriétés pour les copier. Cette page inclut la propriété "cursor:copy" pour les éléments copiables.
Des images d’exemple sont fournies pour chaque propriété. Toutefois, la forme peut varier en fonction de la version de votre système d’exploitation et de votre navigateur.
En survolant les sections "On Mouse", vous pouvez voir le curseur tel qu’il apparaît dans votre environnement.

《Comment configurer》

Si vous souhaitez l'appliquer à plusieurs sections d'une page, il est courant d’écrire ce qui suit dans la section <head> ou dans un fichier CSS externe.
".cursorstyle" est un nom de classe personnalisé.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Copier
Exemple d'application du CSS ci-dessus en utilisant l’attribut "class".
<span class="cursorstyle">Texte</span> Copier

<div class="cursorstyle">Texte</div> Copier

<a class="cursorstyle">Texte</a> Copier
Exemple d’application à une seule section ou à quelques éléments.
Utilisez l’attribut "style" et écrivez la propriété directement.
<span style="cursor : pointer;">Texte</span> Copier

<div style="cursor : pointer;">Texte</div> Copier

《Types de curseurs et valeurs CSS》

Valeurs CSS [Cliquer pour copier]	Exemple dans le système d'exploitation [Peut varier selon le navigateur]		Aperçu de la forme au survol	Description
Valeurs CSS [Cliquer pour copier]	Windows	Mac	Aperçu de la forme au survol	Description
auto cursor: auto;			《Survol souris》	Le navigateur détermine automatiquement le curseur en fonction du contexte
default cursor: default;			《Survol souris》	Affiche une flèche standard
none cursor: none			《Survol souris》	Ne pas afficher de curseur
context-menu cursor: context-menu			《Survol souris》	Permet l'utilisation d'un menu contextuel
help cursor: help			《Survol souris》	Élément d'aide
pointer cursor: pointer			《Survol souris》	Lorsqu'on survole un lien, etc.
progress cursor: progress			《Survol souris》	Traitement d'une tâche. Interaction utilisateur possible
wait cursor: wait			《Survol souris》	Traitement d'une tâche. Interaction utilisateur impossible
cell cursor: cell			《Survol souris》	Cellule de tableau sélectionnable
crosshair cursor: crosshair			《Survol souris》	Curseur en croix, souvent utilisé pour indiquer une sélection sur un bitmap
text cursor: text			《Survol souris》	Texte sélectionnable
vertical-text cursor: vertical-text			《Survol souris》	Texte vertical sélectionnable
alias cursor: alias			《Survol souris》	Peut créer un alias ou un raccourci
copy cursor: copy			《Survol souris》	Copiable
move cursor: move			《Survol souris》	Déplaçable
no-drop cursor: no-drop			《Survol souris》	Ne peut pas être déposé à cet emplacement
not-allowed cursor: not-allowed			《Survol souris》	L'action demandée ne peut pas être exécutée
grab cursor: grab			《Survol souris》	Déplaçable, généralement associé à grabbing
grabbing cursor: grabbing			《Survol souris》	Lors du déplacement, associé à grab
all-scroll cursor: all-scroll			《Survol souris》	Peut faire défiler dans toutes les directions
col-resize cursor: col-resize			《Survol souris》	Boîte redimensionnable avec déplacement horizontal du bord
row-resize cursor: row-resize			《Survol souris》	Boîte redimensionnable avec déplacement vertical du bord
n-resize cursor: n-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord vers le nord (haut)
w-resize cursor: w-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord vers l'ouest (gauche)
s-resize cursor: s-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord vers le sud (bas)
e-resize cursor: e-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord vers l'est (droite)
nw-resize cursor: nw-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord vers le nord-ouest (haut-gauche)
ne-resize cursor: ne-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord vers le nord-est (haut-droit)
sw-resize cursor: sw-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord vers le sud-ouest (bas-gauche)
se-resize cursor: se-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord vers le sud-est (bas-droit)
ew-resize cursor: ew-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord en double sens horizontal
ns-resize cursor: ns-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord en double sens vertical
nesw-resize cursor: nesw-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord en diagonale nord-est/sud-ouest (haut-droit & bas-gauche)
nwse-resize cursor: nwse-resize			《Survol souris》	Boîte redimensionnable avec déplacement du bord en diagonale nord-ouest/sud-est (haut-gauche & bas-droit)
zoom-in cursor: zoom-in			《Survol souris》	Peut effectuer un zoom avant
zoom-out cursor: zoom-out			《Survol souris》	Peut effectuer un zoom arrière
URL	Toute image peut être définie comme curseur. La taille de l'image est limitée à 128 × 128px. La taille de l'image d'exemple est 70 × 70px. 《Survol souris》 .cursorimg {cursor: url(image-path), auto;} Copier ".cursorimg" peut être n'importe quel nom. <div {cursor: url(image-path), auto;}>Texte</div> Copier 《Prise en charge des écrans Retina》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Copier

Changer le curseur avec CSS= Types de curseurs de souris et paramètres CSS =

Changer le curseur avec CSS
= Types de curseurs de souris et paramètres CSS =

おすすめサイト・関連サイト…