HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTMLのdatalistタグの使い方！入力候補リストを作成する方法

    datalistタグとは？HTMLの<datalist>タグは、<input>要素に対して選択肢（候補リスト）を定義するためのタグです。テキストフィールドにユーザーが入力を始めると、あらかじめ用意された候補がドロップダウン形式で表示されるため、入力の手間を減らし、入力ミスを防ぐことができます。<datalist>タグを使用する際のポイントは以下の2点です。・<input>要素側にlist属性を指定し、その値と<datalist>要素のid属性を一致させる・選択肢は<datalist>〜</datalist>の中

  2. HTMLのkeygenタグとは？使い方と主要属性をサンプルコード付きで解説

    <keygen>タグとは HTMLの<keygen>タグは、証明書管理システムと連携してWebフォームを処理するために用意されていた要素です。フォームが送信されると、秘密鍵はユーザーのローカル環境に保存され、公開鍵だけがサーバーへ送信される仕組みになっています。 注意：<keygen>タグはHTML5.2で廃止された要素であり、現在の主要ブラウザではサポートされていません。新規のプロジェクトでの利用は避け、本記事の内容は歴史的な仕様の理解やレガシーコードのメンテナンス時の参考としてご活用ください。 <keygen>タグの主な属性一覧 <k

  3. HTMLのoutputタグとは？使い方と主要属性を実例つきでわかりやすく解説

    HTMLの<output>タグは、計算やユーザー操作の結果を表示するための要素です。フォーム内でJavaScriptなどを使って処理した結果を、ページの再読み込みなしにリアルタイムで表示したい場合に特に役立ちます。 outputタグの主な属性 属性値説明 for 要素ID 計算に関わった入力要素のIDをスペース区切りで指定します。「どの要素が計算に値を提供したか」を示すためのものです。 form フォームID 紐付ける<form>要素のIDを指定します。この属性を使うことで、output要素をフォームの外側などドキュメント内の任意の場所に配置できます。

  4. HTMLの入力フィールドに値の範囲制限を設定する方法（min属性・max属性）

    HTMLの<input>タグは、ユーザーからデータを受け取るためのフォーム部品を作成する際に使用します。数値や日付などの入力フィールドに「入力できる値の範囲」を制限したい場合は、min属性とmax属性を活用しましょう。min属性には入力フィールドで許容される最小値を、max属性には最大値をそれぞれ指定します。この2つの属性は、以下の入力タイプ（type属性）と組み合わせて使用できます。number（数値）range（レンジスライダー）date（日付）datetime / datetime-local（日時）month（月）time（時刻）week（週）記述例次のサンプルコードでは、

  5. HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。 HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。 drawImage()メソッドの基本構文と引数 drawImage()メソッドの基本的な呼び出し形式は次の通りです。 ctx.drawImage(img, x, y); 各引数の意味は以下の通りです。 img：

  6. SVGで中空の円（輪郭のみの円）を描く方法を解説

    SVGで中空の円（塗りつぶしなしの輪郭だけの円）を描くには、<circle>要素を使用します。ポイントは、fill=noneを指定して内側を透明にし、stroke属性で輪郭線を描画することです。SVGとは？SVG（Scalable Vector Graphics）は、XMLを使って2Dグラフィックスやグラフィカルアプリケーションを記述するための言語です。記述されたXMLはSVGビューアによってレンダリングされます。現在の主要なWebブラウザのほとんどは、PNG・GIF・JPGなどの画像形式と同じようにSVGを表示できます。サンプルコード以下のコードを実行すると、SVGで中空の円を描

  7. HTML5のSVGで円形の中に画像を表示する方法をわかりやすく解説

    HTML5のSVGでは、<clipPath>要素でクリッピングパス（切り抜き領域）を定義することで、円形の中に画像を表示できます。具体的には、<defs>内に<clipPath>を作成し、その中に<circle>要素で円形の領域を指定します。そして、<image>要素で読み込んだ画像に対して、clip-path属性を使ってクリッピングパスを適用します。 SVGクリッピングパスの基本構造 画像を円形に切り抜く仕組みは以下の3つの要素で構成されています。 <defs>: 再利用する定義（クリッピングパスなど）を格納するコンテ

  8. HTMLページで円を描く方法｜CSSのborder-radiusを使った簡単な実装例

    HTMLページ上に円を描くには、主に「SVG」「Canvas」「CSS」の3つの方法があります。中でも最も手軽なのが、CSSのborder-radiusプロパティを使う方法です。要素の幅と高さを同じ値にし、border-radiusをその半分（または50%）に設定するだけで、簡単に正円を描くことができます。CSSで円を描くサンプルコード以下のコードを実行すると、青い円が画面に表示されます。ぜひ実際に試してみてください。<!DOCTYPE html> <html>    <head>     

  9. HTML5でSVG（Scalable Vector Graphics）を操作する方法をわかりやすく解説

    SVGは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略称で、2DグラフィックスやグラフィックアプリケーションをXML形式で記述するための言語です。記述されたXMLコードは、SVGビューアによって描画されます。SVGは、円グラフやXY座標系における2次元グラフなど、ベクター形式の図表を扱う場面で特に威力を発揮します。拡大・縮小しても画質が劣化しない点も大きな特徴です。HTML5でSVGを使用する基本的な方法HTML5でSVG（Scalable Vector Graphics）を扱うには、<svg>...</svg>タグを

  10. HTML Canvasで角丸の長方形を描く方法をわかりやすく解説

    HTMLで図形を描画するには、canvas要素を使用します。通常の長方形であればrect()メソッドで簡単に描けますが、角が丸い長方形（角丸長方形）を描きたい場合は、rect()メソッドだけでは対応できません。 角丸長方形を作成するには、直線を引くためのlineTo()メソッドと、二次ベジェ曲線を描くquadraticCurveTo()メソッドを組み合わせます。長方形の四隅を二次ベジェ曲線で滑らかにつなぐことで、角の丸い長方形を実現できます。 HTML5でキャンバスを作成する方法 まずは、HTML5でキャンバスを作成する基本的な手順です。<canvas>要素を配置し、JavaScr

  11. HTML5でSVGを使って図形を描画する方法を徹底解説

    SVGとは？SVG（Scalable Vector Graphics／スケーラブル・ベクター・グラフィックス）は、2Dグラフィックスや図形アプリケーションをXML形式で記述するためのマークアップ言語です。記述されたXMLコードは、SVGビューアによって画面へ描画されます。現在では、ほとんどのWebブラウザがPNGやGIF、JPGなどの画像形式と同様に、SVGをそのまま表示できるようになっています。SVGを活用すれば、円・長方形・線などの基本的な図形を、HTML5の文書内で手軽に描画できます。ここでは、SVGを使って長方形を描く具体例を紹介します。サンプルコード次のコードを実行すると、<r

  12. HTML5 Canvasを使って星を描く方法を解説

    HTMLのcanvas要素に描画を行うには、JavaScriptを使用します。実際に描き始める前に、HTML DOMメソッドであるgetElementById()とgetContext()を使って、キャンバスへの参照と描画コンテキストを取得しておく必要があります。HTMLで星を描くには、canvas要素を利用します。星形を描く際にはlineTo()メソッドが便利です。このメソッドはx座標とy座標の2つのパラメータを受け取り、その位置へ線を引くことで図形を形成していきます。まず、HTMLドキュメント内にキャンバスを配置する方法から見ていきましょう。サンプルコード以下のコードを実行すると、HTML

  13. HTML5でSVGロゴを描く方法をわかりやすく解説

    SVGとは？SVG（Scalable Vector Graphics：スケーラブル・ベクター・グラフィックス）は、XMLを使って2Dグラフィックスや図形アプリケーションを記述するための言語です。記述されたXMLコードは、SVGビューアによって描画（レンダリング）されます。現在、主要なWebブラウザのほとんどが、PNGやGIF、JPGといった画像形式と同じようにSVGを表示できます。HTML5でのSVGの基本HTML5では、SVGタグを使うことで、円・長方形・直線などの基本図形を手軽に描くことができます。ここでは、実際にSVGでロゴを描くサンプルを紹介します。ロゴに美しい色合いを持たせるため、l

  14. HTML5のCanvasにSVGファイルを描画する方法

    Canvas（キャンバス）にSVGを描画するには、SVGを画像として扱う必要があります。まず、HTMLコンテンツを含めるための<foreignObject>要素を使ってSVGデータを構築し、その後、生成したSVG画像をCanvas上に描画します。 具体的な流れは以下の通りです。 処理の手順 SVG文字列を作成する：<svg>要素の中に<foreignObject>要素を配置し、その中にXHTML名前空間（xmlns=https://www.w3.org/1999/xhtml）を指定したHTMLを記述します。 Blobオブジェクトに変換する：作成したSVG文

  15. HTML5 SVGで長方形を描画する方法【rect要素の基本】

    SVG（Scalable Vector Graphics／スケーラブル・ベクター・グラフィックス）は、2DグラフィックスやグラフィックアプリケーションをXML形式で記述するための言語です。記述されたXMLはSVGビューアによって描画され、主要なWebブラウザの多くは、PNG・GIF・JPGなどの画像形式と同じようにSVGを表示できます。 HTMLのSVGで長方形を描画するには、SVGの<rect>要素を使用します。<rect>要素では、width属性やheight属性でサイズを指定し、fill属性で塗りつぶしの色を設定できます。 サンプルコード 以下のコードを実行する

  16. HTML5 SVGで楕円を描く方法｜ellipse要素の使い方をわかりやすく解説

    SVGとは？ SVG（Scalable Vector Graphics）は、XMLを使って2Dグラフィックスやグラフィックアプリケーションを記述するための言語です。記述されたXMLはSVGビューアによって描画されます。現在、主要なWebブラウザのほとんどは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できるため、Web制作において非常に扱いやすいフォーマットとなっています。 HTML5 SVGで楕円を描く基本 HTMLのSVGで楕円を描くには、SVGの<ellipse>要素を使用します。この要素では、以下の属性を指定することで楕円の位置と形状を自由にコントロールでき

  17. HTML5 SVGで楕円を重ねて描画する方法をわかりやすく解説

    SVG（Scalable Vector Graphics）は、XML形式で2Dグラフィックスやグラフィカルアプリケーションを記述するための言語です。記述されたXMLはSVGビューアによって描画され、PNG、GIF、JPGなどの画像形式と同様に、ほとんどのWebブラウザで表示できます。HTML SVGで楕円を描画するには、SVGの<ellipse>要素を使用します。複数の楕円を重ねて描画したい場合は、各楕円の中心座標（cx属性・cy属性）を適切に設定することがポイントです。ellipse要素の主な属性<ellipse>要素では、次の属性を使って楕円の位置や形状を指定します

  18. HTML5 SVGで角丸の長方形を作成する方法【rx・ry属性の使い方】

    SVG（Scalable Vector Graphics）は、XMLを使用して2Dグラフィックスやグラフィカルなアプリケーションを記述するための言語です。記述されたXMLは、SVGビューアによって描画されます。現在、主要なWebブラウザの多くは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できるようになっています。HTMLのSVGで長方形を描画するには、<rect>要素を使用します。さらに、角を丸くしたい場合はrx属性とry属性を指定します。この2つの属性に値を設定することで、長方形の四隅が滑らかに丸められます。実装例以下のコードを実行すると、HTML5 SVGで角

  19. HTML5 SVGでポリゴン（多角形）を描画する方法

    SVG（Scalable Vector Graphics：スケーラブルベクターグラフィックス）は、XMLを使用して2Dグラフィックや図形アプリケーションを記述するための言語です。記述されたXMLはSVGビューアによって描画されます。現在、主要なWebブラウザのほとんどは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できます。 polygon要素とは HTMLのSVGでポリゴン（多角形）を描画するには、<polygon>要素を使用します。<polygon>要素は、3辺以上の閉じた図形を生成します。図形の形状はpoints属性で定義し、ここにはポリゴンの各頂

  20. 【初心者向け】HTML5 SVGでポリライン（折れ線）を描画する方法

    SVGとは？SVG（Scalable Vector Graphics／スケーラブル・ベクター・グラフィックス）は、XMLを使って2Dグラフィックスや図形アプリケーションを記述するための言語です。記述されたXMLコードは、SVGビューアによって画面に描画されます。現在では、主要なWebブラウザのほとんどが、PNG・GIF・JPGなどの画像形式と同じようにSVGを表示できるようになっています。<polyline>要素でポリラインを描くHTML5のSVGでポリライン（折れ線）を描画するには、<polyline>要素を使用します。この要素は、複数の直線を連結して1つの図形を作成

Total 2020 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:90/101  20-コンピューター/Page Goto:1 84 85 86 87 88 89 90 91 92 93 94 95 96