HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTMLのononlineイベント属性とは？使い方とサンプルコードを解説

    HTMLのononlineイベント属性は、ブラウザがオフライン状態からオンライン状態に復帰したとき（ネットワーク接続が確立されたとき）に発火するイベント属性です。この属性を使うことで、ユーザーが再びインターネットに接続した瞬間に、特定のスクリプトを実行できます。ononlineイベント属性の構文ononlineイベント属性の基本的な構文は以下のとおりです。<tagname ononline="script"></tagname>通常、この属性は<body>要素に指定して使用します。ネットワーク状態の変化はページ全体に影響するためです。on

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード

  3. HTMLマッピング画像（イメージマップ）とは？基本構文と実装例を解説

    HTMLマッピング画像（イメージマップ）とは、HTML文書の中でハイパーリンクとして機能する「クリック可能な領域」を持つ、クライアントサイドの画像マップのことです。1枚の画像の中に複数のリンク先を設定できるため、ナビゲーションバーや図解などに活用できます。 map要素とimg要素を関連付けるには、map要素のname属性の値と、img要素のusemap属性の値を一致させます。 基本構文 HTMLマッピング画像の基本的な構文は以下の通りです。 <img src="" alt="" usemap="#name_value">

  4. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q

  5. HTMLのondragenterイベント属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのondragenterイベント属性は、ドラッグ可能な要素やテキストが、ドキュメント内の有効なドロップターゲット（ドロップ先）に入った瞬間に発生するイベントです。ドラッグ＆ドロップ操作のUIを作成する際に、ドロップ領域をハイライト表示するなど、ユーザーへの視覚的なフィードバックを提供したい場合によく活用されます。構文（Syntax）ondragenterイベント属性の基本的な書き方は以下のとおりです。<tagname ondragenter="script"></tagname>対象となるタグの属性として「ondragenter」を指定し、値

  6. HTMLのondragleaveイベント属性とは？使い方とサンプルコードを解説

    HTMLのondragleaveイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップターゲット（ドロップ先）から離れた瞬間に発生するイベントです。ドラッグ＆ドロップ操作では、要素がドロップゾーンに入ったときに発生するondragenterと対になるイベントであり、両者を組み合わせることで、ユーザーにとって分かりやすい視覚的フィードバックを実現できます。 構文 ondragleaveイベント属性の基本的な構文は以下のとおりです。 <tagname ondragleave=”script”></tagname>

  7. HTMLのondropイベント属性とは？使い方をサンプルコードで解説

    HTMLのondropイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップ先（ターゲット）にドロップされた瞬間に発火するイベント属性です。ドラッグ＆ドロップ操作を実装する際には、ondragstartやondragoverなどのイベント属性と組み合わせて使用されるのが一般的です。 構文 ondropイベント属性の基本的な構文は以下の通りです。 <tagname ondrop="script"></tagname> 属性値には、ドロップされたときに実行したいJavaScriptのコードまたは関数名を指定します。 サンプ

  8. HTMLのondragstartイベント属性とは？使い方とサンプルコードを解説

    HTMLのondragstartイベント属性は、ユーザーがHTML要素や要素内のテキストのドラッグ操作を開始した瞬間に発火するイベント属性です。ドラッグ＆ドロップ機能を実装する際に、ドラッグ開始時の処理（データの設定やメッセージ表示など）を定義するために使用されます。構文ondragstartイベント属性の基本的な構文は以下のとおりです。<tagname ondragstart=script></tagname>ondragstartイベント属性の使用例ここでは、赤い円をドラッグすると「ドラッグを開始しました」というメッセージが表示され、ドラッグが終わると別のメッセージ

  9. HTMLのnavigator.onLineプロパティでブラウザのオンライン・オフライン状態を判定する方法

    navigator.onLineプロパティは、ブラウザが現在オンライン状態かオフライン状態かを示す真偽値（boolean）を返します。このプロパティを活用すれば、ユーザーのネットワーク接続状況をJavaScriptで簡単に検出し、それに応じた処理を実装することができます。 構文 基本的な構文は以下のとおりです。 navigator.onLine 戻り値は次のようになります。 オンラインの場合：true オフラインの場合：false サンプルコード ここでは、HTMLのnavigator onLineプロパティを使用した具体的な例を紹介します。ボタンをクリックすると、ブラウザがオンラインかオ

  10. HTMLのnavigator.platformプロパティとは？使い方とサンプルコードを解説

    HTMLのnavigator.platformプロパティは、ブラウザがコンパイルされた（動作している）プラットフォームの情報を文字列として返します。このプロパティを利用することで、JavaScriptからユーザーのOS環境に関する情報を取得できます。 構文 navigator.platformプロパティの構文は以下の通りです。 navigator.platform 戻り値 このプロパティは、プラットフォーム名を表す文字列を返します。主な戻り値の例は以下の通りです。 Windows環境：「Win32」 Mac環境：「MacIntel」 Linux環境：「Linux x86_64」など HTM

  11. HTMLのnavigator.productプロパティとは？ブラウザエンジン名の取得方法を解説

    navigator.product プロパティは、ブラウザのエンジン名を返すプロパティです。読み取り専用のプロパティで、JavaScriptから手軽にブラウザの製品情報を取得できます。なお、現代の主要なブラウザでは互換性の維持のため、ほとんどの場合「Gecko」という値が返される点に注意しましょう。構文navigator.productプロパティの基本的な構文は以下のとおりです。navigator.productそれでは、HTMLのnavigator.productプロパティを使った具体的なサンプルコードを見ていきましょう。サンプルコード<!DOCTYPE html> <ht

  12. HTMLのnavigator.userAgentプロパティとは？使い方とサンプルコードを解説

    HTMLの navigator.userAgent プロパティは、ブラウザがサーバーへリクエストを送信する際に付与される「User-Agent」ヘッダーの値を取得するためのプロパティです。この値には、ブラウザの種類やバージョン、OSなどの情報が文字列として含まれており、JavaScriptから簡単に参照できます。構文navigator.userAgentプロパティの基本的な構文は以下の通りです。navigator.userAgentサンプルコードここでは、ボタンをクリックするとブラウザのUser-Agentヘッダーの値を画面に表示する簡単なデモを紹介します。<!DOCTYPE html&

  13. HTML navigator javaEnabled()メソッドの使い方をわかりやすく解説

    HTMLの navigator.javaEnabled() メソッドは、ブラウザでJavaが有効（enable）になっているかどうかを判定し、その結果を真偽値（boolean）として返すメソッドです。Javaが有効な場合は true、無効な場合は false が返されます。構文javaEnabled()メソッドの基本的な構文は以下のとおりです。navigator.javaEnabled()サンプルコードここでは、ボタンをクリックするとブラウザのJava有効・無効状態を画面に表示する簡単なデモを紹介します。<!DOCTYPE html> <html> <style&

  14. HTML KeyboardEventのwhichプロパティとは？使い方をサンプルコード付きで解説

    HTMLの KeyboardEvent which プロパティは、HTMLドキュメント内で onkeypress イベント、onkeydown イベント、または onkeyup イベントを発生させたキーのUnicode文字コード（数値）を返すプロパティです。ユーザーがどのキーを押したのかを数値として判別したい場合に活用できます。 構文 whichプロパティの基本的な構文は以下の通りです。 event.which それでは、HTML KeyboardEvent whichプロパティの具体的な使用例を見ていきましょう。 サンプルコード <!DOCTYPE html> <html

  15. HTMLのLocation assign()メソッドとは？使い方とサンプルコードを解説

    Location assign()メソッドとはHTMLのLocation assign()メソッドは、指定したURLの新しいドキュメントを現在のウィンドウに読み込むためのメソッドです。assign()メソッドを使ってページを移動した場合、移動前のページはブラウザの履歴に残るため、「戻る」ボタンで前のページに戻ることができます。これは、履歴を上書きするlocation.replace()メソッドとの大きな違いです。replace()メソッドでは履歴から現在のURLが置き換えられるため、前のページに戻れませんが、assign()メソッドでは履歴が保持されます。構文Location assign()

  16. HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説

    HTMLのmethod属性は、フォームから送信するデータを「どのような方法で」サーバーへ渡すかを指定するための重要な属性です。具体的には、データをURLの一部として送るか（GET）、HTTP POSTトランザクションとして送るか（POST）を選択できます。 method属性の基本構文 method属性の書き方は以下の通りです。 <form method="get | post"></form> get を指定すると、フォームのデータはURL変数（クエリ文字列）として送信されます。一方、post を指定すると、データはHTTPリクエストのボディに含まれ

  17. HTMLのonafterprintイベント属性とは？使い方とサンプルコードを解説

    onafterprintイベント属性とはHTMLのonafterprintイベント属性は、ページの印刷が開始されたとき、または印刷ダイアログボックスが閉じられたときに発生するイベント属性です。この属性を利用することで、印刷操作の直後に特定のスクリプト（JavaScript）を実行できます。例えば、「ユーザーが印刷を完了した後にページの背景色を変更する」「印刷後にお礼のメッセージを表示する」といった処理を実装したい場合に活用できます。基本構文onafterprintイベント属性の基本的な記述方法は以下のとおりです。<tagname onafterprint=script></t

  18. HTML onbeforeprintイベント属性とは？印刷前の処理を実装する方法を解説

    HTMLのonbeforeprintイベント属性は、ページが印刷される直前、または印刷ダイアログボックスが表示される前にスクリプトを実行するための属性です。印刷時だけ特定のスタイルを適用したい場合や、印刷用に画面を調整したい場合などに活用できます。構文onbeforeprintイベント属性の基本的な構文は以下のとおりです。<tagname onbeforeprint=script></tagname>それでは、実際にonbeforeprintイベント属性を使用したサンプルコードを見ていきましょう。サンプルコード<!DOCTYPE html> <html

  19. HTMLのWindow btoa()/atob()メソッドとは？Base64エンコード・デコードの基本を解説

    HTMLのwindowオブジェクトが提供するbtoa()メソッドは、文字列データをBase64形式の文字列にエンコードします。エンコードされた文字列は、atob()メソッドを使用することで、HTMLドキュメント上で元の文字列にデコード（復元）することが可能です。なお、メソッド名はそれぞれ「binary to ASCII（btoa）」「ASCII to binary（atob）」に由来しており、セットで使うことでデータの変換と復元を行えます。Base64はメール送信やデータURIなど、テキストとしてバイナリデータを安全に扱いたい場面で広く利用されているエンコード方式です。構文btoa()メソッド

  20. HTMLのwindow.btoa()メソッド徹底解説！文字列をBase64形式にエンコードする方法

    HTMLのwindow.btoa()メソッドは、文字列データをBase64形式の文字列へエンコードするためのメソッドです。エンコードされた文字列は、同じくwindowオブジェクトが提供するatob()メソッドを使うことで、元の文字列にデコード（復元）できます。データの一時的な変換や、テキストを別の形式で安全に表現したい場合などに活用されます。構文btoa()メソッドの基本構文は以下の通りです。window.btoa(string_to_be_encoded);引数にはエンコード対象の文字列を指定し、戻り値としてBase64エンコード済みの文字列を受け取ります。実装例それでは、入力したメッセージ

Total 2020 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:21/101  20-コンピューター/Page Goto:1 15 16 17 18 19 20 21 22 23 24 25 26 27