HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTMLでリストを降順（9、8、7、6、5…）に表示する方法｜reversed属性の使い方

    HTMLでは、reversed属性を使用することで、順序付きリストの番号を降順（9、8、7、6、5…）で表示するように指定できます。 reversed属性とは <ol>要素にreversed属性を追加するだけで、リスト項目の番号が自動的に逆順になります。値を指定する必要はなく、属性名を記述するだけで動作します。ランキングやカウントダウンなど、番号が大きい方から小さい方へ進むリストを作りたい場合に便利です。 サンプルコード 以下のコードを実行して、reversed属性の実際の動作を確認してみましょう。 <!DOCTYPE html> <html>  

  2. HTMLで要素が無効なときにスクリプトを実行する方法｜oninvalid属性の使い方

    HTMLでフォームの要素が無効（バリデーションエラー）になったときにスクリプトを実行したい場合は、oninvalid属性を使用します。oninvalid属性とは？oninvalidは、入力フィールドの値が検証ルールを満たさなかった場合に発火するイベント属性です。例えば、required属性が指定された入力欄が空のままフォームを送信しようとしたときなどに、アラート表示やカスタムメッセージの処理をJavaScriptで実行できます。サンプルコード以下のコードでは、学生IDの入力欄が空のまま送信ボタンが押されたときに、oninvalid属性によって警告メッセージを表示します。<!DOCTYPE

  3. HTMLでリンク先ドキュメントに最適なメディア・デバイスを指定する方法（media属性の使い方）

    HTMLでリンク先のドキュメントがどのメディアやデバイス向けに最適化されているかを指定するには、media属性を使用します。この属性を活用することで、画面表示用、印刷用、音声読み上げ用など、出力先に応じて異なるスタイルやリソースを適用できます。media属性は、主に以下の要素と組み合わせて使用されます。<link>：外部スタイルシートの読み込み先を指定<a>：リンク先の対象メディアを指定<area>：イメージマップのリンク先メディアを指定<style>：スタイル定義の適用対象メディアを指定<source>：メディアリソースの対象デバイ

  4. HTMLのondragenter属性とは？要素が有効なドロップターゲットにドラッグされたときにスクリプトを実行する方法

    HTML5では、要素が有効なドロップターゲット上にドラッグされると、ondragenterイベントが発火します。このイベントを利用することで、ドラッグ中の要素がドロップ可能な領域に入ったタイミングで、任意のスクリプト（JavaScript）を実行できます。例えば、ドラッグされた要素が特定のエリアに入った瞬間に背景色を変えたり、視覚的なフィードバックを表示したりする場合に活用されます。ondragenterは、ondragstart・ondragover・ondropといった他のドラッグ＆ドロップ関連イベントと組み合わせて使うのが一般的です。実装例以下のコードを実行して、ondragenter属

  5. HTMLで最小値を指定する方法【min属性の使い方を解説】

    HTMLで入力フィールドに最小値を指定するには、min属性を使用します。min属性は、<input>要素に設定できる属性の一つで、ユーザーが入力できる数値や日付の下限を定義できます。指定された最小値より小さい値が入力された場合、フォーム送信時にバリデーションエラーが発生します。min属性の基本的な使い方以下のコードは、数値入力フィールド（type=number）に対してmin属性とmax属性を組み合わせて使用する例です。この例では、ランキング（Rank）として1から10までの範囲の数値のみ入力できるように制限しています。サンプルコード<!DOCTYPE html> &l

  6. HTMLでフォームデータ送信時のHTTPメソッドを指定する方法【method属性の使い方】

    HTMLでフォームデータを送信する際に使用するHTTPメソッドを指定するには、<form>要素のmethod属性を使用します。 method属性で指定できる主な値 get（デフォルト）： フォームデータをURLのクエリ文字列として送信します。検索フォームなど、送信内容がURLに表示されても問題ない場合に適しています。 post： フォームデータをHTTPリクエストのボディに含めて送信します。パスワードや個人情報など、機密性の高いデータを扱う場合に推奨されます。 サンプルコード 以下のコードは、method属性に「post」を指定したフォームの実装例です。セレクトボックスで選択し

  7. HTMLで複数の値の入力を許可する方法｜multiple属性の使い方を解説

    HTMLでは、multiple属性を使用することで、ユーザーが複数の値を入力できるように指定できます。この属性は、ファイルアップロード用の <input type=file> やメールアドレス入力用の <input type=email> などに指定でき、また <select> 要素にも適用可能です。multiple属性の基本multiple属性は論理属性（ブール型属性）のため、値を指定する必要はなく、タグ内に記述するだけで有効になります。ファイル選択： Ctrlキー（MacではCommandキー）を押しながらクリックすることで、複数のファイルを選択できます

  8. HTMLでエラー発生時にスクリプトを実行する方法｜onerrorイベントの使い方を解説

    HTMLでは、onerrorイベント属性を使うことで、エラーやリソースの読み込み失敗が発生した際にJavaScriptのスクリプトを自動的に実行できます。特に画像や外部ファイルが正しく読み込めなかった場合のエラーハンドリングに便利です。 onerrorイベントとは onerrorイベントは、対象の要素（imgタグなど）でエラーが発生したときにトリガーされます。例えば、指定した画像ファイルが存在しない、パスが間違っている、ネットワークの問題で読み込めないといったケースで発火します。 onerrorイベントの実装例 以下のコードは、画像の読み込みに失敗した場合にアラートを表示するシンプルなサンプル

  9. HTMLで動画の音声をミュートに設定する方法｜muted属性の使い方を解説

    HTML5では、muted属性を使用することで、動画の音声出力をミュート（無音）状態に設定できます。この属性は<video>要素に指定でき、ページの読み込み時に自動的に音声をオフにした状態で再生されます。 実装例 以下のコードを実行して、muted属性の動作を実際に確認してみてください。 <!DOCTYPE HTML> <html>    <body>       <video width = "300" height = "200" controls

  10. HTMLでフォームの検証（バリデーション）を無効にする方法｜novalidate属性の使い方

    フォーム送信時の入力チェック（バリデーション）を無効にしたい場合は、HTMLの novalidate 属性を使用します。この属性を <form> タグに追加するだけで、ブラウザによる自動検証がスキップされ、必須項目が未入力でもメールアドレスの形式が正しくなくても、そのままデータを送信できるようになります。 novalidate属性の基本構文 novalidate属性は論理属性（ブール属性）なので、値を指定せずに記述するだけで有効になります。 <form action="" method="get" novalidate> ..

  11. HTMLで要素の名前を設定するには？name属性の使い方を解説

    HTMLでは、name属性を使うことで要素に名前を設定できます。この属性は、フォーム送信時のデータ識別やスクリプトからの要素参照など、さまざまな場面で重要な役割を果たします。name属性が使用できるHTML要素name属性は、以下のHTML要素に対して使用することができます。<button><fieldset><form><iframe><input><map><meta><object><output><param><select><textarea>

  12. HTMLのdetails要素を最初から開いた状態で表示するには？open属性の使い方

    Webページで「続きを読む」のような折りたたみコンテンツを手軽に実装できるのが <details> 要素です。通常、この要素は閉じた状態で表示されますが、open属性を指定することで、ページ読み込み時に最初から展開された状態でユーザーに見せることができます。open属性の基本的な使い方<details> タグに open と記述するだけで、詳細部分が初期状態で表示されます。値を指定する必要のない論理属性（ブール属性）なので、属性名を書くだけで有効になります。以下のコード例を実行して、実際の表示を確認してみましょう。コード例<!DOCTYPE html> &l

  13. HTMLのtrack要素でテキストトラックにタイトル（ラベル）を付ける方法

    HTMLでテキストトラック（字幕など）にタイトルを表示するには、<track>要素のlabel属性を使用します。label属性に指定した値は、動画プレーヤーの字幕選択メニューなどに表示され、ユーザーがどの字幕トラックかを識別しやすくなります。label属性の基本的な使い方以下のコードは、英語とロシア語の2つの字幕トラックにそれぞれlabel属性でタイトルを付けた実装例です。実際にブラウザで実行して動作を確認してみてください。<!DOCTYPE HTML> <html>    <body>   &n

  14. HTMLで要素のコンテンツの言語を指定するにはどうすればいい？

    HTMLでは、lang属性を使うことで、要素内のコンテンツがどの言語で書かれているかを指定できます。検索エンジンやスクリーンリーダーがページの内容を正しく解釈するうえでも重要な属性です。以下のコードを実行して、lang属性の使い方を実際に確認してみましょう。 コード例 この例では、英語に加えてフランス語とスペイン語のコンテンツも追加し、それぞれの言語をlang属性で指定しています。 <!DOCTYPE html> <html>    <body>       <h2>English</h2&

  15. HTMLのinput要素からdatalist要素の事前定義オプションを参照する方法

    HTMLでは、<input>要素にlist属性を使用することで、事前定義された選択肢を持つ<datalist>要素を参照できます。この属性の値には、連携させたい<datalist>要素のidを指定します。ユーザーが入力欄をクリックまたは入力すると、datalistで定義された候補がドロップダウン形式で表示され、入力内容に応じて候補が絞り込まれます。フォームの入力補完として非常に便利な機能です。実装例以下のコードは、list属性を使って<datalist>要素を参照する具体的な例です。<!DOCTYPE html> <html&g

  16. HTMLのtrack要素でoncuechange属性を使ってキュー変更時にスクリプトを実行する方法

    HTMLのoncuechange属性は、動画や音声の再生中にキュー（cue）が切り替わったタイミングでスクリプトを実行するためのイベント属性です。この属性は、字幕やキャプションのトラックを定義する<track>要素と組み合わせて使用します。たとえば、字幕の表示内容が切り替わる瞬間にアラートを表示したい場合、次のようにoncuechange属性を記述します。<video> <track oncuechange = alert(Changed!)> </video>実装例以下のコードは、oncuechange属性を実際に使ったサンプルです。動

  17. HTMLのmeter要素で「低い値」とみなされる範囲を設定する方法

    HTMLでは、<meter>要素にlow属性を指定することで、「低い値」とみなされる範囲を設定できます。low属性にはしきい値となる数値を指定し、その値以下の測定値はブラウザ上で低い状態として表示されます。主な属性の説明value：現在の測定値min / max：測定範囲の最小値と最大値low：「低い」とみなされる上限のしきい値high：「高い」とみなされる下限のしきい値サンプルコード以下のコードを実行すると、meter属性を使った低値範囲の設定を確認できます。<!DOCTYPE html> <html> <head> <

  18. 【HTML】動画・音声をループ再生する方法｜loop属性の使い方を解説

    HTMLのloop属性を使用すると、オーディオやビデオの再生が終了するたびに、自動的に最初から再生し直す（ループ再生する）ように指定できます。この属性は、BGMや繰り返し見せたいプロモーション動画などに便利です。以下のコードを実行して、loop属性の実装方法を確認してみましょう。サンプルコード<!DOCTYPE HTML> <html> <body> <video width=300 height=200 controls loop> <source src=/html5/foo.ogg type=vi

  19. HTMLで最大値を設定する方法｜max属性の使い方をわかりやすく解説

    HTMLで入力欄に最大値（上限値）を設定するには、<input>要素のmax属性を使用します。max属性を指定することで、ユーザーが入力できる数値や日付の上限を制限でき、不正な値の送信を防ぐことができます。max属性の基本max属性は、type=number、type=range、type=dateなどの入力タイプと組み合わせて使われます。例えば「1〜10までの数値のみ入力させたい」場合は、min属性とmax属性を併用します。コード例以下は、max属性を使って最大値を設定するサンプルコードです。ランキング（順位）を1〜10の範囲で入力できるフォームを作成しています。<!DOC

  20. HTMLで入力できる最大文字数を制限するには？maxlength属性の使い方を解説

    HTMLのフォームで、テキスト入力欄に入力できる最大文字数を制限したい場合は、maxlength属性を使用します。この属性に数値を指定することで、ユーザーはその文字数を超えて入力できなくなります。 maxlength属性とは maxlength属性は、<input>要素（type=text や type=password など）や <textarea>要素に対して指定できます。例えば maxlength=20 と設定すれば、半角・全角を問わず20文字までしか入力できません。 なお、type=number の数値入力欄では maxlength 属性は機能しないため、代わり

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