JavaScriptで画面を基準にしたカーソルの座標を取得する方法
JavaScriptでマウスカーソルの画面基準の座標を取得するには、イベントオブジェクトの event.screenX と event.screenY を使用します。
screenX・screenYプロパティとは
screenX はマウスカーソルのX座標（水平方向の位置）を、screenY はY座標（垂直方向の位置）を、それぞれディスプレイ画面の左上を原点（0, 0）としてピクセル単位で返します。ブラウザの表示領域ではなく、モニター全体を基準とした座標である点が特徴です。
なお、ブラウザのビューポート（表示領域）を基準にした座標が必要な場合は、代わりに event.clientX と event.clientY を使用してください。
サンプルコード
以下のコードを実行すると、画面を基準としたカーソルの座標を取得できます。要素の上でマウスボタンを押すと、その瞬間のカーソル位置が表示されます。
<!DOCTYPE html>
<html>
<head>
<script>
function coordinatesFunc(event) {
document.write("X座標 = " + event.screenX + "<br>Y座標 = " + event.screenY);
}
</script>
</head>
<body>
<div onmousedown="coordinatesFunc(event)">
ここをクリックすると、画面を基準にしたカーソルの座標が表示されます。
</div>
</body>
</html>実行結果の例
画面上の任意の位置でクリックすると、例えば次のような結果が表示されます。
X座標 = 512 Y座標 = 340
クリックした位置が画面の左上に近いほど数値は小さくなり、右下に近いほど大きくなります。マウスイベント（mousedown、mousemove、mouseup など）と組み合わせることで、ドラッグ操作の追跡やカスタムカーソルの実装など、さまざまなインタラクティブな機能に活用できます。
-
JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説
HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト
-
JavaScriptで画面解像度を検出する方法を解説！window.screenの使い方
はじめにWebアプリケーションを開発する際、ユーザーの画面解像度（スクリーンサイズ）を検出したいケースは多くあります。例えば、レスポンシブデザインの調整や、表示領域に応じたコンテンツの出し分けなどが挙げられます。JavaScriptでは、window.screenオブジェクトを使うことで、簡単に画面の解像度情報を取得できます。この記事では、その具体的な方法をサンプルコードとともにわかりやすく解説します。window.screenオブジェクトとはwindow.screenは、ユーザーが使用しているディスプレイ（画面）に関する情報を保持しているオブジェクトです。このオブジェクトのプロパティを参照す