Muuta kursoria CSS:llä - Hiirikursorin tyypit ja CSS-asetukset

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

Muuta kursoria CSS:llä
= Hiirikursorin tyypit ja CSS-asetukset =

Verkkosivulla hiirikursorin tai osoittimen muoto voidaan asettaa käyttämällä CSS:n "cursor"-ominaisuutta.
Tässä oppaassa käsitellään eri kursorimuotojen CSS-arvoja ja niiden asettamista.
Voit klikata ominaisuuksia kopioidaksesi ne. Tällä sivulla on elementtejä, joissa on ominaisuus "cursor:copy", mikä mahdollistaa kopioinnin.
Jokaiselle ominaisuudelle on tarjolla esimerkkikuvia. Kursorin muoto voi kuitenkin vaihdella käyttöjärjestelmän version ja selaimen mukaan.
Viemällä hiiren "On Mouse" -osioiden päälle voit nähdä kursorin sellaisena kuin se näkyy omassa ympäristössäsi.

《Asetustapa》

Jos haluat käyttää ominaisuutta useissa osioissa sivulla, on suositeltavaa kirjoittaa seuraava <head>-osioon tai ulkoiseen CSS-tiedostoon.
".cursorstyle" on mukautettu luokan nimi.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Kopioi
Esimerkki CSS:n käyttämisestä "class"-attribuutin avulla.
<span class="cursorstyle">Teksti</span> Kopioi

<div class="cursorstyle">Teksti</div> Kopioi

<a class="cursorstyle">Teksti</a> Kopioi
Esimerkki, kun ominaisuutta sovelletaan yksittäiseen osioon tai muutamaan elementtiin.
Käytä "style"-attribuuttia ja kirjoita ominaisuus suoraan.
<span style="cursor : pointer;">Teksti</span> Kopioi

<div style="cursor : pointer;">Teksti</div> Kopioi

《Kohdistintyypit ja CSS-arvot》

CSS-arvot [Napsauta kopioidaksesi]	Esimerkki OS:ssa [Voi vaihdella selaimen mukaan]		Hiiren päällä Esikatselu	Kuvaus
CSS-arvot [Napsauta kopioidaksesi]	Windows	Mac	Hiiren päällä Esikatselu	Kuvaus
auto cursor: auto;			《Hiiren päällä》	Selaimesi määrittää kohdistimen automaattisesti kontekstin mukaan
default cursor: default;			《Hiiren päällä》	Näyttää tavallisen nuolen
none cursor: none			《Hiiren päällä》	Ei näytä kohdistinta
context-menu cursor: context-menu			《Hiiren päällä》	Mahdollistaa kontekstivalikon käytön
help cursor: help			《Hiiren päällä》	Ohje-elementti
pointer cursor: pointer			《Hiiren päällä》	Kun osoitin on linkin päällä jne.
progress cursor: progress			《Hiiren päällä》	Tehtävän käsittely käynnissä. Käyttäjä voi olla vuorovaikutuksessa
wait cursor: wait			《Hiiren päällä》	Tehtävän käsittely käynnissä. Käyttäjä ei voi olla vuorovaikutuksessa
cell cursor: cell			《Hiiren päällä》	Valittava taulukon solu
crosshair cursor: crosshair			《Hiiren päällä》	Ristikkokohdistin, käytetään usein bittikarttavalintaan
text cursor: text			《Hiiren päällä》	Valittava teksti
vertical-text cursor: vertical-text			《Hiiren päällä》	Valittava pystysuuntainen teksti
alias cursor: alias			《Hiiren päällä》	Voi luoda aliaksen tai pikakuvakkeen
copy cursor: copy			《Hiiren päällä》	Kopioitavissa
move cursor: move			《Hiiren päällä》	Siirrettävissä
no-drop cursor: no-drop			《Hiiren päällä》	Ei voi pudottaa tähän kohtaan
not-allowed cursor: not-allowed			《Hiiren päällä》	Pyydettyä toimintoa ei voida suorittaa
grab cursor: grab			《Hiiren päällä》	Vedettävissä, yleensä yhdessä grabbing-kohdistimen kanssa
grabbing cursor: grabbing			《Hiiren päällä》	Vedettäessä, käytetään yhdessä grab-kohdistimen kanssa
all-scroll cursor: all-scroll			《Hiiren päällä》	Voi vierittää mihin tahansa suuntaan
col-resize cursor: col-resize			《Hiiren päällä》	Muokattava laatikko vaakasuuntaisella reunaliikkeellä
row-resize cursor: row-resize			《Hiiren päällä》	Muokattava laatikko pystysuuntaisella reunaliikkeellä
n-resize cursor: n-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä pohjoiseen (ylös)
w-resize cursor: w-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä länteen (vasemmalle)
s-resize cursor: s-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä etelään (alas)
e-resize cursor: e-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä itään (oikealle)
nw-resize cursor: nw-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä luoteeseen (vasen ylä)
ne-resize cursor: ne-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä koilliseen (oikea ylä)
sw-resize cursor: sw-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä lounaaseen (vasen ala)
se-resize cursor: se-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä kaakkoon (oikea ala)
ew-resize cursor: ew-resize			《Hiiren päällä》	Muokattava laatikko kaksisuuntaisella vaaka-reunaliikkeellä
ns-resize cursor: ns-resize			《Hiiren päällä》	Muokattava laatikko kaksisuuntaisella pysty-reunaliikkeellä
nesw-resize cursor: nesw-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä koillinen-lounas (oikea ylä & vasen ala)
nwse-resize cursor: nwse-resize			《Hiiren päällä》	Muokattava laatikko reunan liikkeellä luode-kaakko (vasen ylä & oikea ala)
zoom-in cursor: zoom-in			《Hiiren päällä》	Voi zoomata sisään
zoom-out cursor: zoom-out			《Hiiren päällä》	Voi zoomata ulos
URL	Mikä tahansa kuva voidaan asettaa kohdistimeksi. Kuvan koko on rajoitettu 128 × 128px. Esimerkkikuvan koko on 70 × 70px. 《Hiiren päällä》 .cursorimg {cursor: url(image-path), auto;} Kopioi ".cursorimg" voi olla mikä tahansa nimi. <div {cursor: url(image-path), auto;}>Teksti</div> Kopioi 《Retina-näyttötuki》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Kopioi

Muuta kursoria CSS:llä= Hiirikursorin tyypit ja CSS-asetukset =

Muuta kursoria CSS:llä
= Hiirikursorin tyypit ja CSS-asetukset =

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