HTML

HTML DOMのGeolocation coordinatesプロパティは、ユーザーのデバイスの地球上における位置（緯度・経度）や高度を取得するために使用されます。このプロパティが動作するためには、事前にユーザーが位置情報の提供に同意する必要があります。これは、ユーザーのプライバシーを保護するために設けられた仕組みです。この機能を活用することで、さまざまなデバイスの位置情報を追跡することが可能になります。 coordinatesプロパティの一覧 coordinatesプロパティには、以下の7種類があります。 注意： これらのプロパティはすべて読み取り専用であり、戻り値の型はdouble（倍精

animationIterationCount プロパティは、CSS アニメーションが再生される回数を設定または取得するために使用される HTML DOM のスタイルプロパティです。このプロパティを使うことで、JavaScript から動的にアニメーションの繰り返し回数を制御できます。 構文（Syntax） animationIterationCount プロパティの基本的な構文は以下の通りです。 ■ animationIterationCount プロパティを設定する場合： object.style.animationIterationCount = number|infinite|init

animationNameプロパティは、CSSの@keyframesルールで定義されたアニメーション名を取得または設定するために使用されるHTML DOMスタイルプロパティです。JavaScriptから動的にアニメーションを切り替えたい場合に便利です。 構文 animationNameプロパティの基本的な構文は以下の通りです。 animationNameプロパティの設定： object.style.animationName = none|keyframename|initial|inherit 指定できる値 animationNameプロパティに設定できる値は以下の4種類です。 番号値と

animationPlayState プロパティは、CSS アニメーションの状態（実行中か一時停止中か）を取得・設定するために使用されます。このプロパティを活用することで、JavaScript からアニメーションの再生と一時停止を動的に切り替えることができ、インタラクティブな Web ページの作成に非常に便利です。 構文 animationPlayState プロパティを設定する場合の構文は以下の通りです。 object.style.animationPlayState = running|paused|initial|inherit; 設定できる値 animationPlayState プロ

animationTimingFunction プロパティは、アニメーションが1サイクルの中でどのように進行するかを指定するために使用されます。具体的には、アニメーションの速度カーブ（イージング）を設定または取得します。速度カーブとは、アニメーションがある状態から別の状態へ移行するまでの時間の進み方を定義するもので、これによってトランジションの滑らかさが決まります。 構文（Syntax） animationTimingFunction プロパティを設定する場合の構文は以下のとおりです。 object.style.animationTimingFunction = linear|ease|eas

backfaceVisibilityプロパティとは backfaceVisibilityプロパティは、要素がユーザーに対して反転した際に、その裏面（背面）を表示するかどうかを指定するためのプロパティです。このプロパティは主に3D変換（transform）と組み合わせて使用され、要素を回転させたときに裏面を見せるか、それとも非表示にするかを制御します。 例えば、カードをめくるようなアニメーション効果を実装する際に、表面と裏面で異なるコンテンツを表示したいケースなどで、このプロパティが重要な役割を果たします。 構文（Syntax） backfaceVisibilityプロパティを設定するための構

alignContentプロパティは、フレックスボックスやグリッドレイアウトにおいて、アイテムを整列するために使用されるプロパティです。特に、アイテムがコンテナ内の利用可能なスペースをすべて使っていない場合に、交差軸（垂直方向）に沿ってアイテムをどのように配置するかを指定できます。 構文 alignContentプロパティを設定するための構文は、以下の通りです。 【alignContentプロパティの設定】 object.style.alignContent = stretch|center|flex-start|flex-end|space-between|space-around|init

HTML DOMのStyle alignItemsプロパティは、フレックスコンテナ（flexible container）内に配置されたアイテムのデフォルトの整列方法（垂直方向の配置）を指定するために使用されるプロパティです。JavaScriptから動的にフレックスアイテムの配置を変更したい場合に、このプロパティを活用することで、コンテナ内のアイテムの位置を柔軟に制御できます。構文alignItemsプロパティを設定する場合の構文は以下のとおりです。object.style.alignItems = stretch|center|flex-start|flex-end|baseline|ini

HTML DOM の alignSelf プロパティは、フレックスコンテナ内にある特定のアイテムの配置（アラインメント）を指定するために使用されるプロパティです。このプロパティを利用することで、要素のグリッドレイアウトやフレックスボックスレイアウトにおいて、親コンテナに指定された align-items の値を、個々のアイテム単位で上書きすることができます。構文alignSelf プロパティを設定する場合の構文は以下のとおりです。object.style.alignSelf = auto|stretch|center|flex-start|flex-end|baseline|initial|i

animation プロパティとはCSS では、要素のプロパティの変化をアニメーションとして表現できます。animation プロパティを使えば、アニメーションに関するスタイルをまとめて定義することが可能です。また、animation-name、animation-duration、animation-iteration-count などの個別のプロパティを、animation キーワードを使って一括して指定することもできます。構文animation プロパティの構文は以下の通りです。object.style.animation = name duration timingFunction d

