HTML

TouchEvent touchesプロパティとはHTML DOMのTouchEventにおけるtouchesプロパティは、タッチ面（タッチスクリーンなど）上で発生したすべての接触ポイント（コンタクトポイント）のリストに対応するTouchListオブジェクトを返します。注意：指定されたノード、またはその子ノード上でタッチが発生した場合、その後に続くタッチ操作は、同じノード上で発生していなくてもカウント対象になります。構文TouchListオブジェクトを取得するための構文は以下の通りです。event.touches補足：本記事のタッチイベントのサンプルコードは、モバイル端末やタッチ操作対応デバイ

HTML DOMのTouchEventオブジェクトは、タッチデバイスでHTMLドキュメントの要素を操作した際に発生するイベントを表すものです。スマートフォンやタブレットなど、タッチ操作に対応した端末でのユーザー操作をJavaScriptで検知・処理するために欠かせない仕組みとなっています。 TouchEventには、以下のようなプロパティやメソッドが用意されています。 プロパティ／メソッド説明 altKeyタッチイベント発生時にAltキーが押されていたかどうかに対応する真偽値（Boolean）を返します changedTouchesタッチイベントの状態変化時に発生したすべての接点（コ

HTML DOMのtouchmoveイベントは、タッチスクリーン上で指（タッチポイント）が移動している間、継続的に発生するイベントです。指を画面に触れたままスライドさせるたびに何度も発火するため、ドラッグ操作やペイントアプリ、ミニゲームなど、インタラクティブなタッチUIを実装する場面で非常に役立ちます。 ※ 注意：このイベントはスマートフォンやタブレットなどタッチ対応デバイス専用です。マウス操作では発生しないため、動作確認の際はタッチ端末を使用してください。 touchmoveイベントの基本構文 1. HTMLの属性として記述する場合 ontouchmove = "eventFu

HTML DOMのtouchstartイベントは、ユーザーがタッチスクリーンに指を触れた瞬間に発生するイベントです。スマートフォンやタブレットなど、タッチ操作に対応したデバイスで動作するWebアプリケーションを開発する際に重要な役割を果たします。注意：このイベントはタッチ対応デバイス（モバイル端末やタッチパネル搭載PCなど）でのみ発生します。マウスのみの環境では動作しないため、必要に応じてmousedownイベントとの併用も検討しましょう。touchstartイベントの構文HTML属性で指定する場合ontouchstart = eventFunction()JavaScriptで指定する場合e

HTML DOMのTrack defaultプロパティは、トラック（字幕やキャプションなど）がユーザーの設定に反しない限り有効化されるかどうかを示すブール値（true/false）を取得・設定するためのプロパティです。 注意： 1つのメディア要素（audio/video）に対して、defaultが設定されたトラックは1つだけである必要があります。複数のトラックにdefaultを指定した場合、ブラウザによって動作が異なる可能性があります。 構文 ブール値を取得する場合 trackObject.default defaultプロパティに値を設定する場合 trackObject.default =

HTML DOM Track kind プロパティとは HTML DOM の kind プロパティは、<track> 要素の kind 属性の値を取得・設定するためのものです。この属性を使うことで、動画や音声ファイルに関連付けるテキストトラックの種類（字幕やキャプションなど）を指定できます。 構文 kind プロパティの値を取得する場合は以下のように記述します。 trackObject.kind kind プロパティに新しい値を設定する場合は次のとおりです。 trackObject.kind = stringValue stringValue に指定できる値の一覧 「strin

HTML DOM Track labelプロパティとは？ HTML DOM の Track label プロパティは、<track> 要素の label 属性の値を取得・設定するためのプロパティです。label 属性には、動画プレイヤー上で字幕トラックなどを選択する際にユーザーへ表示されるテキスト（トラック名）を指定します。 構文 label 属性の値を取得する場合 trackObject.label label 属性に値を設定する場合 trackObject.label = labelValue サンプルコード 以下は、Track label プロパティを使った具体的な使用例です

HTML DOM Trackオブジェクトとは HTML DOM の Track オブジェクトは、HTML の <track> 要素を JavaScript から操作するためのインターフェースです。<track> 要素は、動画に対して字幕（subtitles）やキャプション（captions）などのテキストトラックを関連付ける際に使用されます。 <track> 要素の作成方法 JavaScript で新しい <track> 要素を作成するには、document.createElement() メソッドを使用します。 var trackObject

HTML DOM の Time オブジェクトが持つ dateTime プロパティは、HTML の <time> 要素に設定された datetime 属性の値を取得（読み取り）したり、新しい値を設定（書き込み）したりするために使用されます。 datetime 属性は画面上には表示されず、機械が判読できる形式（ISO 8601 形式）で日時を記録します。これにより、検索エンジンやカレンダーアプリなどがページ内の日付・時刻情報を正確に解釈できるようになります。 dateTime プロパティの構文 1. 値を取得する場合（文字列として返す） timeObject.dateTime

HTML DOM Timeオブジェクトとは？HTML DOMのTimeオブジェクトは、HTML5で導入された<time>要素をJavaScriptから操作するためのインターフェースです。<time>要素を活用することで、人間が読める形式の日付・時刻情報とともに、機械が解釈できる正確な時刻データをWebページに埋め込むことができます。<time>要素を作成するJavaScriptで新しい<time>要素を動的に生成するには、document.createElement()メソッドにTIMEを指定します。var timeObject = docume

