Zmienianie kursora za pomocą CSS - Rodzaje kursorów myszy i ustawienia 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でカーソルを変える

Zmienianie kursora za pomocą CSS
= Rodzaje kursorów myszy i ustawienia CSS =

Na stronie internetowej kształt kursora myszy lub wskaźnika można ustawić za pomocą właściwości CSS "cursor".
Ten przewodnik przedstawia wartości CSS dla różnych kształtów kursorów oraz sposoby ich konfiguracji.
Możesz kliknąć na właściwości, aby je skopiować. Ta strona zawiera właściwość "cursor:copy" dla elementów, które można kopiować.
Przykładowe obrazy są dostępne dla każdej właściwości. Jednak kształt kursora może się różnić w zależności od wersji systemu operacyjnego i przeglądarki.
Najechanie kursorem na sekcje "On Mouse" pozwala zobaczyć kursor tak, jak wygląda w Twoim środowisku.

《Jak ustawić》

Jeśli chcesz zastosować kursor w wielu sekcjach na stronie, zwykle zapisuje się go w sekcji <head> lub w zewnętrznym pliku CSS.
".cursorstyle" to niestandardowa nazwa klasy.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Kopiuj
Przykład zastosowania powyższego CSS za pomocą atrybutu "class".
<span class="cursorstyle">Tekst</span> Kopiuj

<div class="cursorstyle">Tekst</div> Kopiuj

<a class="cursorstyle">Tekst</a> Kopiuj
Przykład zastosowania do pojedynczej sekcji lub kilku elementów.
Użyj atrybutu "style" i wpisz właściwość bezpośrednio.
<span style="cursor : pointer;">Tekst</span> Kopiuj

<div style="cursor : pointer;">Tekst</div> Kopiuj

《Typy kursorów i wartości CSS》

Wartości CSS [Kliknij, aby skopiować]	Przykład w OS [Może się różnić w zależności od przeglądarki]		Podgląd kształtu po najechaniu	Opis
Wartości CSS [Kliknij, aby skopiować]	Windows	Mac	Podgląd kształtu po najechaniu	Opis
auto cursor: auto;			《Najechanie myszą》	Przeglądarka automatycznie dobiera kursor w zależności od kontekstu
default cursor: default;			《Najechanie myszą》	Wyświetla standardową strzałkę
none cursor: none			《Najechanie myszą》	Nie wyświetla kursora
context-menu cursor: context-menu			《Najechanie myszą》	Pozwala na użycie menu kontekstowego
help cursor: help			《Najechanie myszą》	Element pomocy
pointer cursor: pointer			《Najechanie myszą》	Podczas najechania na link itp.
progress cursor: progress			《Najechanie myszą》	Przetwarzanie zadania. Możliwa interakcja użytkownika
wait cursor: wait			《Najechanie myszą》	Przetwarzanie zadania. Brak interakcji użytkownika
cell cursor: cell			《Najechanie myszą》	Zaznaczalna komórka tabeli
crosshair cursor: crosshair			《Najechanie myszą》	Kursor krzyżowy, często wskazuje na wybór w bitmapie
text cursor: text			《Najechanie myszą》	Zaznaczalny tekst
vertical-text cursor: vertical-text			《Najechanie myszą》	Zaznaczalny tekst pionowy
alias cursor: alias			《Najechanie myszą》	Zaznaczalny tekst pionowy
copy cursor: copy			《Najechanie myszą》	Możliwość kopiowania
move cursor: move			《Najechanie myszą》	Możliwość przenoszenia
no-drop cursor: no-drop			《Najechanie myszą》	Nie można upuścić w tej pozycji
not-allowed cursor: not-allowed			《Najechanie myszą》	Nie można wykonać żądanej akcji
grab cursor: grab			《Najechanie myszą》	Przeciągalny, zwykle w parze z grabbing
grabbing cursor: grabbing			《Najechanie myszą》	Podczas przeciągania, w parze z grab
all-scroll cursor: all-scroll			《Najechanie myszą》	Możliwość przewijania w dowolnym kierunku
col-resize cursor: col-resize			《Najechanie myszą》	Zmienny rozmiar pola z poziomym ruchem krawędzi
row-resize cursor: row-resize			《Najechanie myszą》	Zmienny rozmiar pola z pionowym ruchem krawędzi
n-resize cursor: n-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi na północ (góra)
w-resize cursor: w-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi na zachód (lewo)
s-resize cursor: s-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi na południe (dół)
e-resize cursor: e-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi na wschód (prawo)
nw-resize cursor: nw-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi na północny zachód (lewy górny róg)
ne-resize cursor: ne-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi na północny wschód (prawy górny róg)
sw-resize cursor: sw-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi na południowy zachód (lewy dolny róg)
se-resize cursor: se-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi na południowy wschód (prawy dolny róg)
ew-resize cursor: ew-resize			《Najechanie myszą》	Zmienny rozmiar pola z dwukierunkowym ruchem poziomym
ns-resize cursor: ns-resize			《Najechanie myszą》	Zmienny rozmiar pola z dwukierunkowym ruchem pionowym
nesw-resize cursor: nesw-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi w północno-wschodnim i południowo-zachodnim kierunku
nwse-resize cursor: nwse-resize			《Najechanie myszą》	Zmienny rozmiar pola z ruchem krawędzi w północno-zachodnim i południowo-wschodnim kierunku
zoom-in cursor: zoom-in			《Najechanie myszą》	Możliwość powiększania
zoom-out cursor: zoom-out			《Najechanie myszą》	Możliwość pomniejszania
URL	Każdy obraz może być ustawiony jako kursor. Maksymalny rozmiar obrazu to 128 × 128px. Przykładowy obraz ma rozmiar 70 × 70px. 《Najechanie myszą》 .cursorimg {cursor: url(image-path), auto;} Kopiuj ".cursorimg" może mieć dowolną nazwę. <div {cursor: url(image-path), auto;}>Text</div> Kopiuj 《Obsługa wyświetlaczy Retina》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Kopiuj

Zmienianie kursora za pomocą CSS= Rodzaje kursorów myszy i ustawienia CSS =

Zmienianie kursora za pomocą CSS
= Rodzaje kursorów myszy i ustawienia CSS =

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