HTML

offsetYプロパティとは HTML DOM の MouseEvent offsetY プロパティは、マウスイベントが発生した際に、イベントのターゲット要素を基準としたマウスポインタの垂直方向（Y軸）の座標をピクセル単位で返します。 水平方向（X軸）の座標も同時に取得したい場合は、offsetX プロパティと組み合わせて使用します。 このプロパティは読み取り専用であり、ターゲット要素のパディング領域を含む左上隅を原点（0, 0）として座標が計算される点に注意してください。 構文 offsetY の値を参照するための基本的な構文は以下のとおりです。 MouseEventObject.offs

HTML DOMのMouseEvent pageXプロパティは、マウスイベントが発生した際に、ドキュメントを基準としたマウスポインタの水平（X）座標を返します。垂直（Y）座標も取得したい場合は、pageYプロパティと組み合わせて使用します。pageXプロパティの構文pageXの値を参照するための構文は以下の通りです。MouseEventObject.pageXMouseEvent pageXの実装例ここでは、pageXプロパティを活用した簡単なミニゲームの例を紹介します。このゲームでは、マウスカーソルを緑色の「安全エリア」内で移動させ、指定した座標に到達できれば成功、赤色の「危険エリア」に入っ

HTML DOMのMouseEvent pageYプロパティは、マウスイベントが発生した際に、ドキュメントを基準としたマウスポインタの垂直方向(Y)座標を返します。水平方向(X)の座標も同時に取得したい場合は、pageXプロパティと組み合わせて使用します。 pageYプロパティの主な特徴 ドキュメント全体を基準とするため、ページをスクロールしても基準位置が変わりません(clientYはビューポート基準のため、スクロールで値が変化します) 読み取り専用のプロパティです mousemove、click、mousedownなどのマウスイベント発生時にのみ有効な値を持ちます 構文 pageYプロパ

MouseEvent relatedTargetプロパティとはMouseEvent の relatedTarget プロパティは、mouseover または mouseout イベントが発生した際に、イベント対象の要素と対になる要素（マウスカーソルの移動元・移動先）への参照を返します。例えば mouseout イベントでは「カーソルがどこへ移動したか」、mouseover イベントでは「カーソルがどの要素から来たか」をこのプロパティで取得できます。注意： 関連する要素が存在しない場合（カーソルがブラウザの外へ移動した場合など）は、null が返されます。利用前にnullチェックを行うことをおす

MouseEvent screenXプロパティとはHTML DOMのMouseEvent screenXプロパティは、マウスイベントが発生した際に、ユーザーの画面（ディスプレイ）を基準としたマウスポインターの水平方向（X軸）の座標を返します。垂直方向（Y軸）の座標も取得したい場合は、screenYプロパティと組み合わせて使用します。screenXプロパティは読み取り専用で、戻り値はピクセル単位の整数です。画面の左端が「0」となり、右に移動するほど数値が大きくなります。なお、ブラウザの表示領域（ビューポート）を基準とするclientXプロパティとは異なり、screenXは物理的な画面全体が基準と

HTML DOMのMouseEvent screenYプロパティは、マウスイベントが発生した際に、マウスポインターの位置をユーザーのスクリーン（画面）基準の垂直方向（Y軸）座標として返します。screenXプロパティと組み合わせて使用することで、水平方向の座標も同時に取得できます。 構文 screenYプロパティの値を参照するための基本的な構文は以下の通りです。 MouseEventObject.screenY 戻り値はマウスポインターの画面上でのY座標（ピクセル単位の整数値）です。 MouseEvent screenYプロパティの使用例 次のサンプルでは、screenYプロパティを活用したシ

MouseEventオブジェクトとはHTML DOMのMouseEvent（マウスイベント）オブジェクトは、ユーザーがマウスを使ってHTMLドキュメント上の要素とやり取りした際に発生するイベントを表すオブジェクトです。クリックや移動など、マウスに関するあらゆる操作を検出し、その詳細な情報（座標、押されたボタン、修飾キーの状態など）を取得することができます。MouseEventオブジェクトには、以下のようなプロパティやメソッドが用意されています。MouseEventの主なプロパティ・メソッド一覧プロパティ／メソッド説明altKeyマウスイベント発生時に、キーボードの「ALT」キーが押されていたか

HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン

HTML DOM Style leftプロパティとはHTML DOMのleftプロパティは、位置指定された要素の「左からの位置」を設定または取得するために使用されます。なお、このプロパティで要素の位置を制御するには、対象要素のCSS positionプロパティが relative、absolute、fixed のいずれかに設定されている必要があります。構文leftプロパティを設定する際の構文は以下の通りです。object.style.left = auto|length|%|initial|inherit;指定できる値の一覧値説明autoデフォルト値です。左位置はブラウザが自動的に決定します。

HTML DOM の letterSpacing プロパティは、テキスト内の文字間隔（レタースペーシング）を設定または取得するために使用されるスタイルプロパティです。JavaScript から動的に文字間隔を制御したい場合に活用できます。 letterSpacing プロパティの構文 letterSpacing プロパティを設定する場合の基本構文は以下のとおりです。 object.style.letterSpacing = normal|length|initial|inherit 指定できる値の一覧 letterSpacing プロパティには、以下の4つの値を指定できます。 値説明