HTML DOM timeStampイベントプロパティの概要HTML DOMのtimeStampプロパティは、イベントが生成・発火された時点からの経過時間をミリ秒単位で返します。注意：timeStampは、対象のイベントがイベントシステムによってサポートされている場合にのみ機能します。すべてのイベントで利用できるわけではない点に留意してください。構文時間の値（ミリ秒）を取得するには、以下のように記述します。event.timeStampHTML DOM timeStampプロパティの使用例ここでは、timeStampプロパティを使った簡単なミニゲームの例を紹介します。緑色の「安全エリア」内でカ

HTML DOM Titleオブジェクトの概要HTML DOM の Title オブジェクトは、HTML ドキュメント内の <title> 要素を表すオブジェクトです。このオブジェクトを利用することで、JavaScript からページのタイトルを動的に取得したり変更したりすることが可能になります。<title> 要素の作成方法新しい <title> 要素を作成するには、document.createElement() メソッドを使用します。var titleObject = document.createElement(TITLE)ここで作成した「title

HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使

HTML DOM の text プロパティは、ドキュメント内の <title> 要素が持つテキスト（タイトル文字列）を取得、または設定するために使用されます。このプロパティを活用することで、JavaScript からページタイトルを動的に読み取ったり変更したりすることが可能になります。 構文（シンタックス） テキスト値を取得する場合 titleElementObject.text テキスト値を文字列として設定する場合 titleElementObject.text = string 設定できる値は文字列のみです。指定した文字列がブラウザのタブやお気に入りに表示されるページタイトルと

touchcancelイベントとはHTML DOMのtouchcancelイベントは、1つ以上のタッチイベントが中断されたときに発生します。たとえば、指で画面に触れている最中にブラウザがスクロールなどのジェスチャーを検出したり、システム側がタッチ処理をキャンセルしたりした場合に発火します。注意：このイベントはタッチ対応デバイス（スマートフォンやタブレットなど）でのみ機能します。マウスのみを使用するPC環境では発生しないため、実装時にはその点を考慮しておきましょう。構文touchcancelイベントの設定方法は、HTML属性を使う方法とJavaScriptを使う方法の2種類があります。HTML属

touchendイベントとはHTML DOMのtouchendイベントは、ユーザーがタッチスクリーンから指を離した（タッチが解除された）瞬間に発生するイベントです。タップ操作の終了を検知したい場合などに活用されます。注意： このイベントはスマートフォンやタブレットなどのタッチ対応デバイスでのみ動作し、マウス操作では発生しません。touchendイベントの基本構文touchendイベントの登録方法には、主に以下の2つの方法があります。HTML属性で指定する場合ontouchend = eventFunction()JavaScriptで指定する場合eventObject.ontouchend =

HTML DOM TouchEvent altKeyプロパティとはHTML DOMのTouchEvent altKeyプロパティは、タッチイベントが発生した時点でAltキーが押されていたかどうかに対応するブール値（Boolean）を返します。このプロパティを利用することで、タッチ操作と同時に修飾キーが使われたかどうかを判定できます。構文ブール値（true / false）を返します。touchEvent.altKeyここで返される「booleanValue」には、以下のいずれかの値が設定されます。booleanValue詳細trueタッチイベント発生時にAltキーが押されていたことを示しますf

HTML DOMのTouchEventオブジェクトに含まれるctrlKeyプロパティは、タッチイベントが発生した瞬間にCtrlキーが押されていたかどうかを示すブール値（Boolean）を返します。タッチ操作とキーボード操作を組み合わせたインタラクションを実装したい場合に役立つプロパティです。 構文 このプロパティは、以下のように記述することでブール値（true / false）を取得できます。 touchEvent.ctrlKey 戻り値 取得できる「booleanValue」には、次の2種類があります。 booleanValue詳細 trueタッチイベントが発生したときに、Ctrl

HTML DOM offsetHeightプロパティの概要HTML DOMのoffsetHeightプロパティは、要素の高さに対応する数値を返します。この値には、パディング（padding）、ボーダー（border）、スクロールバーが含まれますが、マージン（margin）は含まれません。要素が画面上で実際に占める高さを取得したい場合に非常に便利なプロパティです。レイアウト計算や、要素のサイズに応じた動的な処理を行う際によく使われます。構文数値を返す場合の基本的な構文は以下の通りです。HTMLelement.offsetHeight戻り値はピクセル単位の整数値（Number型）として返されます。

HTML DOM offsetLeftプロパティとは HTML DOMのoffsetLeftプロパティは、指定した要素の左端が親要素の左側からどのくらいの位置にあるかを表す数値を返します。戻り値はピクセル（px）単位の整数値です。 このプロパティは、要素の配置計算やドラッグ＆ドロップ機能の実装など、正確な位置情報が必要となる場面で非常に役立ちます。 構文 構文は以下の通りです。 HTMLelement.offsetLeft offsetLeftが返す値には、次のものが含まれます。 指定した要素自体の左位置とマージン（margin） 親要素の左パディング（padding）、スクロールバー、ボー