タグ

referenceとHTML5に関するkathewのブックマーク (33)

  • <details>: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN

    <details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供する必要があります。 折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <summary> 要素の内容が折りたたみウィジェットのラベルとして使用されます。 <details> ウィジェットは 2 つの状態のうち 1 つを取ります。既定の閉じた状態は <summary> を使用して指定されたラベル文字列(または <summary> がない場合はユーザーエージェントが定義した既定の文字列)とウィジェット自身による三角形だけを表示します。 ユーザーがウィジェットをクリックするか、フォーカスしてスペースバーを押すと、ウィジェットは「ツイスト

    <details>: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN
  • <figure>: キャプションが付けられる図要素 - HTML: ハイパーテキストマークアップ言語 | MDN

    HTML チュートリアル HTML の基 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>

    <figure>: キャプションが付けられる図要素 - HTML: ハイパーテキストマークアップ言語 | MDN
  • <link>: 外部リソースへのリンク要素 - HTML: ハイパーテキストマークアップ言語 | MDN

    HTML チュートリアル HTML の基 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>

    <link>: 外部リソースへのリンク要素 - HTML: ハイパーテキストマークアップ言語 | MDN
  • <a>-HTML5タグリファレンス

    <a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>~</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点(出発点)や終点(到達点)とすることができます。 <a>は、anchor(アンカー)の略です。 anchorを日語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。 href属性は、ハイパーリンク先のURLを指定する際に使用します。 href属性の値には相対パスと絶対パスのどちらでも指定することができます。 相対パスとは、現在のファイルの場所からの相対的なパスを指定する方法で、 同じドメイン名のURL同士ならフォルダ階層やファイル名を指定するだけでリンクすることができます。 絶対パスと

    kathew
    kathew 2018/07/26
    HTML5になった時点でブロック要素を囲んで良くなったのね。便利
  • HTML[フレージング・コンテンツ]フレージング・コンテンツに属する要素の一覧 - TAG index

    フレージング・コンテンツは、段落内で使用するようなコンテンツです。 従来で言うインライン要素に相当する要素が、このカテゴリーに属することになります。 フレージング・コンテンツに属する要素は、同時にフロー・コンテンツにも属しています。

    HTML[フレージング・コンテンツ]フレージング・コンテンツに属する要素の一覧 - TAG index
    kathew
    kathew 2018/01/30
    HTML5.2より、p要素にはフレージングコンテンツしか含められないとなり、ではどれがフレージングコンテンツぞやとなったため、備忘
  • HTML5/テキスト/a要素 リンクを設定する - TAG index

    href属性を指定しない場合は、その他の任意属性(hreflang属性、type属性、rel属性、target属性、download属性、ping属性、referrerpolicy属性)も指定できません。 a要素にitemprop属性(グローバル属性)が指定されている場合は、href属性も指定する必要があります。 各属性の詳細については、下記のページを参考にしてください。 リンク先の表示方法を指定する ダウンロード用のリンクを指定する リンク先にアクセスする際のリファラーポリシーを指定する リンクのクリック時にpingを送信する リンクの設定方法 リンクを設定したい場合は、リンク先のURLをhref属性で指定します。 <p><a href="example.html">リンクテキスト</a></p> a要素の内容について HTML5以降、a要素の内容に(従来で言う)ブロックレベル要素も配置

    HTML5/テキスト/a要素 リンクを設定する - TAG index
    kathew
    kathew 2018/01/22
    "a要素の内容には、(従来で言う)ブロックレベル要素も配置できるようになりました。そのため、次のように段落ごとリンクを設定することが可能です。"
  • fieldset要素 - HTML5

    fieldset要素は、複数のフォームの項目をまとめてグループ化します。グループの名前を付けるには、fieldset要素内の最初にlegend要素を記述します。 fieldset要素でdisabled属性を指定すると、fieldset要素の最初のlegend要素内を除き、fieldset要素内のすべてのフォームコントロールが使用不可に設定されます。 form属性は、fieldset要素と関連付けたいform要素のid属性の値を指定します。初期値では、fieldset要素は直近の親要素であるform要素に関連付けられています。また、name属性では、fieldset要素の名前を指定できます。 fieldset要素は、Flowコンテンツの記述箇所で使用できます。入れ子構造で使用することも可能です。

    kathew
    kathew 2017/12/28
    入れ子構造で使用可能
  • HTML5 ドキュメントのセクションとアウトライン - HTML | MDN

    警告: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。 HTML5 の仕様書では、文書の構造を整理するのに役立つ意味づけする区分化要素がいくつか導入されました。意味づけする区分化要素は、ブラウザーや読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する他の技術に構造的な意味を伝えるために特別に設計されています。 意味づけする区分化要素は、文書内のより大規模な構造を明確にします。以前の版の HTML には、関連するコンテンツをグループ化するための一般的なメカニズムとして <div> 要素

    HTML5 ドキュメントのセクションとアウトライン - HTML | MDN
  • main 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP

    4.4.14 main 要素 カテゴリー: フロー・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所。ただし、祖先に article, aside, footer, header, nav 要素があってはならない。 コンテントモデル: フロー・コンテント コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: main ロール (デフォルト - 指定不要) または presentation 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う。 main 要素は、ドキュメントやアプリケーションの body

  • <header>-HTML5タグリファレンス

    <header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。 文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。 <header>の中には、通常は<h1>・<h2>・<h3>・<h4>・<h5>・<h6>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。 ■HTML4.01からHTML5へのバージョンアップによる変更点 header要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <body> <header> <h1>浦島観光ホテル</h1> <nav> <ul> <li><a href="plan.html">宿泊プラン</a></li

  • <input placeholder>-HTML5タグリファレンス

    <input>要素のplaceholder属性で指定した値が、入力欄に初期値として表示されます。 例えば、テキストフィールドに初期値として、 「検索するキーワードを入力してください」などのヒントを示してユーザーの操作を補助することができます。 ■属性

  • JavaScriptによるHTML5プログラミング入門 - libro

    ※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。

  • <h1>-<h6>-HTML5タグリファレンス

    <h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは、見出しを付ける際に使用します。 数値が小さいほど高いランクの見出しとなります。 <h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。 同じ数値のものが複数ある場合には同じランクとなります。 ■使用例1 HTMLソース <h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6> ■見出しを配置すると暗黙的に新しいセクションを開始したことになる 見出しを配置すると暗黙的に新しいセクションを開始したことになります。 セクショニング・コンテンツの要素( <article>・ <aside>・ <nav>・ <section> )の中にある、 最初のヘッディング・コンテンツの要素( <h1>・ <h2>・ <h3>

  • font プロパティ - Canvasリファレンス - HTML5.JP

    構文 context . font [ = value ] 現在のフォント設定を返します。 値をセットしてフォントを変更することができます。その構文は、CSS の 'font' プロパティと同じです。CSS フォント値として構文解析できない値は無視されます。 関連キーワードと長さは、canvas 要素のフォントに対して算出されます。 仕様 font IDL 属性は、値がセットされると、CSSの 'font' プロパティと同じように解釈されなければいけません(ただし、'inherit'のようなプロパティ非依存のスタイルシート構文はサポートされません。)。その結果、フォントは、'normal' に強制された 'line-height' コンポーネントで、そして、CSS ピクセルに変換された 'font-size' コンポーネントで、そして、明示的な値に算出されているシステムフォントで、コンテキ

  • さまざまな図形を描く - Canvas - HTML5.JP

    Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 矩形(長方形) 先ほどのコーナーでは、線を引くことで矩形を描きましたが、一発で矩形を描くメソッドがあります。 ctx.fillRect(x, y, width, height) 塗りつぶした矩形を描きます。x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として与えます。 ctx.strokeRect(x, y, width, height) 矩形を描きますが、枠線のみとなります。引数はfillRectメソッドと同じです。 ctx.clearRect(x, y, width, height) 矩形を削除します。削除された部分は透明になります。引数はfillRectメソッドと同じでです。 それぞ

  • lineTo(x, y)-Canvasリファレンス

    lineTo(x, y)メソッドは、直前の座標と指定座標を結ぶ直線を引く際に使用します。 指定する座標は、<canvas>要素の左上端からの距離となります。 すでに作成されているサブパスがある場合、lineTo()で作成される新しいサブパスは直前のサブパスに繋がる直線となります。 すでに作成されているサブパスは変更されず、点と直線からなる新しいサブパスがパス(サブパスの集合したもの)に追加接続されます。 サブパスとは、パスを構成する線の一のことです。 パスの基的な概念については、beginPath()のページを参照してください。 ■直線を描画する 新しい直線を描画する場合は以下のような流れとなります。 beginPath()で現在のパスをリセットする moveTo(x, y)でパスの開始座標を指定する lineTo(x, y)で座標を指定してラインを引く stroke()で現在のパスを

  • Canvasの使い方 - Canvas - HTML5.JP

    このコーナーでは、Canvasを使うにあたっての事前準備と、簡単な使い方をまとめました。 ExplorerCanvasのダウンロード Internet ExplorerはCanvasに対応していません。そのため、Googleが提供しているExplorerCanvasというJavaScriptライブラリをダウンロードしましょう。0002 ExplorerCanvasダウンロード 2009/03/24現在、ExplorerCanvasの最新版は Release 3 です。excanvas_r3.zip をダウンロードし解凍すると、excanvas.jsというファイルがあります。実際に使うのは、このファイルのみです。このファイルを、Canvasを使うHTMLファイルと同じ場所に設置しておいてください。 HTMLの準備 Canvasを使うHTMLでは、excanvas.jsをロードするようscri

  • lineWidth = 線の幅-Canvasリファレンス

    lineWidth属性は、線の幅を指定する際に使用します。 指定できるのは0より大きい有限の数値のみで、それ以外の値を指定しても無視されます。 座標空間の単位が適用されるため、特に単位を付ける必要はありません。 lineWidth属性を指定しない場合の初期値は1.0です。 ■引数(値)の説明 HTML + JavaScriptソース<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript"> <!-- function test() { //描画コンテキストの取得 var canvas = document.getElementById('sample'); if (canvas.getContext) { var contex

  • Canvasの使い方-Canvasリファレンス

    ■Canvasによる描画指定の一般的な手順 Canvasでは、HTMLJavaScriptを組み合わせて描画内容を指定します。 Canvasによる描画は、大まかに以下のような流れとなります。 HTMLで、<canvas>要素の幅と高さ、および、id名を指定する getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする canvasAPIの仕様で定められたメソッドやプロパティを使用して、具体的な描画内容を指定する ■HTMLで、<canvas>要素の幅と高さ、および、id名を指定する HTMLソース <canvas id="sample" width="400" height="300"> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> HTMLの側では、<canvas>要素で、描画領域の幅と

  • 色を指定する - Canvas - HTML5.JP

    ctx.strokeStyle = color 図形の枠線の色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。 ctx.fillStyle = color 図形を塗りつぶす色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。 それぞれのメソッドの具体的な使い方を見てみましょう。 onload = function() { draw(); }; function draw() { var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); /* 円 #1 */ ctx.beginPath(); ctx.fillSt