HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. 【HTML】ドラッグした要素がドロップされたときにスクリプトを実行する方法

    ondrop属性とは HTMLのondrop属性は、ドラッグされた要素がドロップ先に置かれた瞬間に発火するイベントハンドラです。この属性を利用すると、ドロップ操作が完了したタイミングでJavaScriptなどのスクリプトを実行できます。 なお、ドロップを正しく処理するには、dragoverイベント側でevent.preventDefault()を呼び出し、ブラウザのデフォルト動作（リンクを開く・ファイルを開くなど）を無効化しておく必要がある点に注意しましょう。 ドラッグ＆ドロップに関連する主なイベント dragstart：要素のドラッグが開始されたときに発生 drag：要素をドラッグしてい

  2. HTMLでメディアの再生時間が変更されたときにスクリプトを実行する方法（ondurationchange属性）

    HTMLのondurationchange属性は、音声や動画などのメディアの再生時間（長さ）が変更されたタイミングでスクリプトを実行するためのイベントハンドラです。動画ファイルの読み込みが完了し、ブラウザがメタデータを取得して再生時間が確定したときなどに、このイベントが発生します。例えば、動画の長さをユーザーに通知したり、再生時間に応じた処理を行いたい場合に便利です。ondurationchange属性の基本的な使い方以下のコードは、ondurationchange属性を使って、動画の再生時間が変更されたときにアラートでその長さ（秒数）を表示するシンプルな実装例です。<!DOCTYPE

  3. HTMLで要素がドラッグされているときにスクリプトを実行する方法

    ondragover属性とはHTMLのondragover属性を使用すると、ドラッグ中の要素やテキストが有効なドロップ先の上にある間に、スクリプトを実行できます。ドラッグ＆ドロップ操作の途中段階で何らかの処理を行いたい場合に便利なイベント属性です。注意点として、ondragoverイベントはデフォルトではドロップ操作を許可しないため、ハンドラ内でevent.preventDefault()を呼び出してデフォルトの動作をキャンセルする必要があります。これを忘れると、ドロップが正しく機能しません。サンプルコード以下のコードを実行して、ondragover属性の実装を確認してみましょう。左側のボック

  4. HTMLのheaders属性でセルに関連するヘッダーセルを指定する方法

    HTMLでテーブルのセルに関連付けられた1つ以上のヘッダーセルを指定するには、headers属性を使用します。headers属性とはheaders属性は、現在のセル（td要素）がどのヘッダーセル（th要素）に関連しているかを示すための属性です。値には、ヘッダーセルに設定されたid属性の値を指定します。この属性は主にスクリーンリーダーなどの支援技術向けのもので、テーブルの構造を正確に伝えることで、アクセシビリティの向上に役立ちます。コード例以下のコードを実行して、headers属性の使い方を確認してみましょう。<!DOCTYPE html> <html>   &

  5. HTMLのoncut属性でテキスト切り取り時にスクリプトを実行する方法

    oncut属性とはHTMLのoncut属性は、ユーザーが要素のテキストを切り取った（カットした）瞬間にスクリプトを実行するためのイベント属性です。テキスト入力フィールドなどで、ユーザーが切り取り操作を行った際に特定の処理をトリガーしたい場合に活用できます。oncut属性の使用例以下のコードを実行して、oncut属性の動作を確認してみましょう。テキストボックス内の文字を切り取ると、イベントが発火してメッセージが表示されます。<!DOCTYPE html> <html>    <body>       <i

  6. HTMLで要素をダブルクリックしたときにスクリプトを実行する方法

    HTMLでは、ondblclick属性を使用することで、要素がダブルクリックされたタイミングでスクリプト（JavaScript）を実行できます。ボタンや画像、テキストなど、さまざまなHTML要素に設定可能です。ondblclick属性の基本構文ondblclick属性の値には、実行したいJavaScriptの関数名やコードを指定します。<要素名 ondblclick=関数名()></要素名>サンプルコード以下のコードは、ボタンをダブルクリックするとアラートが表示されるシンプルな例です。実際にブラウザで動作を確認してみてください。<!DOCTYPE html>

  7. HTMLで要素がまだ関連していないことを指定する方法

    ```html HTML5では、hidden属性を使うことで、要素を非表示にできます。この属性は、「その要素が現時点ではユーザーに関連していない（もはや重要ではない）」ことを示すために使用します。 hidden属性の基本 hidden属性が指定された要素は、ブラウザ上に表示されなくなります。この属性は論理属性（ブール型属性）のため、属性名を記述するだけで有効になります。 なお、hidden属性は単なる見た目上の非表示ではなく、「今はまだ関連性がない」という意味を表すセマンティックな属性です。そのため、レイアウト調整などの装飾目的での非表示には、CSSの display: none; を使うこと

  8. HTMLで要素に一意のIDを指定する方法｜id属性の基本と使い方

    HTMLで特定の要素に一意のIDを割り当てるには、id属性を使用します。id属性は、ページ内の1つの要素だけを識別するためのもので、CSSでのスタイル指定や、JavaScriptによる動的な操作に広く活用されています。 id属性の基本的なルール id属性を使う際は、以下のポイントに注意しましょう。 IDは同じページ内で重複してはいけません（必ず一意である必要があります）。 ID名には英数字・ハイフン（-）・アンダースコア（_）などが使用でき、先頭は文字から始めるのが安全です。 大文字と小文字は区別されるため、「myId」と「myid」は別のIDとして扱われます。 実装例：id属性を使ったサ

  9. HTMLで高値とみなされる範囲を設定するには？meter要素のhigh属性の使い方

    HTMLで「高い」とみなされる値の範囲を設定するには、<meter>要素にhigh属性を指定します。 high属性とは？ high属性は、計測された値がどの時点から「高い」と判断されるかを示すしきい値です。<meter>要素は、ディスク使用量やバッテリー残量など、既知の範囲内にあるスカラー値をゲージ形式で視覚的に表示するために使用されます。 なお、<meter>要素では min（最小値）、max（最大値）、low（低値のしきい値）などの属性と組み合わせることで、より詳細に状態を表現できます。 コード例 以下は、水位を表示するメーターにhigh属性を実装したサ

  10. 【HTML】oncopy属性を使って要素のテキストがコピーされたときにスクリプトを実行する方法

    ユーザーがページ上の要素のテキストをコピーした瞬間に処理を実行したい場合は、HTMLの oncopy 属性を使用します。この属性にJavaScriptの関数を指定しておくことで、コピー操作が行われたタイミングで任意のスクリプトをトリガーできます。 oncopy属性の実装例 以下は、入力フィールド内のテキストがコピーされたことを検知し、メッセージを表示するシンプルなサンプルコードです。 <!DOCTYPE html> <html> <body> <input type=text oncopy=display() value=Copy me>

  11. HTMLでテキストトラックの種類を指定する方法｜kind属性の使い方とサンプルコード

    HTMLでテキストトラック（text track）の種類を指定するには、<track>要素に用意されているkind属性を使用します。例えば、字幕ファイルを読み込む場合は、kind属性の値として「subtitles」を設定します。kind属性で指定できる主な値kind属性には、テキストトラックの用途に応じて以下のような値を指定できます。subtitles … 字幕（映像のセリフなどを翻訳・表示する場合）captions … キャプション（効果音や話者情報も含めた補助的な文字情報）descriptions … 映像の内容を音声で説明するための記述chapters … 章タイトルなどナビ

  12. HTMLのismap属性で画像をサーバーサイド画像マップとして設定する方法

    HTMLのismap属性とは HTMLでは、<img>タグにismap属性を指定することで、画像をサーバーサイド画像マップ（server-side image map）として設定できます。 この属性が有効になっていると、ユーザーが画像上の任意の位置をクリックした際に、そのクリック座標がURLクエリ文字列としてサーバーに自動的に送信されます。サーバー側では、受信した座標情報をもとに、クリックされた場所に応じた処理を実行することが可能です。 使用例 以下のコードは、ismap属性を実装する基本的な例です。実際にブラウザで実行して動作を確認してみてください。 <!DOCTYPE h

  13. HTMLのobject要素でリソースのURLを指定する方法｜data属性の使い方

    HTMLでは、<object>要素が使用するリソースのURLを指定するためにdata属性を使用します。data属性には、ページに埋め込みたいファイル（PDF、動画、画像など）へのパスを記述します。 基本構文 <object>要素にdata属性を追加するだけで、指定したリソースを読み込むことができます。また、width属性とheight属性を併用することで、表示サイズを制御できます。 サンプルコード 以下のコードは、data属性を使ってオブジェクトのリソースURLを指定する実装例です。実際に動かして挙動を確認してみてください。 <!DOCTYPE html>

  14. 【HTML】ondragover属性で要素が有効なドロップターゲット上にドラッグされたときにスクリプトを実行する方法

    ondragover属性とは HTMLで要素をドラッグ＆ドロップする際、ドラッグ中の要素が有効なドロップターゲット上に重なっている間、ondragover属性に設定したスクリプト（イベントハンドラ）が継続的に発火します。 ここで重要なポイントがあります。ブラウザのデフォルト動作ではデータのドロップが禁止されているため、dragoverイベント内で必ず event.preventDefault() を呼び出してデフォルトの挙動をキャンセルする必要があります。この処理を忘れると、その後の drop イベントが発火せず、ドロップ処理が一切行われません。 実装例 以下のコードは、ondragover

  15. HTMLのdata-*属性を使ってページ・アプリ専用のカスタムデータを保存する方法

    HTMLでは data-* 属性を使用することで、そのページやアプリケーションに固有のカスタムデータ（プライベートな情報）を要素に保存できます。JavaScriptなどからアクセスする必要のある補足的な値を、マークアップ上に直接埋め込める便利な仕組みです。 data-*属性の命名ルール data-* 属性にはいくつかの決まりがあります。 必ず「data-」という接頭辞から始めること 属性名に大文字（A〜Z）は使用できないこと（すべて小文字で記述） 接頭辞の後に続ける名前は自由に設定できる（例：data-rank-type、data-user-id など） 実装例 以下のコードでは、リス

  16. HTMLのonemptied属性でメディアファイルが利用できないときにスクリプトを実行する方法

    HTMLではonemptied属性を使用することで、メディアファイルが利用できない状態、あるいは空の状態になったときにスクリプトを実行できます。onemptied属性は、<video>要素や<audio>要素といったメディア要素と組み合わせて使われるイベント属性です。プレイリストが空になったり、メディアリソースが予期せず読み込めなくなったりした際に、JavaScriptの関数を呼び出してユーザーへ通知を表示するなどの処理を行えます。onemptied属性の基本的な使い方onemptied属性には、イベント発生時に実行したいJavaScriptの関数名を指定します。実際に

  17. HTMLでメディアの再生終了時にスクリプトを実行する方法｜onended属性の使い方

    HTMLでは、onended属性を使用することで、動画や音声などのメディアが最後まで再生されたタイミングでスクリプトを実行できます。この属性を活用すれば、「ご視聴ありがとうございました」「次回もお楽しみに！」といったメッセージを視聴者に表示することが可能です。使用例以下のコードを実行すると、onended属性の実際の動作を確認できます。動画の再生が終了すると、自動的にアラートでメッセージが表示される仕組みです。<!DOCTYPE HTML> <html>     <body>    &nb

  18. HTMLのdirname属性とは？テキストの書字方向を送信する方法を解説

    HTMLのdirname属性を使うと、ユーザーが入力したテキストの書字方向（テキストディレクション）をフォーム送信時にサーバーへ送信できます。 送信される値は、対象の入力フィールド（input要素）のname属性の値に「.dir」を付けた名前になります。例えば、name=snameでdirname=sname.dirと指定した場合、「sname.dir」というキーでテキストの方向情報が送られます。この機能は、日本語や英語のような左から右へ記述する言語と、アラビア語やヘブライ語のような右から左へ記述する言語が混在するフォームで特に役立ちます。 使用例 以下のコードを実行すると、dirname属性

  19. HTMLのondragstart属性でドラッグ操作の開始時にスクリプトを実行する方法

    HTMLでは、ondragstart属性を使用することで、ドラッグ操作が開始された瞬間にスクリプト（JavaScript）を実行できます。この属性は、ドラッグ＆ドロップ機能を実装する際に、ドラッグ開始時の初期化処理やドラッグするデータの設定などを行うために活用されます。ondragstart属性の基本ondragstart属性は、draggable=trueが設定された要素のドラッグが開始されたときに発生するイベントハンドラです。通常は、event.dataTransfer.setData()メソッドを組み合わせて、ドラッグ対象のデータ（要素のIDなど）を設定するために使用されます。実装例以下

  20. 【HTML】formaction属性でフォーム送信時のデータ送信先を設定する方法

    HTMLでは、formaction属性を使用することで、フォームが送信されたときにフォームデータを送信する先（URL）を設定できます。 formaction属性とは 通常、フォームの送信先は<form>要素のaction属性によって決まります。しかし、formaction属性を<button>要素や<input type=submit>要素に指定すると、そのボタンがクリックされた場合に限り、action属性の設定を上書きして、指定したURLへデータを送信できます。 この仕組みを活用すれば、1つのフォームから複数の送信先を使い分けることが可能になります。たとえ

Total 2020 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:76/101  20-コンピューター/Page Goto:1 70 71 72 73 74 75 76 77 78 79 80 81 82