HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTML5でコンテキストメニューがトリガーされたときにスクリプトを実行するには？

    HTML5のcontextmenu属性を使用すると、コンテキストメニューが表示されたタイミングでスクリプトを実行できます。コンテキストメニューは、ユーザーが要素の上で右クリックしたときに生成されるものです。 サンプルコード 次のコードを実行して、contextmenu属性の動作を確認してみましょう。枠線で囲まれた領域内で右クリックすると、独自のコンテキストメニューが表示されます。 <!Doctype html> <html>    <head>       <ti

  2. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実

  3. HTMLでリンク先ページのURLを指定する方法｜href属性の使い方を解説

    HTMLでリンク先のページURLを指定するには、href属性を使用します。href属性は、アンカータグ（<a>）などの要素に設定することで、クリック時に移動する先のページやリソースの場所をブラウザに伝える役割を果たします。href属性とはhrefは「Hypertext Reference（ハイパーテキスト参照）」の略で、リンクの目的地となるURLを指定するための必須属性です。相対パスでも絶対パスでも指定でき、Webサイト内の別ページへの遷移や外部サイトへのリンクなど、さまざまな用途に活用できます。記述例以下のコードは、figure要素と組み合わせて画像とキャプションを表示し、リンク

  4. HTMLでトラックテキストデータの言語を設定する方法（srclang属性の使い方）

    HTMLでトラック（track）テキストデータの言語を指定するには、srclang属性を使用します。特に、動画に字幕を追加する場合にこの属性が活用されます。srclang属性とはsrclang属性は、<track>要素で読み込むテキストデータ（字幕やキャプションなど）がどの言語で書かれているかを示すためのものです。値には「en」（英語）や「ru」（ロシア語）などの有効なBCP 47言語タグを指定します。字幕（kind=subtitles）を使用する場合、この属性の指定が推奨されています。サンプルコード以下のコードを実行して、srclang属性の動作を確認してみましょう。<!D

  5. HTMLで状況に応じた画像URLを指定する方法｜srcset属性の使い方を解説

    HTMLでさまざまな状況に応じて使用する画像のURLを指定するには、srcset属性を使用します。この属性を活用すると、デバイスや画面サイズに合わせて最適な画像を表示できるため、レスポンシブWebデザインの実現に非常に便利です。 実装例 以下のコードでは、<picture>要素と<source>要素を組み合わせて、ブラウザの幅に応じて異なる画像を読み込んでいます。ブラウザのウィンドウサイズを変更すると、条件に応じて表示される画像が切り替わる様子を確認できます。 <!DOCTYPE html> <html> <head>

  6. HTMLの入力フィールドに有効な数値の間隔を指定する方法

    HTMLの入力フィールドで有効な数値の間隔（刻み幅）を指定するには、step属性を使用します。step属性は、ユーザーが入力できる数値の間隔を定義する属性です。たとえば「0、5、10、15、20」のように、一定の間隔で数値を入力させたい場合に活用できます。さらに、min属性（最小値）やmax属性（最大値）と組み合わせることで、有効な値の範囲をより細かく制御することが可能です。使用例以下のコードを実行すると、step属性の実際の動作を確認できます。<!DOCTYPE html> <html> <head> <title>HTML

  7. HTMLでドキュメントが印刷される前にスクリプトを実行する方法

    HTMLでドキュメントが印刷される前にスクリプトを実行したい場合は、onbeforeprint属性を使用します。このイベントは、ユーザーが印刷操作（Ctrl+Pキーやブラウザメニューの「印刷」など）を開始したタイミングで発生し、印刷前に任意のJavaScript処理を実行できます。onbeforeprint属性の基本的な使い方onbeforeprint属性は、body要素などのHTML要素に直接設定できます。印刷が開始される直前に、指定したJavaScript関数が自動的に呼び出されます。例onbeforeprint属性を実装するには、以下のコードを試してみてください。<!DOCTYPE

  8. HTMLでドキュメントがアンロードされる直前にスクリプトを実行する方法（onbeforeunloadイベント）

    onbeforeunloadイベントとは onbeforeunloadイベント属性は、ドキュメントがアンロードされようとしているタイミング（ウィンドウを閉じる、ページを再読み込みする、別のページへ移動するなど）で発生します。このイベントを活用することで、ユーザーがページを離れる前に確認ダイアログを表示し、入力途中のデータが意図せず失われるのを防ぐことができます。 使用例 以下のコードを実行して、onbeforeunload属性の動作を確認してみましょう。ウィンドウを閉じるか、F5キーでページを再読み込みすると、イベントが発火します。 <!DOCTYPE html> <ht

  9. HTMLでリンク先の開き方を指定する方法｜target属性の使い方と値の一覧

    target属性とはHTMLでは、<a>タグにtarget属性を指定することで、リンク先のドキュメントをどこで開くかを制御できます。外部サイトへのリンクを新しいタブで開きたい場合や、フレーム構成に応じて表示場所を切り替えたい場合などに活用できる重要な属性です。target属性に指定できる値target属性には、主に以下の4つの値を指定できます。値説明_blankリンク先のページを新しいタブで開きます。_selfリンク先のページを現在のタブ（同じフレーム）で開きます。target属性を省略した場合の既定値です。_parentリンク先のページを親フレームで開きます。_topリンク先のペ

  10. HTMLでURLのアンカー部分（ハッシュ）が変更されたときにスクリプトを実行する方法

    HTMLでは、onhashchange属性を使用することで、URLのアンカー部分（#以降のハッシュ値）が変更されたタイミングでスクリプトを実行できます。このイベントは、ユーザーがページ内リンクをクリックしたときや、JavaScriptでlocation.hashの値を書き換えたときなどに発生します。シングルページアプリケーション（SPA）などで、ページを再読み込みせずに状態の変化を検知したい場合に便利です。onhashchange属性の基本的な使い方以下のコードは、onhashchange属性を使ってアンカー部分の変更を検出するシンプルな例です。ボタンをクリックするとハッシュ値が「part2」

  11. HTML要素に補足情報を追加する方法｜title属性の使い方を解説

    title属性とは HTML文書内の要素に補足情報を追加したい場合は、title属性を使用します。title属性に設定したテキストは、ユーザーがマウスカーソルを要素の上に重ねた際に、ツールチップ（小さな吹き出し）として表示されます。 title属性の主な用途 リンクやボタンに、クリック後の動作に関するヒントを加える 画像に簡潔な補足説明を付ける 略語の正式名称を示す 記述例 以下のコードは、base要素と組み合わせて、リンクおよび画像に対してtitle属性で追加情報を設定した例です。 <!DOCTYPE html> <html> <head> &

  12. HTMLのtranslate属性で要素のコンテンツを翻訳するかどうかを指定する方法

    HTMLのtranslate属性とはHTMLのtranslate属性を使用すると、その要素のコンテンツを翻訳するかどうかを指定できます。Google翻訳などの機械翻訳ツールでページを翻訳する際に、ブランド名、固有名詞、コードなど、翻訳してほしくない部分を除外したい場合に特に便利な属性です。translate属性に指定できる値translate属性には、以下の2つの値を指定できます。属性値説明yesコンテンツを翻訳します。noコンテンツを翻訳しません。特定のテキストを翻訳対象から除外する方法特定の単語やフレーズを翻訳されたくない場合は、その要素のtranslate属性に「no」を指定します。&l

  13. HTMLのinput要素の幅を文字数で指定する方法【size属性の使い方】

    HTMLの<input>要素の幅を文字数を基準に指定したい場合は、size属性を使用します。size属性に数値を設定すると、その数値分の平均的な文字が表示できる幅が確保されます。 size属性の基本構文 <input type=text name=sub size=10> 上記のように記述すると、半角文字約10文字分の幅を持つテキストボックスが表示されます。size属性を省略した場合の既定値は「20」です。 使用例 次の例では、size属性とmaxlength属性を組み合わせて、表示幅と入力可能な最大文字数を同時に指定しています。 <!DOCTYPE html

  14. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動

  15. HTMLでアイコンのサイズを設定する方法|sizes属性の使い方を解説

    HTMLでアイコン(ファビコン)のサイズを設定するには、<link>要素のsizes属性を使用します。sizes属性を使うことで、ブラウザに対してアイコン画像の大きさを明示的に伝えることができます。sizes属性の基本sizes属性には、「幅×高さ」の形式でサイズを指定します。たとえば16x16ピクセルのアイコンであれば「16x16」と記述します。単位(px)は不要で、数値と半角英字の「x」で区切る点に注意してください。サンプルコード以下のコードは、sizes属性を使ってGIF形式のアイコンを16x16ピクセルで指定する例です。<!DOCTYPE html> <h

  16. HTMLでspan属性を使って列の結合数を設定する方法

    HTMLでは、<col>要素にspan属性を使用することで、スタイルや設定を適用する列の数（結合する列数）を指定できます。この属性は<colgroup>要素内で定義され、テーブルの複数列に対して一括で背景色などのスタイルを適用したい場合に便利です。以下のコード例を実行して、span属性の動作を確認してみましょう。コード例<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid b

  17. HTMLでテキスト入力にスペルチェッカーを追加する方法

    HTMLでスペルチェッカーを追加するには、spellcheck 属性を使用します。この属性を指定すると、input 要素、textarea 要素、さらに contenteditable 属性を持つ編集可能な要素内のテキストに対して、スペルと文法のチェックが行われます。 spellcheck 属性の基本 spellcheck 属性には次の2つの値を指定できます。 true — スペルチェックを有効にする false — スペルチェックを無効にする 注意： この属性は input 要素に対して機能しますが、パスワード入力欄（type=password）には適用されません。 サンプルコード 以下

  18. 【HTML】ユーザーがページに移動したときにスクリプトを実行する方法｜onpageshow属性の使い方

    ユーザーがページに移動した際にスクリプトを実行したい場合は、onpageshow属性を使用します。onpageshow属性とはonpageshow属性は、ページが表示されたときに発生する「onpageshowイベント」に対応してスクリプトを実行するための属性です。このイベントは、ページが最初に読み込まれたときだけでなく、別のページから戻ってきた場合（キャッシュからページが復元された場合）にも発生します。一般的なonloadイベントはキャッシュからページが表示される際には発火しませんが、onpageshowイベントはそのようなケースでも必ず実行されるという特徴があります。そのため、「戻る」ボタン

  19. HTMLでメディアファイルのURLを設定する方法｜src属性の使い方を解説

    HTMLでメディアファイルのURLを指定するには、src属性を使用します。「src」は「source（ソース）」の略で、読み込むファイルの場所（パスまたはURL）をブラウザに伝える重要な役割を担っています。 src属性が使用できる要素 src属性は、以下のHTML要素で利用できます。 <audio> … 音声コンテンツ <embed> … 外部コンテンツの埋め込み <iframe> … インラインフレーム <img> … 画像 <input> … type=image 指定時の画像ボタン <script> … 外部スクリ

  20. ユーザーがHTML要素にテキストを貼り付けたときにスクリプトを実行する方法（onpaste属性）

    HTMLでは、ユーザーが要素にテキストを貼り付けた瞬間に onpaste 属性（イベントハンドラ）がトリガーされます。この属性を活用することで、貼り付け操作を検知し、任意のJavaScript関数を実行することができます。onpaste属性の基本的な使い方以下のコードは、テキスト入力欄に何かを貼り付けたときに display() 関数を呼び出すシンプルな例です。実際にブラウザで動作させて確認してみてください。<!DOCTYPE html> <html>    <body>       <input ty

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