CSSのcursorプロパティでカーソルの見た目を自由に変更する方法
HTMLドキュメント内のさまざまな要素に対して、CSSの cursor プロパティを使うことで、マウスカーソルの表示を自由に変更できます。リンク上では指型カーソル、テキスト上ではIビーム、操作不可の場所では禁止アイコンなど、状況に応じたカーソルを指定することで、ユーザーにとって直感的で分かりやすいインターフェースを実現できます。
構文（シンタックス）
CSS cursorプロパティの構文は以下のとおりです。
セレクタ {
cursor: /*値*/
}cursorプロパティに指定できる主な値
CSS cursorプロパティには、以下のような値を指定できます。
| No. | 値と説明 |
|---|---|
| 1 | alias ショートカットや別名が作成されることを示します |
| 2 | all-scroll あらゆる方向にスクロールできることを示します |
| 3 | auto デフォルト値。ブラウザが自動的にカーソルを設定します |
| 4 | cell セル（またはセルの集合）が選択可能であることを示します |
| 5 | context-menu コンテキストメニューが利用可能であることを示します |
| 6 | col-resize 列を水平方向にリサイズできることを示します |
| 7 | copy 何かをコピーしようとしていることを示します |
| 8 | crosshair 十字型（クロスヘア）のカーソルとして描画されます |
| 9 | default デフォルトのカーソル（矢印）を描画します |
| 10 | e-resize ボックスの端を右（東）方向へ移動できることを示します |
| 11 | ew-resize 左右双方向へのリサイズカーソルを示します |
| 12 | grab 何かをつかめる（グラブできる）ことを示します |
| 13 | grabbing 何かをつかんでいる状態であることを示します |
| 14 | help ヘルプが利用可能であることを示します |
| 15 | move 何かを移動できることを示します |
| 16 | n-resize ボックスの端を上（北）方向へ移動できることを示します |
| 17 | ne-resize ボックスの端を右上（北東）方向へ移動できることを示します |
| 18 | nesw-resize 右上〜左下の双方向リサイズカーソルを示します |
| 19 | ns-resize 上下双方向へのリサイズカーソルを示します |
| 20 | nw-resize ボックスの端を左上（北西）方向へ移動できることを示します |
| 21 | nwse-resize 左上〜右下の双方向リサイズカーソルを示します |
| 22 | no-drop ドラッグ中の項目をここにドロップできないことを示します |
| 23 | none その要素に対してカーソルを一切描画しません |
| 24 | not-allowed 要求されたアクションが実行されないことを示します |
| 25 | pointer 指型ポインタで、リンクであることを示します |
| 26 | progress プログラムが処理中（ビジー状態）であることを示します |
| 27 | row-resize 行を垂直方向にリサイズできることを示します |
| 28 | s-resize ボックスの端を下（南）方向へ移動できることを示します |
| 29 | se-resize ボックスの端を右下（南東）方向へ移動できることを示します |
| 30 | sw-resize ボックスの端を左下（南西）方向へ移動できることを示します |
| 31 | text 選択可能なテキストであることを示します |
| 32 | URL カスタムカーソル画像のURLをカンマ区切りで指定します。末尾にはフォールバック用の汎用カーソルを記述します |
| 33 | vertical-text 選択可能な縦書きテキストであることを示します |
| 34 | w-resize ボックスの端を左（西）方向へ移動できることを示します |
| 35 | wait プログラムがビジー状態（待機が必要）であることを示します |
| 36 | zoom-in 拡大（ズームイン）できることを示します |
| 37 | zoom-out 縮小（ズームアウト）できることを示します |
| 38 | initial cursorプロパティをデフォルト値に設定します |
| 39 | inherit 親要素からcursorプロパティの値を継承します |
それでは、実際にCSS cursorプロパティを実装した例を見てみましょう。
サンプルコード
<!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>実行結果
このコードを実行すると、各領域にマウスを合わせたときに、それぞれ異なる種類のカーソルが表示されます。たとえば「left corner」や「right corner」の上では斜め方向のリサイズカーソル、「up」の上では上下方向のリサイズカーソル、「Not-allowed」の上では禁止マークのカーソル、「Pointer」の上では指型のカーソルがそれぞれ表示されます。
まとめ
cursorプロパティを活用すれば、要素の役割や状態に応じてカーソルの見た目を変えられます。特に pointer（リンク）、text（テキスト選択）、not-allowed（操作不可）、grab / grabbing（ドラッグ操作）などは、UIの使いやすさを大きく向上させるため、実務でも頻繁に使われる値です。また、URL を指定すれば独自のカスタムカーソル画像も使用できるので、サイトの個性を出したい場合にも便利です。
-
CSSのcolorプロパティを使って要素の文字色を設定する方法
CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector { color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用
-
CSSのメディアクエリを使って画面サイズに応じてレイアウトを切り替える方法
CSSで画面サイズに基づいてレイアウトを動的に変更したい場合、メディアクエリ（@media）を使用します。メディアクエリを使うことで、デバイスの画面幅に応じて要素の幅や配置を柔軟に切り替えられ、レスポンシブデザインを実現できます。以下は、4つのカラムを持つレイアウトが、画面サイズに応じて自動的に変化するサンプルコードです。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q