HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTML DOMのObject heightプロパティとは？使い方とサンプルコードを解説

    HTML DOM Object heightプロパティとはHTML DOMのheightプロパティは、ページ内に埋め込まれたオブジェクト（<object>要素）の高さを取得または設定するために使用されるプロパティです。高さの値はピクセル単位で指定します。構文オブジェクトの高さを取得する場合の構文は次のとおりです。objObject.heightオブジェクトの高さを設定する場合の構文は次のとおりです。objObject.height = pixelsここで、pixelsには、オブジェクトの高さとして設定したい値（ピクセル数）を指定します。実装例それでは、DOMオブジェクトのheigh

  2. HTMLのdata-*属性とは？カスタムデータ属性の基本と使い方を実例付きで解説

    HTMLのdata-*属性は、あらゆるHTML要素に独自のカスタムデータを埋め込むために使用されるグローバル属性です。グローバル属性であるため、どの要素に対しても自由に利用できます。 JavaScriptと連携して要素に関連付ける情報を持たせたい場合などに非常に便利で、モダンなWeb開発では広く活用されています。 data-*属性の書き方（構文） 基本的な構文は以下の通りです。 <element data-属性名=値> ここで注意すべきポイントは次の2つです。 属性名には小文字のみを使用する（大文字は使用不可） 接頭辞「data-」の後に、少なくとも1文字以上の文字が必要 da

  3. HTMLのdefaultPreventedイベントプロパティとは？使い方をサンプルコードで解説

    defaultPreventedイベントプロパティとはHTMLにおけるdefaultPreventedイベントプロパティは、イベントオブジェクトに対してpreventDefault()メソッドが呼び出されたかどうかを確認するために使用されます。戻り値は真偽値（boolean）であり、preventDefault()メソッドが呼び出されていればtrue、呼び出されていなければfalseを返します。このプロパティは、リンクの遷移やフォームの送信など、ブラウザのデフォルト動作が実際にキャンセルされたかどうかをプログラム的に判定したい場合に非常に便利です。構文event.defaultPrevente

  4. HTML DOMオブジェクトのwidthプロパティの使い方

    HTML DOMのObject要素のwidthプロパティは、ページ内に埋め込まれたオブジェクトの幅を設定（set）または取得（return）するために使用されます。幅の値はピクセル単位で指定します。 構文 オブジェクトの幅を設定する場合 objObject.width = pixels オブジェクトの幅を取得する場合 objObject.width 上記の「pixels」には、オブジェクトの幅として設定したい値（ピクセル数）を指定します。 実装例 それでは、DOMオブジェクトのwidthプロパティを実装した例を見てみましょう。次のコードでは、<object>要素の初期幅を300p

  5. HTMLのtime要素とは？datetime属性の使い方と日時の指定方法を解説

    time要素のdatetime属性とはHTMLの<time>要素に用意されているdatetime属性を使うと、人間が読める表示内容とは別に、機械（ブラウザや検索エンジンなど）が解釈できる形式で日時情報を指定できます。検索エンジンがページ内の日付を正確に認識したり、カレンダーアプリとの連携を行ったりする際に役立つ属性です。基本構文datetime属性は以下の形式で記述します。<time datetime="YYYY-MM-DDThh:mm:ssTZD">各部分の意味は次のとおりです。YYYY … 年（4桁）MM … 月（01〜12）DD … 日（その月

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

    HTMLキャンバス（Canvas）のshadowColorプロパティは、図形に描画される影の色を設定するためのプロパティです。デフォルト値は #000000（黒）となっています。shadowColorプロパティを使用する際は、shadowBlurなどの他のシャドウ関連プロパティと組み合わせることで、より自然で美しい影の表現が可能になります。shadowColorプロパティの構文shadowColorプロパティの基本的な書式は以下の通りです。ctx.shadowColor = color;color の部分には、CSSと同じ形式で色を指定します。具体的には、色名（例：gray）、16進数カラーコ

  7. HTMLのcols属性とは？textarea要素の幅指定方法を実例付きで解説

    cols属性とは HTMLのcols属性は、<textarea>要素と<frameset>要素の両方で使用できる属性です。ただし、<frameset>タグはHTML5では廃止され、現在はサポートされていないため、この記事では<textarea>要素におけるcols属性の使い方を中心に解説します。 cols属性の役割 <textarea>要素のcols属性は、テキストエリアの幅（横幅）を指定するために使用します。colsで設定した値に応じて、テキストエリアの実際の表示幅が決まります。 構文 <textarea cols=&qu

  8. HTMLのcolspan属性とは？td・th要素での使い方をわかりやすく解説

    HTMLのcolspan属性は、テーブル内で1つのセルが横方向にまたぐ列数を指定するための属性です。<td>要素または<th>要素に対して使用することができます。 <td>要素のcolspan属性 <td>要素のcolspan属性は、データセルがまたぐ列数を定義します。例えば「colspan=2」と指定すると、そのセルは2列分の幅を持つようになります。合計金額の行など、複数列をひとつにまとめたい場合に活用できます。 構文は以下の通りです。 <td colspan="num"> 上記の「num」には、セルがまたぐ列

  9. HTMLのcontent属性とは？meta要素での使い方を初心者向けに解説

    HTMLにおけるcontent属性は、<meta>要素と組み合わせて使用され、ページに関するメタ情報（メタデータ）の具体的な値を指定するための属性です。name属性やhttp-equiv属性とセットで使われることで、その意味を持つようになります。 content属性の役割 <meta>要素のcontent属性は、HTML文書内にメタ情報を設定するために利用されます。たとえば、以下のような情報を記述できます。 ページの説明文（description）：検索結果に表示されるサイト概要 キーワード（keywords）：ページに関連する検索キーワード 文字コードやビューポート

  10. HTML DOM アンカーの hreflang プロパティとは？設定・取得方法を実例付きで解説

    hreflang プロパティとはHTML DOM の Anchor hreflang プロパティは、<a> 要素（アンカー）が持つ hreflang 属性の値を設定（set）または取得（return）するために使用されます。hreflang 属性は、リンク先のドキュメントがどの言語で記述されているかを示すもので、多言語対応サイトなどで活用される重要な属性です。hreflang プロパティを設定する構文hreflang プロパティに値を設定する場合の構文は以下のとおりです。anchorObj.hreflang = language_codeここで language_code は、リン

  11. HTMLのarea要素におけるtype属性の使い方を解説

    type属性とはHTMLの<area>要素に設定できるtype属性は、リンク先URLのMIME（Multipurpose Internet Mail Extensions）タイプ、つまりメディアタイプを指定するための属性です。リンク先のコンテンツ形式をあらかじめブラウザに伝えることで、より正確なリンク処理が可能になります。基本構文<area type="type_of_media">上記の「type_of_media」には、リンク先ドキュメントの標準的なメディアタイプを指定します。例えば、「image/bmp」「image/tiff」「image/p

  12. HTMLのbase要素におけるhref属性の使い方｜ベースURLの設定方法を解説

    base要素のhref属性とは HTMLの<base>要素におけるhref属性は、ドキュメント内のすべての相対URLに対する基準URL（ベースURL）を設定するための属性です。<base>要素は通常、<head>セクション内に一度だけ記述します。 たとえば、ベースURLをhttps://example.com/tutorialsと設定した場合、/html、/java、/jqueryといった相対URLは、最終的に次のように解決されます。 https://example.com/tutorials/html https://example.com/tutoria

  13. HTMLのbutton要素におけるtype属性の使い方を解説

    <button>要素のtype属性は、ボタンの種類（タイプ）を指定するために使用されます。ここでは、type属性の基本的な構文から、実際のフォームでの使い方まで、サンプルコード付きでわかりやすく解説します。 type属性の基本構文 type属性の書き方は以下の通りです。 <button type="button|submit|reset"> type属性には、次の3つの値を指定できます。 button：クリック可能な汎用ボタン。JavaScriptなどと組み合わせて使われます。 submit：送信ボタン。クリックするとフォームのデータを送

  14. HTMLのcanvas要素におけるwidth属性の使い方を徹底解説

    canvas要素のwidth属性とは HTMLの<canvas>要素におけるwidth属性は、キャンバスの幅をピクセル単位で指定するために使用します。キャンバス上に図形や画像を描画する際、描画領域のサイズを明示的に定義することで、意図したレイアウトを実現できます。 基本的な構文 width属性の基本的な記述方法は以下のとおりです。 <canvas width=pixels_val> pixels_val の部分には、キャンバスの幅として設定したい数値（ピクセル単位）を指定します。 width属性の実装例 それでは、<canvas>要素のwidth属性を実

  15. HTMLのcontenteditable属性とは？使い方を実例付きでわかりやすく解説

    HTMLのcontenteditable属性は、要素の内容がユーザーによって編集可能かどうかを、ブール値（true / false）で指定するための属性です。この属性はグローバル属性に分類されるため、どのHTML要素にも適用できるのが特徴です。 contenteditable属性の基本構文 基本的な書き方は以下のとおりです。 <element contenteditable="true|false"> 要素を編集可能にしたい場合は true を指定し、編集不可にしたい場合は false を指定します。また、親要素から値を継承させたい場合には空文字列（）を指定する

  16. HTMLのcurrentTargetイベントプロパティとは？使い方を実例付きで解説

    currentTargetイベントプロパティとはHTMLのcurrentTargetイベントプロパティは、イベントリスナー（イベントハンドラー）が登録されており、そのイベントを実際に処理している要素を取得するために使用されるプロパティです。以下に構文を示します。event.currentTarget戻り値としては、イベントリスナーが設定された要素への参照（Elementオブジェクト）が返されます。実装例それでは、currentTargetイベントプロパティを使った具体的なコード例を見てみましょう。コード<!DOCTYPE html> <html> <body>

  17. HTMLキャンバスのfillRect()メソッドとは？塗りつぶし矩形の描き方を解説

    HTMLキャンバスのfillRect()メソッドとはHTMLキャンバスのfillRect()メソッドは、Webページ上に塗りつぶされた矩形（長方形）を描画するためのメソッドです。特に色を指定しない場合、デフォルトの塗りつぶし色は黒になります。<canvas>要素を使用すると、JavaScriptを使ってWebページ上に自由にグラフィックを描くことができます。キャンバスのサイズは、height（高さ）とwidth（幅）という2つの属性によって決まります。fillRect()メソッドの構文context.fillRect(p, q, width, height);各パラメータの意味は以

  18. HTML CanvasのfillStyleプロパティとは？使い方とサンプルコードを解説

    HTML CanvasのfillStyleプロパティは、図形を描画する際の塗りつぶしに使う「色」「グラデーション」「パターン」を設定するためのプロパティです。初期値は #000000（黒）となっています。 <canvas>要素を使用すると、JavaScriptを使ってWebページ上に自由にグラフィックを描画できます。canvas要素には描画領域のサイズを決める2つの属性があり、それぞれ高さを表すheightと幅を表すwidthです。 fillStyleの基本構文 ctx.fillStyle = color | gradient | pattern; fillStyleに設定できる値

  19. HTMLのtextarea要素におけるreadonly（読み取り専用）属性の使い方

    <textarea>要素のreadonly属性は、テキストエリアを読み取り専用に設定するために使用されます。readonly属性が設定されたテキストエリアは、ユーザーが内容を編集・変更することができません。ただし、読み取り専用に設定されていても、ユーザーはテキストの内容をコピーすることは可能です。構文<textarea readonly>実装例以下は、<textarea>要素のreadonly属性を実装した例です。面接の質問フォームと、編集不可の案内文を組み合わせたケースを想定しています。<!DOCTYPE html> <html>

  20. HTMLのtimeタグとは？日付と時刻を表示する方法をわかりやすく解説

    HTMLの<time>要素は、Webページ上に日付や時刻を設定して表示するために使用されるタグです。このタグはHTML5で新たに導入されました。datetime属性と組み合わせることで、人間が読める表示テキストと、機械が判読できる正確な日時情報の両方を提供できるのが大きな特徴です。 timeタグで使用できる属性 datetime: 実際の日時（機械可読な形式）を指定します。 timeタグの使用例 それでは、HTMLで<time>タグを実装する具体的な例を見てみましょう。 <!DOCTYPE html> <html> <body&g

Total 2020 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:62/101  20-コンピューター/Page Goto:1 56 57 58 59 60 61 62 63 64 65 66 67 68