CSSを使用してカーソルの外観を変更する
CSSカーソルプロパティを使用して、HTMLドキュメント内のさまざまな要素のカーソル画像を操作できます。
構文
The syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
} CSSカーソルプロパティの値は次のとおりです-
| Sr.No | 値と説明 |
|---|---|
| 1 | エイリアス 何かのエイリアスが作成されることを示します |
| 2 | すべてスクロール これは、何かが任意の方向にスクロールできることを示しています |
| 3 | 自動 これはデフォルトであり、ブラウザはカーソルを設定します |
| 4 | セル セル（またはセルのセット）が選択される可能性があることを示します |
| 5 | コンテキストメニュー コンテキストメニューが利用可能であることを示します |
| 6 | col-resize これは、列のサイズを水平方向に変更できることを示しています |
| 7 | コピー 何かがコピーされることを示します |
| 8 | 十字線 十字線としてレンダリングされます |
| 9 | デフォルト デフォルトのカーソルをレンダリングします |
| 10 | e-サイズ変更 ボックスの端を右（東）に移動することを示します |
| 11 | ew-サイズ変更 双方向のサイズ変更カーソルを示します |
| 12 | グラブ 何かをつかむことができることを示しています |
| 13 | つかむ 何かをつかむことができることを示しています |
| 14 | ヘルプ ヘルプが利用可能であることを示します |
| 15 | 移動 何かを移動することを示します |
| 16 | n-サイズ変更 ボックスの端を上（北）に移動することを示します |
| 17 | ne-resize ボックスの端を上下（北/東）に移動することを示します。 |
| 18 | nesw-サイズ変更 双方向のサイズ変更カーソルを示します |
| 19 | ns-サイズ変更 双方向のサイズ変更カーソルを示します |
| 20 | nw-resize ボックスの端を上下（北/西）に移動することを示します。 |
| 21 | nwse-resize 双方向のサイズ変更カーソルを示します |
| 22 | ドロップなし ドラッグしたアイテムをここにドロップできないことを示します |
| 23 | なし 要素のカーソルはレンダリングされません |
| 24 | 許可されていません 要求されたアクションが実行されないことを示します |
| 25 | ポインタ これはポインタであり、リンクを示します |
| 26 | 進捗状況 プログラムがビジー状態（進行中）であることを示します |
| 27 | 行のサイズ変更 これは、行のサイズを垂直方向に変更できることを示しています |
| 28 | s-サイズ変更 ボックスの端を下（南）に移動することを示します |
| 29 | se-サイズ変更 ボックスの端を上下（南/東）に移動することを示します。 |
| 30 | sw-resize ボックスの端を上下に移動することを示します（南/西） |
| 31 | テキスト 選択できるテキストを示します |
| 32 | URL カスタムカーソルへのURLのコンマ区切りリストと、最後にフェイルセーフとして記載されている汎用カーソル |
| 33 | 垂直テキスト 選択できる縦書きテキストを示します |
| 34 | w-サイズ変更 ボックスの端を左（西）に移動することを示します |
| 35 | 待つ プログラムがビジーであることを示しています |
| 36 | ズームイン 何かを拡大できることを示しています |
| 37 | ズームアウト 何かをズームアウトできることを示しています |
| 38 | 初期 カーソルプロパティをデフォルト値に設定します。 |
| 39 | 継承 親要素からカーソルプロパティを継承します。 |
以下は、CSSカーソルプロパティを実装する例です
例
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 5px;
float: left;
}
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html> 出力
-
CSSを使用して要素のテキストの色を設定する
CSSのcolorプロパティは、要素のテキストの色を変更するために使用されます。値は、標準の色名、rgb（）、rgba（）、hsl（）、hsla（）、および16進値として指定できます。 構文 CSScolorプロパティの構文は次のとおりです- Selector { color: /*value*/ } 次の例は、CSSカラープロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> div { height: 50px; &nb
-
CSSを使用した画面サイズに基づくレイアウトの変更
CSSの画面サイズに基づいてレイアウトを変更するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { &