HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. 【初心者向け】HTMLのonmouseup属性でマウスボタンを離したときにスクリプトを実行する方法

    HTML要素の上でマウスボタンを離した（放した）瞬間に、onmouseupイベントが発生します。このイベントを活用することで、「マウスボタンを離したタイミング」で任意のスクリプト（JavaScript）を実行できるようになります。 onmouseupイベントとは onmouseupは、ユーザーが要素の上で押していたマウスボタンを離したときに発火するイベントハンドラです。通常は、マウスボタンを「押した」瞬間に発生するonmousedownイベントとセットで使用されます。 この2つを組み合わせることで、ボタンを押している間だけ見た目を変えたり、ドラッグ操作の開始・終了を検知したりと、よりインタラク

  2. HTMLのonseeked属性とは？動画・音声のシーク完了時にスクリプトを実行する方法

    HTMLの onseeked 属性は、ユーザーが音声や動画の再生位置をスキップしたり、別の位置へ移動（シーク）したりしたときに、指定されたスクリプトを実行するイベント属性です。 類似の属性に onseeking がありますが、こちらはシーク操作が開始された瞬間に発火するのに対し、onseeked はシーク操作が完了したタイミングで発火する点が異なります。再生位置が変わった直後に何らかの処理を行いたい場合は、onseeked 属性を使用します。 サンプルコード 以下のコードを実行すると、onseeked 属性の動作を確認できます。動画内で再生位置をドラッグなどで移動させると、見出し部分に現在の再

  3. HTMLのcaptionタグでテーブルにキャプション（表題）を付ける方法

    HTMLでテーブルにキャプション（表題）を追加するには、<caption>タグを使用します。<caption>タグは<table>タグの直後に記述することで、テーブルの上部に自動的に表題として表示されます。 captionタグの基本ルール <caption>タグは、<table>タグの開始タグの直後（最初の子要素）に記述します。 1つのテーブルに設定できるキャプションは1つだけです。 デフォルトではテーブルの中央上に表示され、CSSのcaption-sideプロパティで位置を変更できます。 コード例 以下は、「Indian Cri

  4. HTMLで削除されたテキスト（打ち消し線）を表示する方法｜<del>タグの使い方を解説

    HTMLで文書から削除されたテキストを表現したい場合は、<del>タグを使用します。このタグで囲まれたテキストは、多くのブラウザでは打ち消し線（取り消し線）付きで表示され、「この部分は削除された」という意味を視覚的かつ意味的に伝えることができます。 <del>タグは、修正履歴や変更履歴を示すドキュメント、ブログ記事の訂正箇所など、テキストが削除されたことを明示したい場面で活用できます。 <del>タグで使用できる主な属性 <del>タグには、以下の2つの属性を指定できます。 属性 値 説明 cite URL テキストが削除された理由

  5. HTMLでディレクトリリストを表示する方法【dirタグの使い方と注意点】

    HTMLでディレクトリリスト（ファイルや項目の一覧）を表示するには、<dir>タグを使用します。このタグは<ul>タグと非常によく似た動作をしますが、現在では非推奨（deprecated）となっているため、新規のコードでの使用は避けるべきです。 dirタグの属性 <dir>タグで使用できる属性は以下の通りです。 属性値説明 Compact compact 非推奨 − リストをコンパクトに表示することを指定します。 記述例 以下のコードを実行すると、HTMLでディレクトリリストを表示できます。 <!DOCTYPE html> &

  6. HTMLでダイアログボックスを定義する方法をわかりやすく解説

    HTMLでダイアログボックスを定義するには？HTMLでは、<dialog>タグを使用することで、ダイアログボックス（ポップアップウィンドウ）を簡単に定義できます。このタグはHTML5で導入され、モーダルや非モーダルのダイアログを作成するための標準的な手段となっています。<dialog>タグには、以下の属性が用意されています。属性値説明openopenダイアログボックスを開いた状態にし、ユーザーが操作できるようにしますポイント： open属性が指定されていない場合、ダイアログボックスは非表示のままになります。JavaScriptのshow()メソッドやshowModal(

  7. <menu>要素がコンテキストメニューとして表示されたときにスクリプトを実行する方法（onshowイベント）

    onshowイベントとは HTMLにおいて、<menu>要素がコンテキストメニューとして表示されると、onshowイベントが発生します。このイベントを利用することで、コンテキストメニューが画面に表示されるタイミングで、任意のスクリプト（JavaScript）を実行できます。 サンプルコード 以下のコードを実行し、枠内で右クリックしてみてください。<menu>要素がコンテキストメニューとして表示され、onshowイベントによってアラートが表示されます。 <!Doctype html> <html>    <head&g

  8. HTMLで改行を挿入するにはどうすればよいですか？

    HTMLで1つの改行を挿入するには、<br>タグを使用します。<br>タグは終了タグを必要としない空要素のため、段落の中など改行したい位置に記述するだけで簡単に改行を反映させることができます。以下のコードを実行して、<br>タグによる改行の挿入を実際に試してみてください。サンプルコード<!DOCTYPE html> <html>    <head>       <title>HTML br タグ</title>    </h

  9. HTMLでブラウザがメディアデータを取得できない場合にスクリプトを実行する方法【onstalled属性】

    onstalled属性とはHTMLのonstalled属性を使うと、ブラウザが何らかの理由でメディアデータを取得できなかった場合に、指定したスクリプトを実行できます。動画や音声ファイルのダウンロードが途中で止まった場合などに、ユーザーへエラーメッセージを表示するといった処理に活用できます。onstalled属性が使用できる要素この属性は、以下の2つのメディア要素で使用可能です。<video> <audio><video>要素の構文<video onstalled="script"><audio>要素の構文<a

  10. HTMLで引用を指定するには？<cite>タグの使い方を解説

    HTMLで引用を指定するには、<cite>タグを使用します。<cite>タグは、書籍や論文、記事などの作品のタイトルを表すために使われる要素です。ブラウザ上では通常、イタリック体（斜体）で表示されます。以下のコードを実行して、<cite>タグを使った引用の追加を実際に試してみましょう。サンプルコード<!DOCTYPE html> <html>    <head>       <title>HTML cite Tag<

  11. ユーザーがHTMLのdetails要素を開閉したときにスクリプトを実行する方法

    ユーザーが<details>要素を開いたり閉じたりすると、ontoggleイベントが発生します。このイベント属性を活用すれば、開閉操作のタイミングに合わせて任意のJavaScriptを実行できます。 以下に、ontoggleイベント属性を使った基本的な実装例を示します。 実装例 <!DOCTYPE html> <html>    <body>       <h2>詳細情報</h2>     &n

  12. HTMLでテーブル列に属性を指定する方法 ― colタグの使い方を解説

    テーブルの列に対して共通のスタイルや属性をまとめて設定したい場合には、<col>タグを使用します。<col>タグは、テーブルの各列に適用する属性定義をグループ化できる便利な要素です。 なお、<col>タグはあくまで「列への属性指定」を行うものであり、列そのものを構造的にグループ化する役割は<colgroup>要素が担当します。両者はセットで使われることが多いため、違いを理解しておきましょう。 <col>タグで使える主な属性 属性値説明 alignrightleftcenterjustifycharセル内テキストの水平方向の配置

  13. HTMLでサンプルのコンピューターコードを表示するには？sampタグの使い方を解説

    Webページ上にプログラムの出力例やサンプルコードを表示したい場合は、HTMLの<samp>タグを使用します。<samp>タグは、コンピュータープログラムが出力した結果（サンプル出力）を意味的に示すためのタグです。sampタグとは<samp>は「sample output」の略称で、多くのブラウザーでは等幅フォント（モノスペースフォント）で表示されます。よく似たタグに<code>がありますが、<code>がソースコードそのものを表すのに対し、<samp>は「プログラムを実行した際に出力される結果」を表すという違いがあります

  14. HTMLでドキュメントにセクションを作成する方法【divタグの使い方】

    ドキュメントにセクション（区分け）を追加するには、<div>タグを使用します。HTMLの<div>タグは、ドキュメント内の一つのセクションを定義するための汎用的な要素です。divタグを使えば、複数のHTML要素をひとつの大きなまとまりとしてグループ化し、CSSを使ってまとめてスタイルを適用することができます。 セクション作成のサンプルコード 実際にセクションを作成するには、以下のコードを参考にしてください。 <!DOCTYPE html> <html> <head> <title>HTML div Tag

  15. HTMLでプログレスバーを作成する方法【progressタグの使い方を解説】

    HTMLでプログレスバーを作成する基本HTMLでプログレスバーを作成するには、<progress>タグを使用します。このタグは、ファイルのアップロードやダウンロードなど、タスクの完了進捗状況を示すためのもので、ブラウザ上には視覚的なプログレスバーとして表示されます。また、<progress>タグの値はJavaScriptから動的に操作できるため、処理の進行状況に合わせてバーをリアルタイムに更新することも可能です。progressタグの主な属性属性値説明max数値タスク全体の作業量を表します。0より大きい有効な浮動小数点数を指定する必要があります。省略した場合の既定値は「

  16. HTMLのrpタグとは？ルビー非対応ブラウザ向けの代替表示を設定する方法

    HTMLの<rp>タグは、ルビー（ふりがな）アノテーションに対応していないブラウザ向けに、代わりに表示させる内容（フォールバックコンテンツ）を指定するために使用される要素です。ルビーアノテーションは、日本語や中国語などの東アジアの組版において、漢字の上や横に読み仮名を小さく表示するために広く使われています。 rpタグの役割と仕組み <rp>タグは単独で使われることはなく、通常は<ruby>タグと<rt>タグと組み合わせて記述します。<rt>タグでルビーテキスト（読み方）を定義し、その前後を<rp>タグで囲むことで、ルビー機

  17. HTML5でルビ（ふりがな）注釈を表示するには？rtタグの使い方を解説

    テキストにルビ（ふりがな）注釈を表示するには、<rt>タグを使用します。HTML5の<rt>タグは、ルビ注釈として文字の読み方（発音）を示すために使われ、主に漢字などの東アジアの文字の読み仮名を表示する目的で利用されます。基本的な使い方ルビ注釈は通常、<ruby>タグの中に記述します。対応していないブラウザ向けには、括弧を表示するための<rp>タグを組み合わせるのが一般的です。使用例以下のコードを実行すると、「漢字」というテキストにルビ注釈を表示できます。<!DOCTYPE html> <html> <hea

  18. HTML5でルビ（ふりがな）注釈を表示する方法

    HTMLのrubyタグとは？ HTMLの<ruby>タグは、東アジアの文字（漢字など）の読み方を示す「ルビ注釈」を表示するために使用します。日本語のふりがなや中国語のピンインなど、漢字の上に小さく読み仮名を表示したい場合に非常に便利な要素です。 ルビ表示に使う3つのタグ <ruby> … ルビ注釈の対象となる範囲を定義します。 <rt> … 実際に表示されるルビ（読み仮名）を指定します。 <rp> … ルビに対応していない古いブラウザ向けに、括弧などの代替テキスト（フォールバック）を指定します。対応ブラウザでは表示されません。 サンプルコ

  19. HTMLのblinkタグでテキストを点滅させる方法と代替手段

    HTMLには、テキストを囲むことでその文字を点滅表示させる<blink>タグが存在しました。タグで囲まれた部分のテキストは、対応するブラウザ上で点滅して表示されます。 以下のコードを実行すると、<blink>タグの動作を確認できます。 注意 この要素は廃止（非推奨）されているため、使用しないでください。現在の主要なブラウザでは動作せず、代わりにCSSアニメーションを使用することが推奨されています。 サンプルコード <!DOCTYPE html> <html> <head> <title>HTML blin

  20. HTMLでプッシュボタンを追加する方法｜buttonタグの使い方と属性一覧

    HTMLでプッシュボタンを追加するには、<button>タグを使用します。<button>タグは、HTMLフォーム内にボタンを作成するための要素です。また、同様のボタンは<input>タグを使って作成することもできます。 <button>タグの主な属性 <button>タグで利用できる主な属性は以下のとおりです。 属性値説明 autofocusAutofocusページの読み込み時に、このボタンが自動的に入力フォーカスを受け取ることを指定します。 disabledDisabledボタンを無効化（操作不可）にすることを指定します。

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