HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTMLのiframe要素に表示するページのコンテンツをsrcdoc属性で指定する方法

    srcdoc属性を使用すると、<iframe>のフレーム内に表示するページのHTMLコンテンツを直接指定できます。この属性の値として記述したHTMLコードが、iframeの中にそのままレンダリングされるため、別ファイルを読み込まずにインラインでコンテンツを埋め込むことが可能です。 srcdoc属性の実装例 以下のコードは、srcdoc属性を使ってiframe内にHTMLコンテンツを表示する基本的な例です。 <!DOCTYPE html> <html> <body> <iframe srcdoc = <h2>Tutoria

  2. HTMLで順序付きリスト（ol）の開始番号を設定する方法

    順序付きリストの開始値を設定するには？HTMLで順序付きリスト（<ol>）の開始番号を設定するには、start属性を使用します。基本的な書き方は以下の通りです。<ol start=数値>start属性に、リストを開始したい番号を指定します。例えば「5」と指定すれば、リスト項目は5からカウントが始まります。コード例以下のコードを実行して、start属性の実際の動作を確認してみましょう。この例では、プログラミング言語のランキングリストを5位から表示しています。<!DOCTYPE html> <html>    <h

  3. HTMLのテキストエリア（textarea）に表示される行数を設定する方法

    HTMLの（テキストエリア）に表示される行数を設定するには、rows属性を使用します。rows属性を指定することで、ページ読み込み時にテキストエリア内に表示される行数（高さ）を制御できます。また、cols属性と組み合わせれば、幅も同時に調整することが可能です。 サンプルコード 以下のコードは、rows属性を使ってテキストエリアの表示行数を「5行」に設定する例です。実際にブラウザで実行して動作を確認してみてください。 <!DOCTYPE html> <html> <head> <title>HTML rows属性の使い方

  4. HTMLのiframe要素にsandbox属性で追加のセキュリティ制限を有効にする方法

    HTMLでは、<iframe>要素にsandbox属性を指定することで、埋め込まれたコンテンツに対して追加のセキュリティ制限を有効にできます。sandbox属性が指定されると、ブラウザはiframe内のコンテンツを独自のオリジンから読み込まれたものとして扱い、スクリプトの実行、フォーム送信、プラグインの使用などがデフォルトでブロックされます。これにより、信頼できない外部コンテンツによるセキュリティリスクを大幅に軽減できます。基本的な使い方以下のコードは、sandbox属性を実装する例です。実際に動作を確認してみてください。<!DOCTYPE html> <html

  5. HTMLでテーブルセルがまたがる行数を設定する方法（rowspan属性の使い方）

    HTMLのテーブルでセルがまたがる行数を設定するには、rowspan属性を使用します。また、HTMLでセルを結合する場合には、colspan属性とrowspan属性を組み合わせて使います。 それぞれの属性の役割は以下のとおりです。 rowspan属性：セルが縦方向にまたがる行数を指定します。 colspan属性：セルが横方向にまたがる列数を指定します。 たとえば「rowspan=2」と指定すると、そのセルは2行分の高さを占め、下の行の同じ位置にセルを記述する必要がなくなります。 コード例 以下の例では、1行目の見出しセルでcolspan=2により2列分を結合し、2行目のデータセルでrows

  6. HTMLで親要素とその子要素にのみスタイルを適用する方法【scoped属性と代替策】

    HTMLでは、scoped属性を使用することで、スタイルが親要素とその子要素にのみ適用されるよう指定できます。通常、<style>タグは<head>内に記述してページ全体にスタイルを適用しますが、scoped属性を付けると、スタイルの適用範囲をその要素の内部だけに限定できます。scoped属性の使用例<!DOCTYPE html> <html> <head> <style> h2 { color: yellow; } </sty

  7. 【HTML】scope属性でヘッダーセルが列・行のヘッダーであることを指定する方法

    HTMLのテーブルでは、scope属性を使うことで、ヘッダーセル（<th>要素）が「列」「行」、あるいは「列や行のグループ」のいずれに対するヘッダーなのかを明示的に指定できます。 scope属性とは？ scope属性は、テーブルの見出しセルがどの範囲のデータに関連しているのかをブラウザやスクリーンリーダーに伝えるための属性です。特に支援技術を利用するユーザーにとって、テーブルの構造を正しく理解してもらうために重要な役割を果たします。アクセシビリティの観点からも、ヘッダーセルには積極的に設定しましょう。 scope属性に指定できる値 col：そのセルが列のヘッダーであることを示しま

  8. 【HTML】ページ読み込み時に選択肢を初期選択する方法｜selected属性の使い方

    selected属性で初期選択を指定するHTMLでページが読み込まれた時点で特定の選択肢を選択済みの状態にしたい場合は、<select>要素内の該当する<option>要素にselected属性を指定します。通常、ドロップダウンリストでは先頭の項目が自動的に選択されて表示されますが、selected属性を使うことで、任意の項目をデフォルト値として設定できます。selected属性は論理属性のため、値を書かずに「selected」と記述するだけで有効になります。以下のコードを実行して、実際の動作を確認してみましょう。コード例<!DOCTYPE html> &l

  9. HTMLでイメージマップの領域形状を設定する方法（shape属性の使い方）

    HTMLでは、<area>要素にshape属性を指定することで、クリック可能な領域（リンク領域）の形状を定義できます。shape属性は、イメージマップを作成する際に重要な役割を果たし、画像上のどの部分がリンクとして機能するかを決定します。 shape属性で指定できる値 shape属性には、以下の値を設定できます。 rect（矩形）― 四角形の領域を定義します。省略した場合の既定値です。 circle（円形）― 円形の領域を定義します。 poly（多角形）― 3つ以上の座標を組み合わせた多角形の領域を定義します。 default ― 画像全体を領域として定義します。 なお、sha

  10. HTMLで要素がフォーカスを失ったときにスクリプトを実行するには？

    HTMLでは、onblur属性を使うことで、要素がフォーカスを失ったタイミングでスクリプトを実行できます。例えば、テキスト入力欄からカーソルが外れた瞬間に入力内容を加工するといった処理が簡単に実装可能です。以下のサンプルコードを実行して、onblur属性の動作を確認してみてください。コード例<!DOCTYPE html> <html>    <body>       <p>下記に入力してください！</p>       Country: <input

  11. HTMLで再生の準備ができたときにスクリプトを実行する方法（oncanplay属性の使い方）

    動画や音声などのメディアファイルがブラウザ上で再生を開始できる状態になったタイミングで、JavaScriptを実行したいケースはよくあります。そんなときに活躍するのが、HTML5のoncanplay属性です。oncanplay属性とはoncanplay属性は、メディアのバッファリングがある程度進み、再生を開始できる状態になった時点で指定したスクリプトを実行するイベントハンドラです。この属性は、以下の要素に対して使用できます。<audio>（音声）<embed>（埋め込みコンテンツ）<object>（埋め込みオブジェクト）<video>（動画）使用

  12. HTMLのselect要素で表示されるオプションの数を指定する方法

    HTMLの<select>要素で同時に表示される選択肢（オプション）の数を指定するには、size属性を使用します。通常、<select>要素はクリックすると選択肢が展開されるドロップダウン形式で表示されますが、size属性に数値を設定すると、その数だけの選択肢が常に表示されるリストボックス形式に変わります。例えば「size=5」と指定すれば、5つの選択肢が一度に画面上に表示されます。コード例以下のコードは、size属性を使って表示されるオプションの数を5つに設定した実装例です。実際にブラウザで実行して動作を確認してみてください。<!DOCTYPE html>

  13. HTMLでゲージの最適値を設定するにはどうすればよいですか？

    HTMLでゲージ（計測バー）に最適値を設定するには、<meter>要素のoptimum属性を使用します。optimum属性は、その範囲内で「最良」とみなされる値の位置をブラウザに示すもので、値がこの位置に近いほどゲージは良好な状態として表示されます。optimum属性の基本的な使い方以下のコード例では、value（現在値）、low（低域のしきい値）、high（高域のしきい値）とあわせてoptimum属性を指定しています。<!DOCTYPE html> <html>    <body>   &nbs

  14. HTMLで要素の期待値を示す短いヒントを表示するにはどうすればよいですか？

    HTMLでは、placeholder属性を使用することで、入力欄に期待される値を説明する短いヒントを表示できます。ユーザーが何を入力すればよいのかを視覚的に伝えられるため、フォームの使いやすさを向上させるのに非常に便利です。placeholder属性は<input>タグや<textarea>タグに指定でき、ユーザーが入力を始めるとヒントは自動的に消えます。サンプルコード以下のコードを実行して、placeholder属性の実際の動作を確認してみましょう。<!DOCTYPE html> <html>    <body>

  15. HTMLでinput要素の値を正規表現でチェックする方法（pattern属性の使い方）

    HTMLでは、<input>要素にpattern属性を指定することで、入力値を正規表現で検証できます。フォーム送信時に、入力内容が指定したパターンに一致しているかどうかをブラウザが自動的にチェックし、一致しない場合はエラーメッセージを表示します。以下のコードでは、国名コードの入力欄に対して「半角英字3文字」というパターンを設定しています。サンプルコード<!DOCTYPE html> <html>    <head>       <title>HTML novalidate attrib

  16. 【HTML】動画のダウンロード中に表示される画像（ポスター）を設定する方法

    HTMLでは、poster属性を使用することで、動画がダウンロードされている間に表示する画像を簡単に設定できます。 poster属性とは poster属性は、<video>要素に指定できる属性の一つで、動画の読み込み中や再生前の状態で表示されるサムネイル画像（ポスター画像）を定義します。ユーザーが再生ボタンを押すまでの間、この画像が画面に表示されるため、真っ黒な画面を見せることなく、視覚的に魅力的な演出が可能になります。 使用例 以下のコードは、poster属性を実装した具体例です。実際にブラウザで実行して、挙動を確認してみてください。 <!DOCTYPE HTML>

  17. HTMLでページ読み込み時に音声・動画を読み込むかどうかを指定する方法（preload属性の使い方）

    HTMLのpreload属性とはHTMLでは、preload属性を使うことで、ページが読み込まれたときにオーディオや動画をどのように読み込むべきかについて、作成者がブラウザへヒントを与えられます。これにより、ユーザーにとって最適な体験を提供できます。preload属性は <audio> タグと <video> タグの両方で利用可能です。preload属性に指定できる値none：ページ読み込み時にメディアファイルを読み込みません。ユーザーが再生操作を行ったタイミングで初めてダウンロードされます。metadata：再生時間やファイルサイズなどのメタデータのみを読み込みます。

  18. HTMLで要素を読み取り専用にする方法｜readonly属性の使い方を解説

    HTMLのフォーム要素を読み取り専用（編集不可）に設定するには、readonly 属性を使用します。この属性が指定された入力フィールドは、ユーザーが内容を書き換えることができなくなりますが、値はフォーム送信時にサーバーへ引き続き送信されます。 readonly属性の基本例 以下のコードでは、テキスト入力欄に readonly 属性を設定し、ユーザーが値「Amit」を編集できないようにしています。 <!DOCTYPE html> <html>    <body>       <h2>ログイン<

  19. HTMLのrel属性で現在のドキュメントとリンク先ドキュメントの関係を設定する方法

    rel属性を使用すると、現在のドキュメントとリンク先のドキュメントとの関係を定義できます。この属性は、<a>、<area>、<link>といったHTML要素に対して有効です。 rel属性に指定できる代表的な値には、スタイルシートを示す「stylesheet」、外部ページへの参照を示す「nofollow」、前後のページを示す「prev」「next」などがあります。検索エンジンやブラウザがドキュメント間の関係を理解するために役立ちます。 使用例 以下のコードを実行して、rel属性の実装を試してみましょう。この例では、rel属性を使ってCSSファイル（style.

  20. HTMLでフォーム送信前に必須入力を指定する方法｜required属性の使い方

    required属性とはHTMLのrequired属性（必須属性）は、フォームを送信する前に該当する要素への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンをクリックすると、フォームの送信は失敗し、「このフィールドに入力してください（Please fill out this field）」というエラーメッセージが表示されます。なお、required属性はブール型属性のため、値を指定せず「required」と記述するだけで有効になります。required属性が使用できる要素required属性は、次の3つのフォーム部品に適用できます。<inp

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