HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTMLのfor属性を使ってラベルとフォーム要素を紐付ける方法

    HTMLでは、for属性を使用することで、ラベル（<label>）を特定のフォーム要素に紐付けることができます。for属性の値には、関連付けたい入力要素のid属性と同じ値を指定します。 この属性を正しく設定すると、ユーザーがラベルのテキストをクリックしたときに、対応するラジオボタンやチェックボックスなどが自動的に選択されるようになります。これは、特にスマートフォンなどのタッチデバイスにおいて、操作性（ユーザビリティ）とアクセシビリティを大きく向上させる重要な機能です。 for属性の基本的な使い方 <label>要素のfor属性に、対象となるフォーム要素のid値を指定しま

  2. 【HTML】form属性で要素が属するフォームを指定する方法

    HTMLのform属性とは？ HTMLでは、form属性を使用することで、要素がどのフォームに属するかを指定できます。通常、フォーム部品は<form>タグの中に記述しますが、form属性を使えば、タグの外側に配置したボタンや入力フィールドでも、特定のフォームと関連付けることが可能です。 form属性のメリット フォームのマークアップとボタンの配置を分離できるため、レイアウトの自由度が向上する ページのデザインに合わせて、送信ボタンを任意の場所に設置できる サンプルコード 以下のコードを実行して、form属性の動作を確認してみましょう。この例では、フォームの外側にある送信ボタンが

  3. HTMLのonwaiting属性とは？動画が一時停止・バッファリング中にスクリプトを実行する方法

    HTMLのonwaiting属性は、動画が一時停止し、再生を再開するためにバッファリングを行っているときに発生するイベントです。ネットワーク速度の低下などで動画が途切れ、読み込み待ちの状態になった瞬間に、指定したJavaScriptの関数を実行できます。例えば、「バッファリング中です」といったメッセージをユーザーに表示したり、ローディングアニメーションを表示したりする処理に活用すると便利です。onwaiting属性の基本的な使い方以下のコードでは、video要素にonwaiting属性を設定し、バッファリングが発生したときに画面上のテキストを変更しています。実際に動作を確認したい場合は、次のコ

  4. マウスポインタがHTML要素の上に移動したときにスクリプトを実行する方法

    HTMLでは、onmouseover属性を使うことで、マウスポインタが要素の上に移動した瞬間にスクリプト（JavaScript）を実行できます。ボタンのハイライト表示やツールチップの出しなど、インタラクティブな演出を手軽に実装できる便利なイベント属性です。実装例次のコードを実行して、onmouseover属性の実際の動作を確認してみましょう。<!DOCTYPE html> <html>    <body>       <h3 id = "myid" onmouseover = &qu

  5. 【HTML】onpause属性の使い方｜メディア一時停止時にスクリプトを実行する方法

    onpause属性とはHTMLのonpause属性は、動画や音声などのメディアが一時停止（ポーズ）された瞬間に指定したJavaScriptの関数を実行するためのイベントハンドラです。ユーザーが再生コントロールの停止ボタンを押した場合でも、スクリプトからpause()メソッドを呼び出してプログラム的に停止させた場合でも、このイベントは発生します。例えば、「メディアが一時停止されたら画面にメッセージを表示する」「視聴履歴を記録する」といった処理を、onpause属性を使えば簡単に実装できます。実装例：メディアの一時停止を検知して表示を切り替える以下のコードでは、動画が一時停止されると、見出しのテキ

  6. 【HTML】要素がスクロールされたときにスクリプトを実行する方法（onscroll属性の使い方）

    Webページでは、要素がスクロールされたタイミングで何らかの処理を実行したいケースがよくあります。そんなときに活躍するのが onscroll 属性（onscrollイベント）です。 要素がスクロールされると、onscroll 属性に設定した処理が自動的に発火します。この記事では、実際に動作するサンプルコードを使って、onscroll属性の基本的な使い方を解説します。 onscroll属性の実装例 以下のサンプルでは、青い枠のボックス内をスクロールすると、テキストの色が青色に変化する仕組みになっています。実際にコードをコピーしてブラウザで開き、ボックスをスクロールしてみてください。 <!D

  7. HTMLのonreset属性でフォームのリセットボタン押下時にスクリプトを実行する方法

    フォームがリセットされると、onreset属性に設定したスクリプトがトリガーされます。<form>タグにこの属性を追加することで、ユーザーがリセットボタンをクリックしたタイミングで任意のJavaScript関数を呼び出すことができます。 サンプルコード 以下のコードは、onreset属性を実装した例です。リセットボタンがクリックされると、アラートが表示されます。 <!DOCTYPE html> <html>    <body>       <form

  8. HTMLでブラウザウィンドウのサイズ変更時にスクリプトを実行する方法

    Webブラウザのウィンドウサイズが変更されたときに処理を実行したい場合は、onresize属性を使用します。この属性は、ユーザーがブラウザウィンドウの大きさを変更した瞬間に自動的にトリガーされ、指定したJavaScript関数を呼び出すことができます。onresize属性の基本的な使い方body要素にonresize属性を設定し、実行したい関数名を指定します。以下はその基本構文です。<body onresize = 関数名()>実装例実際にブラウザウィンドウのリサイズを検知してアラートを表示するサンプルコードです。以下のコードを保存してブラウザで開き、ウィンドウのサイズを変更してみ

  9. HTMLで画像マップの領域座標を設定する方法【coords属性の使い方】

    HTMLで画像マップ（イメージマップ）内のクリック可能な領域の座標を設定するには、<area>要素のcoords属性を使用します。coords属性の基本coords属性は、shape属性で指定した形状に応じて、リンク先を持つ領域の座標を定義します。指定できる形状は以下の3種類です。rect（矩形）：左上と右下の2点の座標を「x1,y1,x2,y2」の形式で指定します。circle（円形）：中心の座標と半径を「x,y,半径」の形式で指定します。poly（多角形）：各頂点の座標を「x1,y1,x2,y2,…」の形式で順番に指定します。コード例以下のコードは、coords属性を使って円形

  10. HTMLにオーディオ・ビデオコントロールを組み込む方法を解説

    HTMLで動画や音声ファイルを扱う際、controls属性を指定するだけで、ブラウザ標準の操作パネル（再生・一時停止ボタン、音量調整、シークバーなど）を簡単に表示できます。特別なスクリプトは不要で、属性を1つ追加するだけで実装できるのが魅力です。controls属性の基本videoタグまたはaudioタグにcontrolsと記述するだけで、ユーザーがメディアを自由に操作できるようになります。この属性が指定されていない場合、再生ボタンなどは表示されず、自動的に再生されない限りコンテンツを視聴できません。実装例以下のコードは、videoタグにcontrols属性を適用したシンプルなサンプルです。実

  11. HTMLの検索フィールドでスクリプトを実行する方法｜onsearch属性の使い方

    HTMLでは、onsearch属性を使うことで、ユーザーが検索フィールド（<input type=search>）に文字を入力し、Enterキーまたはフィールド右側の「×」ボタンを押したタイミングでJavaScriptを実行できます。検索フォームの挙動をカスタマイズしたい場合に便利な属性です。 実装例 以下のコードを実行すると、onsearch属性の動作を実際に確認できます。検索フィールドに任意のキーワードを入力して、Enterキーを押してみてください。 <!DOCTYPE html> <html>    <body> &nb

  12. HTMLのcontent属性でhttp-equiv・name属性に関連付けられた値を設定する方法

    HTMLでは、<meta>タグのcontent属性を使用することで、http-equiv属性またはname属性に関連付けられた値を設定できます。この属性は、ページの概要（description）やキーワード、文字コードの指定など、メタデータを定義する際に欠かせない重要な役割を担っています。 content属性とは content属性は、meta要素においてname属性やhttp-equiv属性で指定した項目に対して、実際の値を与えるための属性です。 name属性との組み合わせ：ページの説明文（description）やキーワード（keywords）、作成者（author）などの情

  13. マウスポインタがHTMLの要素から移動したときにスクリプトを実行する方法

    onmouseout属性とは マウスポインタがある要素の外へ移動したタイミングで処理を実行したい場合は、HTMLのonmouseout属性を使用します。この属性にJavaScriptの関数を指定しておくと、ユーザーがマウスをその要素から離した瞬間に、指定したスクリプトが自動的に呼び出されます。 サンプルコード 以下は、見出し（h3要素）からマウスポインタが離れたときに、文字色を赤に変更するシンプルな実装例です。 <!DOCTYPE html> <html> <body> <h3 id=myid onmouseout=mouseOut()>

  14. ブラウザがオンラインになったときにスクリプトを実行するには？【HTMLのononline属性】

    ウェブブラウザがオフラインからオンライン状態に切り替わると、ononline 属性（イベント）がトリガーされます。このイベントを利用すれば、ネットワーク接続が復帰した瞬間にJavaScriptの処理を実行することが可能です。逆に、接続が切断されたタイミングで何らかの処理を行いたい場合は onoffline 属性を使用します。両者を組み合わせることで、ネットワークの接続状態に応じた柔軟なWebアプリケーションを構築できます。サンプルコード<!DOCTYPE html> <html>   <body ononline = "onlineF

  15. 【HTML】マウスポインタが要素上を移動している間にスクリプトを実行する方法（onmousemove属性）

    HTMLでは、onmousemove属性を使うことで、マウスポインタが要素の上を移動している間、継続的にJavaScriptの処理を実行できます。ポインタが要素内で動くたびにイベントが発生し、そのたびに指定した関数が呼び出される仕組みです。onmousemove属性とはonmousemoveは、マウスカーソルが対象の要素の上で動いている間、何度も繰り返し発火するイベントハンドラです。要素に乗った瞬間に一度だけ発生する「onmouseover」とは異なり、動き続けている限り何度でもトリガーされる点が特徴です。実装例以下のコードは、見出し（h3要素）の上でマウスを動かすと、文字色が赤に変わるシンプ

  16. ブラウザがオフラインになったときにスクリプトを実行する方法｜HTMLのonoffline属性の使い方

    Webブラウザがオフラインで動作を開始すると、onofflineイベントが発生します。このイベントを利用すれば、ネットワーク接続が切断された瞬間にJavaScriptの関数を呼び出し、ユーザーへの通知や特定の処理を実行することが可能です。onoffline属性とはonoffline属性は、<body>タグなどの要素に設定できるイベントハンドラで、ブラウザが「オンライン」から「オフライン」へ切り替わったタイミングで、指定したスクリプトが実行されます。また、対になる属性として、オフラインからオンラインに復帰したときに発火するononline属性も用意されています。両者を組み合わせること

  17. 【HTML】ユーザーがページから離脱するときにスクリプトを実行する方法（onpagehideイベント）

    onpagehideイベントとはユーザーがあるページから別のページへ移動したタイミングでスクリプトを実行したい場合は、HTMLの onpagehide イベントを使用します。このイベントは、ユーザーがリンクをクリックして別ページへ遷移したり、ブラウザのタブやウィンドウを閉じたり、フォームを送信したりといった「ページを離れる操作」が行われたときに発生します。HTML属性として記述する方法HTML要素の属性として直接指定する場合は、次のように記述します。<p onpagehide=myScript>このように書くことで、そのページが非表示になるときに myScript で指定した処理が

  18. HTMLでブラウザウィンドウを閉じたときにスクリプトを実行する方法

    Webブラウザのウィンドウが閉じられた瞬間にスクリプト（JavaScript）を実行したい場合は、HTMLのonunload属性を利用できます。この属性は、ページがアンロードされるタイミング――つまりユーザーがタブやウィンドウを閉じたとき、あるいは別のページへ移動したとき――に、指定したJavaScript関数を自動的に呼び出します。実装例以下のコードは、onunload属性を使って、ウィンドウが閉じられたときにアラートを表示するシンプルなサンプルです。<!DOCTYPE html> <html>    <body onunload = &qu

  19. 【HTML】onunload属性でページのアンロード時にスクリプトを実行する方法

    Webページがアンロード（unload）されたタイミングで処理を実行したい場合は、onunload属性を使用します。この属性は、ユーザーがページを閉じたり、別のページへ移動したりして、現在のページがアンロードされるときに発火します。 基本的な使い方 body要素にonunload属性を設定し、実行したい関数を指定するだけで実装できます。以下のコード例をご覧ください。 <!DOCTYPE html> <html> <body onunload=display()> <h2>Tutorialspoint</h2> <h3&

  20. HTMLの要素上でマウスホイールが上下に回転したときにスクリプトを実行する方法

    HTMLのonwheel属性は、要素の上でマウスホイールを上下に回転（スクロール）させたときに発生するイベントハンドラです。この属性を利用すると、ユーザーがマウスホイールを操作した瞬間に任意のJavaScript関数を実行できます。例えば、見出しの上でホイールを回すと文字色が変わるといった、インタラクティブな演出も簡単に実装可能です。以下のサンプルコードを実行して、onwheel属性の実際の動作を確認してみてください。サンプルコード<!DOCTYPE html> <html>    <body>      

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