Changing Cursor with CSS - Types of Mouse Cursors and CSS Settings

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でカーソルを変える

Changing Cursor with CSS
= Types of Mouse Cursors and CSS Settings =

Di halaman web, bentuk kursor mouse atau pointer mouse dapat diatur menggunakan properti CSS "cursor".
Panduan ini mengeksplorasi nilai-nilai CSS untuk berbagai bentuk kursor dan cara mengonfigurasinya.
Anda dapat mengklik properti untuk menyalinnya. Halaman ini menyertakan properti "cursor:copy" untuk elemen yang dapat disalin.
Gambar contoh disediakan untuk setiap properti. Namun, bentuknya dapat berbeda tergantung pada versi sistem operasi dan browser Anda.
Dengan mengarahkan kursor ke bagian "On Mouse", Anda dapat melihat kursor seperti yang muncul di lingkungan Anda.

《How to Set》

Jika Anda ingin menerapkannya ke beberapa bagian di halaman, umumnya praktik yang umum adalah menulis berikut di bagian <head> atau file CSS eksternal.
".cursorstyle" adalah nama kelas kustom.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Copy
Contoh penerapan CSS di atas menggunakan atribut "class".
<span class="cursorstyle">Text</span> Copy

<div class="cursorstyle">Text</div> Copy

<a class="cursorstyle">Text</a> Copy
Contoh penerapan ke satu bagian atau beberapa elemen.
Gunakan atribut "style" dan tulis properti langsung.
<span style="cursor : pointer;">Text</span> Copy

<div style="cursor : pointer;">Text</div> Copy

《Tipe Kursor dan Nilai CSS》

Nilai CSS [Klik untuk Menyalin]	Contoh di OS [Mungkin bervariasi tergantung pada browser]		Mouse-Over Pratinjau Bentuk	Deskripsi
Nilai CSS [Klik untuk Menyalin]	Windows	Mac	Mouse-Over Pratinjau Bentuk	Deskripsi
auto cursor: auto;			《Mouse-Over》	Browser secara otomatis menentukan kursor berdasarkan konteks
default cursor: default;			《Mouse-Over》	Menampilkan panah standar
none cursor: none			《Mouse-Over》	Tidak menampilkan kursor
context-menu cursor: context-menu			《Mouse-Over》	Memungkinkan penggunaan menu konteks
help cursor: help			《Mouse-Over》	Item bantuan
pointer cursor: pointer			《Mouse-Over》	Saat melayang di atas tautan, dll.
progress cursor: progress			《Mouse-Over》	Memproses tugas. Interaksi pengguna dimungkinkan
wait cursor: wait			《Mouse-Over》	Memproses tugas. Interaksi pengguna tidak dimungkinkan
cell cursor: cell			《Mouse-Over》	Sel tabel yang dapat dipilih
crosshair cursor: crosshair			《Mouse-Over》	Kursor silang, sering menunjukkan seleksi pada bitmap
text cursor: text			《Mouse-Over》	Teks yang dapat dipilih
vertical-text cursor: vertical-text			《Mouse-Over》	Teks vertikal yang dapat dipilih
alias cursor: alias			《Mouse-Over》	Dapat membuat alias atau pintasan
copy cursor: copy			《Mouse-Over》	Dapat disalin
move cursor: move			《Mouse-Over》	Dapat dipindahkan
no-drop cursor: no-drop			《Mouse-Over》	Tidak dapat dijatuhkan di posisi tersebut
not-allowed cursor: not-allowed			《Mouse-Over》	Aksi yang diminta tidak dapat dilakukan
grab cursor: grab			《Mouse-Over》	Dapat diseret, biasanya dipasangkan dengan grabbing
grabbing cursor: grabbing			《Mouse-Over》	Saat menyeret, dipasangkan dengan grab
all-scroll cursor: all-scroll			《Mouse-Over》	Dapat menggulir ke segala arah
col-resize cursor: col-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi horizontal
row-resize cursor: row-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi vertikal
n-resize cursor: n-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah utara (atas)
w-resize cursor: w-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah barat (kiri)
s-resize cursor: s-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah selatan (bawah)
e-resize cursor: e-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah timur (kanan)
nw-resize cursor: nw-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah barat laut (kiri-atas)
ne-resize cursor: ne-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah timur laut (kanan-atas)
sw-resize cursor: sw-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah barat daya (kiri-bawah)
se-resize cursor: se-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah timur daya (kanan-bawah)
ew-resize cursor: ew-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi horizontal dua arah
ns-resize cursor: ns-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi vertikal dua arah
nesw-resize cursor: nesw-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah timur laut-barat daya (kanan-atas & kiri-bawah)
nwse-resize cursor: nwse-resize			《Mouse-Over》	Kotak yang dapat diubah ukurannya dengan pergerakan tepi ke arah barat laut-timur daya (kiri-atas & kanan-bawah)
zoom-in cursor: zoom-in			《Mouse-Over》	Dapat memperbesar
zoom-out cursor: zoom-out			《Mouse-Over》	Dapat memperkecil
URL	Gambar apa pun dapat diatur sebagai kursor. Ukuran gambar dibatasi hingga 128 × 128px. Ukuran gambar contoh adalah 70 × 70px. 《Mouse-Over》 .cursorimg {cursor: url(image-path), auto;} Copy ".cursorimg" bisa menggunakan nama apa pun. <div {cursor: url(image-path), auto;}>Teks</div> Copy 《Dukungan Layar Retina》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Copy

Changing Cursor with CSS= Types of Mouse Cursors and CSS Settings =

Changing Cursor with CSS
= Types of Mouse Cursors and CSS Settings =

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