HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTMLで動画・音声の音量が変更されるたびにスクリプトを実行する方法（onvolumechange属性）

    onvolumechange属性とはonvolumechange属性は、Webページ上で再生している動画（video）や音声（audio）の音量がユーザーによって変更されたタイミングでスクリプトを実行するためのイベント属性です。このイベントは、音量を上げたとき・下げたときだけでなく、ミュート（消音）に切り替えた場合などにも発生します。音量操作に連動したUI表示やログ記録など、さまざまな場面で活用できます。実装例以下のコードを実行すると、onvolumechange属性の実際の動作を確認できます。動画の音量バーを操作すると、見出しのテキストが「音量が変更されました」に切り替わります。<!D

  2. HTMLで人間が読める形式の日付・時刻を表示する方法（timeタグの使い方）

    HTMLで人間が読める形式の日付や時刻を表示するには、<time>タグを使用します。このタグを活用することで、画面上のユーザーには自然で分かりやすい形式の日時を表示しながら、同時に機械（検索エンジンやブラウザなど）にも解釈可能な形式で情報を提供できます。timeタグの主な属性<time>タグで利用できる属性は以下のとおりです。属性値説明datetimedatetime機械が読み取り可能な形式で日時を指定します基本的な使用例以下のコードを実行すると、時刻を表示できます。<!Doctype html> <html> <head>

  3. HTMLの定義リストで用語の開始を定義するには？（dtタグの使い方）

    HTMLの<dt>タグは、定義リスト（記述リスト）内において用語の開始を定義するために使用します。定義リストは通常のリストと似ていますが、各項目が「用語」と「その説明」の2つの要素で構成されている点が大きな特徴です。 定義リストを構成する3つのタグ 定義リストは、以下の3つのタグを組み合わせて作成します。 <dl> … 定義リスト全体を囲むコンテナ要素 <dt> … 定義対象となる用語（Definition Term） <dd> … 用語に対する説明や定義（Definition Description） コード例 次のコードを実行すると、&l

  4. HTML5でドキュメントやセクションのフッターを作成する方法を解説

    HTML5では、<footer>タグを使用することで、ドキュメント全体または個々のセクションに対するフッターを簡単に定義できます。フッターには通常、著作権情報、作者名、連絡先へのリンク、関連ページへのナビゲーションなどを記述します。 <footer>タグの基本的な使い方 次のコードは、<footer>タグを実装したシンプルな例です。実際にブラウザで実行して、表示を確認してみてください。 サンプルコード <!DOCTYPE html> <html> <head> <title>HTML F

  5. HTMLでサブウィンドウを作成するにはどうすればよいですか？

    サブウィンドウ（フレーム）を作成するには、<frame>タグを使用します。HTMLの<frame>タグは、<frameset>タグの中で個々のフレームを定義するために用いられます。 <frame>タグを使用する際の注意点 注意： <frame>タグはHTML5では廃止

  6. HTMLで画像を表示する方法！imgタグの基本と主要属性まとめ

    HTMLでWebページに画像を表示するには、<img>タグを使用します。<img>タグは終了タグを持たない空要素で、src属性で指定した画像ファイルを読み込んで画面に表示します。 ここでは、<img>タグで使える主な属性を一覧形式で解説し、最後に実際に動作するサンプルコードを紹介します。 imgタグの主な属性一覧 属性値説明 aligntop / bottom / middle / left / right非推奨 — 画像の表示位置（揃え方）を指定します。 altテキスト画像が表示できない場合に代わりに表示される代替テキストを指定します。 borde

  7. HTMLのinputタグとは？入力フィールドの基本と主要属性の一覧を解説

    HTMLの <input> タグは、フォーム内で入力要素（ユーザーがデータを入力できるコントロール）を宣言するために使用されます。テキストボックスやチェックボックス、ラジオボタンなど、さまざまな種類の入力欄を作成できる、フォームの中核を担う重要な要素です。ここでは、<input> 要素で利用できる主な属性を一覧形式で紹介します。input要素の主な属性一覧属性値説明acceptコンテンツタイプサーバーが受け付けるコンテンツタイプをカンマ区切りのリストで指定しますalignleft / right / top / middle / bottom非推奨 － コンテンツの配置

  8. HTMLでフレームセットを追加する方法｜framesetタグの使い方と属性を解説

    <frameset>タグでフレームのセットを追加する HTMLでフレームのセットを追加するには、<frameset>タグを使用します。このタグを使うと、ブラウザのウィンドウを複数のフレーム（領域）に分割し、それぞれに別々のページを表示できるようになります。 注意： <frameset>タグはHTML5ではサポートされていません。現在のWeb制作では使用しないでください。 <frameset>タグの主な属性 属性値説明 cols列のサイズ列の数とそれぞれの幅を、ピクセル・パーセント・相対的な長さで指定します。デフォルトは100%です。 ro

  9. HTMLで挿入されたテキストを表示するにはどうすればいい？insタグの使い方を解説

    HTMLでドキュメントに後から追加・挿入されたテキストを示すには、<ins>タグを使用します。このタグで囲まれたテキストは、多くのブラウザでは下線付きで表示され、「ここに文字が挿入された」ことを視覚的に伝えることができます。 <ins>タグには主に以下の2つの属性があります。 属性値説明 cite URL テキストが挿入された理由を説明している別のドキュメントへのURLを指定します。 datetime YYYY-MM-DD HH:MM:SS テキストが挿入された日時を指定します。 使用例 次のコードを実行して、挿入されたテキストの表示を確認し

  10. HTMLに1行の入力フィールドを追加する方法【isindexタグと現代的な代替手段】

    HTMLで1行の入力フィールドを追加するには、<isindex>タグを使用します。このタグは、テキストフィールドを通じてドキュメントへの問い合わせ（検索クエリ）を行うためのもので、ページ内のどの場所にも記述できますが、<head>タグ内に配置するのが望ましいとされていました。注意： <isindex>タグはすでに非推奨（deprecated）となっており、現在のWeb開発では使用してはいけません。最新のHTMLでは、後述する<input type=text>を使うのが標準的な方法です。isindexタグの主な属性属性値説明prompt文字列（st

  11. 【HTML】kbdタグを使ってキーボード入力を表示する方法

    HTMLでは<kbd>タグを使用することで、キーボード入力を表すテキストを表示できます。<kbd>タグは「キーボードからの入力」を定義するフレーズタグ（phrase tag）の一種で、囲んだテキストは多くのブラウザで等幅フォント（モノスペースフォント）によって表示されます。kbdタグの特徴<kbd>タグは、ショートカットキーやコマンドなど、ユーザーがキーボードで入力する内容を明示したい場合に使用します。操作マニュアルやチュートリアル記事などで押すべきキーを視覚的に区別できるため、読者の理解を助ける効果があります。また、CSSを組み合わせれば、実際のキーボード

  12. HTMLで要素上のマウスホイールスクロール時にスクリプトを実行する方法

    HTMLのonwheel属性を使用すると、要素の上でマウスホイールがスクロールされたタイミングでスクリプト（JavaScript）を実行することができます。ユーザーがマウスホイールを操作するたびに関数が呼び出されるため、ズーム機能やスクロール連動アニメーションなど、インタラクティブな演出を実装したい場合に便利です。基本的な使い方対象の要素にonwheel属性を設定し、実行したい関数名を指定します。以下は、div要素上でマウスホイールをスクロールするとアラートが表示されるシンプルな例です。<!DOCTYPE html> <html>   <hea

  13. HTMLでテーブル列のグループを定義する方法を徹底解説

    テーブルの複数の列をひとつのグループとして扱いたい場合は、HTMLの<colgroup>タグを使用します。このタグを使うことで、テーブル内の一連の列に対して共通のプロパティをまとめて指定でき、コードの可読性と保守性が向上します。 また、グループ内の個別の列ごとに異なる設定を適用したい場合には、<colgroup>タグの中に<col>タグを配置します。これにより、列単位でのきめ細かな制御が可能になります。 <colgroup>タグの主な属性 <colgroup>タグおよび<col>タグで使用できる主な属性は以下のとおりです

  14. HTMLのonstorage属性でWebストレージ領域の更新時にスクリプトを実行する方法

    HTMLでは、onstorage属性を使用することで、Webストレージ領域（localStorageやsessionStorage）が更新されたタイミングでスクリプトを実行できます。この属性は、別のドキュメントからストレージが変更されたときにイベントを発生させるため、タブ間でのデータ同期などに活用できます。 onstorage属性の基本的な使い方 以下のコードは、onstorage属性を実装したシンプルな例です。ストレージが更新されると、アラートが表示されます。 サンプルコード <!doctype html> <html> <head> &

  15. HTMLでテキストのフォントを設定する方法【CSSを使った現代的な手法】

    かつてHTMLでは <font> タグを使用してテキストのフォントを設定していましたが、このタグは現在非推奨（廃止予定）となっています。代わりに、CSS（Cascading Style Sheets）を使用してフォントを指定するのが標準的な方法です。CSSでは font-family プロパティを使うことで、テキストに任意のフォントを適用できます。インラインスタイル、内部スタイルシート、外部スタイルシートのいずれの方法でも設定可能ですが、保守性を考えると外部スタイルシートの利用が推奨されます。サンプルコード以下のコードを実行すると、HTML内のテキストのフォントを変更できます。st

  16. HTMLのonsuspend属性でメディアデータの読み込み中断時にスクリプトを実行する方法

    onsuspend属性とは HTMLのonsuspend属性を使用すると、メディアデータの読み込みが一時停止したタイミング、たとえばダウンロードが完了したときなどに、スクリプトを実行することができます。 このイベントは、主に次のような状況で発生します。 ダウンロードが一時停止（ポーズ）したとき ダウンロードが完了したとき メディアがサスペンド状態になったとき 対応する要素とブラウザ onsuspend属性は、<video>要素および<audio>要素と組み合わせて使用できます。Firefox、Chrome、Opera、Safariなど、主要なモダンブラウザすべてで動

  17. HTMLでメディアの再生準備が整ったときにスクリプトを実行する方法【oncanplay属性】

    HTMLでは、oncanplay属性を使用することで、音声や動画が再生を開始できる状態になったタイミングを検知し、任意のスクリプトを実行できます。 oncanplay属性とは oncanplay属性は、<audio>要素や<video>要素などのメディアにおいて、バッファリングがある程度進み、途中で止まることなく再生を開始できる状態になった時点で発生するイベントハンドラです。 このイベントを活用すると、「動画の読み込みが完了したらユーザーに通知を表示する」「ローディング画面を非表示にする」といった処理を簡単に実装できます。 サンプルコード 以下のコードを実行すると、動画

  18. HTMLのontimeupdate属性でメディアの再生位置が変化したときにスクリプトを実行する方法

    ontimeupdate属性は、<video>や<audio>などのメディア要素の再生位置が変化するたびに発生するイベントです。早送りや巻き戻しなどのシーク操作だけでなく、通常の再生中にも継続的に発生します。 ontimeupdate属性の基本 このイベントは、メディアのcurrentTimeプロパティ（現在の再生位置）が更新されるたびにトリガーされます。一般的には約250ミリ秒ごとに定期的に発生するため、再生位置をリアルタイムに表示したい場合などに活用できます。 主な特徴 再生中、一定間隔で繰り返し発生します ユーザーによるシーク操作（早送り・巻き戻し）でも発生しま

  19. HTMLでメディアの再生開始時にスクリプトを実行する方法（onplaying属性の使い方）

    HTMLでは、onplaying属性を使うことで、音声や動画の再生が実際に開始されたタイミングでスクリプトを実行できます。この属性を活用すれば、「再生が始まりました」といったメッセージをユーザーに通知したり、再生開始に合わせて他の処理を呼び出したりすることが可能です。onplaying属性とはonplayingは、メディア（audio要素・video要素）が一時停止やバッファリングの後、再生を開始した瞬間に発火するイベントハンドラです。読み込みが完了した時点ではなく、実際に再生が始まった時点で処理が実行される点が特徴です。サンプルコード以下のコードを実行すると、動画の再生が開始されたときにスク

  20. HTMLでページ履歴が変更されたときにスクリプトを実行する方法（onpopstateイベント）

    ブラウザのセッション履歴に変化があったとき、popstateイベントが発生します。ユーザーが「戻る」・「進む」ボタンを押した場合や、history.back()・history.forward()・history.go()が呼び出された場合などに、このイベントを利用して任意のスクリプトを実行できます。 onpopstate属性を使った基本的な例 <body>要素にonpopstate属性を指定すると、履歴が変更されるたびに関数が呼び出されます。 <!DOCTYPE html> <html>   <body onpopstate =

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