listStyleプロパティとはHTML DOMのlistStyleプロパティは、リストのスタイルを制御するためのショートハンド（一括設定）プロパティです。このプロパティを使うことで、以下の3つのCSSプロパティをまとめて設定または取得できます。list-style-type：リストマーカーの種類list-style-position：リストマーカーの表示位置list-style-image：マーカーとして使用する画像構文listStyleプロパティを設定する際の構文は以下のとおりです。object.style.listStyle = type position image|initial|i

HTML DOM の listStyleImage プロパティは、リスト項目（<li>）のマーカーとして画像を設定したり、現在設定されている画像を取得したりするために使用されるプロパティです。通常の「●」や「■」といった箇条書き記号の代わりに、任意の画像をリストマーカーとして表示できます。 listStyleImageプロパティの構文 listStyleImage プロパティを設定する場合の構文は以下のとおりです。 object.style.listStyleImage = none|url|initial|inherit 指定できる値の一覧 それぞれの値の意味は次の表のとおり

HTML DOMのlistStylePositionプロパティは、リスト項目（li要素）のマーカー（箇条書きの記号）の位置を設定または取得するために使用されるスタイルプロパティです。このプロパティを使うことで、JavaScriptから動的にリストマーカーの表示位置を変更できます。 listStylePositionプロパティの構文 listStylePositionプロパティを設定する場合の構文は以下の通りです。 object.style.listStylePosition = outside|inside|initial|inherit 指定できる値は次の通りです。 値説明 outs

listStyleTypeプロパティとはHTML DOMのStyleオブジェクトが持つlistStyleTypeプロパティは、リスト項目の先頭に表示されるマーカー（記号や番号）の種類を設定したり、現在設定されている値を取得したりするために使用されるプロパティです。構文listStyleTypeプロパティを設定する場合の構文は以下のとおりです。object.style.listStyleType = value主なプロパティ値の一覧listStyleTypeプロパティに指定できる主な値は以下のとおりです。値説明armenian伝統的なアルメニア数字をマーカーとして表示します。circle白抜きの

HTML DOM Meterオブジェクトとは HTML DOMにおけるMeterオブジェクトは、HTMLの<meter>要素をJavaScriptから操作・制御するためのインターフェースです。<meter>要素は、ディスク使用量やアンケート結果など、既知の範囲内における値をゲージ（計器）として視覚的に表示する際に使用されます。 注意：<meter>要素はプログレスバー（進捗状況の表示）として使用しないでください。あくまでゲージとしてのみ使用するのがルールです。進捗表示には<progress>要素を使うのが適切です。 構文 <meter>

HTML DOMのMeter optimumプロパティは、<meter>要素のoptimum属性に対応する数値を取得・設定するためのプロパティです。high、low、min、maxなどの各属性と組み合わせて使用することで、より正確で分かりやすい計測表示を実現できます。注意： <meter>要素はプログレスバー（進捗状況）としてではなく、ディスク使用量や投票結果など、固定範囲内における現在値を示すゲージ（計測器）としてのみ使用してください。進捗状況の表示には<progress>要素が適しています。構文optimumプロパティの値を取得する場合meterElem

HTML DOM Meter valueプロパティとはHTML DOMのMeter valueプロパティは、<meter>要素のvalue属性に対応する数値を取得（読み取り）または設定（書き込み）するためのプロパティです。このプロパティは、high・low・min・maxなどの属性と組み合わせて使用することで、より精度の高いゲージ表示を実現できます。注意：<meter>要素は進捗状況を示すプログレスバーとして使用するものではなく、あくまでゲージ（計測値の表示）としてのみ使用してください。進捗の表示には<progress>要素を使用するのが適切です。構文val

MouseEvent clientXプロパティとは HTML DOM の MouseEvent clientX プロパティは、マウスイベントが発生した際に、マウスポインタの水平方向（X）の座標を返します。この座標は、ブラウザの表示領域（ビューポート）の左端を基準としたピクセル単位の数値です。 垂直方向（Y）の座標を取得したい場合は、clientY プロパティと組み合わせて使用します。両者を併用することで、画面上のマウスポインタの正確な位置を特定できます。 構文 clientX の値を参照する基本的な構文は以下のとおりです。 MouseEventObject.clientX 戻り値は数値型（ピク

HTML DOMのStyleオブジェクトが持つfontプロパティは、CSSのフォントに関する6つの個別プロパティ（font-style、font-variant、font-weight、font-size、line-height、font-family）を一括して取得・設定するために使用されます。このうちfont-size（フォントサイズ）とfont-family（フォントファミリー）は必須の値であり、省略された他の値にはデフォルト値が自動的に適用されます。 fontプロパティの値を取得する構文 現在設定されているfontプロパティの値を取得する場合は、以下の構文を使用します。 object.

HTML DOMスタイルのfontFamilyプロパティとはHTML DOMのfontFamilyプロパティは、選択した要素に対してフォントファミリー（フォントのリスト）を設定または取得するために使用されるプロパティです。フォントを指定する際には、多くの環境で表示できるWebセーフフォントを使用し、さらに代替となるフォントを併せて指定することが推奨されています。構文fontFamilyプロパティを設定する場合の構文は以下のとおりです。object.style.fontFamily = font1, font2, etc.|initial|inheritここで、font1、font2などはカンマ