HTML DOMのanimationDelayプロパティは、CSSアニメーションが開始されるタイミングを指定するために使用されます。アニメーションを即座に開始させることも、一定時間待ってから開始させることも、あるいは途中から開始させることも可能です。構文（Syntax）animationDelayプロパティを設定する際の基本構文は以下のとおりです。object.style.animationDelay = time|initial|inherit設定できる値animationDelayプロパティには、以下の3つの値を指定できます。値説明timeアニメーションが開始されるまでの待ち時間を、秒（s

animationDirectionプロパティとはanimationDirectionプロパティは、CSSアニメーションの再生方向を指定するために使用されるプロパティです。アニメーションを順方向（通常）、逆方向、あるいは交互（alternate）に再生するかどうかを制御することができます。構文以下がanimationDirectionプロパティの基本構文です。■ プロパティの設定：object.style.animationDirection = normal|reverse|alternate|alternate-reverse|initial|inherit指定できる値animationD

animationDurationプロパティは、CSSアニメーションが1サイクルを完了するまでにかかる時間（再生時間）を指定するために使用されるHTML DOMスタイルオブジェクトのプロパティです。JavaScriptからこのプロパティを操作することで、実行中のアニメーションの速度を動的に変更することができます。CSSのanimation-durationプロパティに対応しています。 構文 animationDurationプロパティを設定する場合の基本構文は以下のとおりです。 object.style.animationDuration = "time|initial|inheri

animationFillModeプロパティは、CSSアニメーションの実行時間外、つまりアニメーション終了後や遅延（animation-delay）が指定されている期間に、スタイルをどのように適用するかを指定するためのプロパティです。このプロパティを活用することで、アニメーション開始前や終了後の要素の見た目を細かく制御できます。 構文 animationFillModeプロパティを設定するための構文は以下のとおりです。 object.style.animationFillMode = none|forwards|backwards|both|initial|inherit 指定できる値 an

HTML DOM の Form reset() メソッドは、フォーム内のすべての入力値を初期化し、各フォーム要素の value 属性で指定されたデフォルト値を再表示するためのメソッドです。いわば「リセットボタン」として機能し、フォームに入力されたデータを一括でクリアできます。なお、このメソッドは引数（パラメータ）を一切受け取りません。構文Form オブジェクトの reset() メソッドの基本的な構文は以下のとおりです。formObject.reset()使用例ここでは、reset() メソッドを使った具体的なサンプルコードを見てみましょう。<!DOCTYPE html> <

HTML DOMのForm submit()メソッドは、フォームのデータをaction属性で指定されたアドレスへ送信するために使用されます。送信ボタンと同じ役割を果たし、フォームデータをプログラムから送信できるのが特徴です。また、このメソッドは引数（パラメータ）を一切受け取りません。 構文 Form submit()メソッドの構文は以下のとおりです。 formObject.submit() サンプルコード Form submit()メソッドの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html> <head> <style>

HTML DOMのSpanオブジェクトは、HTMLの<span>要素に対応するオブジェクトです。<span>要素は、文章の一部をグループ化してスタイルを適用したり、JavaScriptから動的に操作したりする際によく使われるインライン要素です。 JavaScriptでは、createElement()メソッドを使って新しいspan要素を生成でき、getElementById()メソッドを使えば、すでにページ上に存在するspan要素へアクセスすることができます。 構文 それぞれの操作を行うための基本的な構文は以下のとおりです。 spanオブジェクトを作成する場合 v

HTML DOMのspecifiedプロパティは、ある属性が明示的に指定されているかどうかを判定するために使用されます。属性が指定されていればtrueを、指定されていなければfalseを返します。また、属性ノードを作成したものの、まだ要素に追加していない場合にもtrueを返すという特徴があります。構文specifiedプロパティの基本的な構文は以下のとおりです。attribute.specified使用例ここでは、画像要素にalt属性が指定されているかどうかをボタンのクリックで確認するサンプルを紹介します。<!DOCTYPE html> <html> <body&

HTML DOMのstopPropagation()イベントメソッドは、指定された要素におけるイベントの伝播（プロパゲーション）を停止するために使用されるメソッドです。これにより、子要素上で発生したクリックイベントが親要素へ伝わるのを防ぐことができます。なお、イベントの伝播は「イベントバブリング」とも呼ばれています。stopPropagation()メソッドの基本通常、DOM内の要素でイベントが発生すると、そのイベントは親要素へと順番に伝わっていきます。例えば、div要素の中にあるimg要素をクリックした場合、img要素のクリックイベントが発火した後、同じイベントがdiv要素にも伝播します。s

HTML DOM の storage イベントは、ウィンドウのストレージ領域(localStorage や sessionStorage)に変更が加えられたときに発生します。このイベントには重要な特徴があり、同じウィンドウ内での変更では発火せず、別のウィンドウやタブがそのストレージ領域を変更した場合にのみトリガーされるという点です。これにより、複数のタブ間でデータの同期を取る処理などに活用できます。 storage イベントの主なプロパティ イベントオブジェクトからは、以下のような情報を取得できます。 event.key: 変更されたキーの名前 event.oldValue: 変更前の値 e