サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
www.tagindex.com
srcset属性における既定の記述子は 1x となります。 画像表示を最適化するレスポンシブイメージは、img要素またはpicture要素で設定することができます。それぞれの特徴は次のようになります。 img要素による設定 同じ内容の画像で、サイズ違いをセットしたい場合に使用します。条件の設定は可能ですが、実際にどの画像が使用されるかはブラウザ側に任されています。img要素だけで設定できるので、比較的シンプルに(?)記述することができます。 picture要素による設定 サイズ違いだけでなく、内容の異なる画像をセットしたい場合に使用します(例えば、スマホ向けにはクロップされた画像を表示させたい場合など)。picture要素による設定では、指定した条件下で強制的に画像を切り替えることができます。 上記の2つを組み合わせることで、より詳細に設定することも可能です。 srcset属性とsizes
各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています) どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。 属性と部品タイプの対応表 この部品タイプの特徴 ローカル日時を入力するための入力欄です。 (実際の表示例) この部品タイプに対応しているブラウザでは、日付はカレンダーで、時間は上下のスライドによって入力することができます。 value属性(初期値)を指定しない場合は次のように表示されます。(ブラウザにより表示内容は異なります) (実際の表示例) 日時の書式 入力する日時、およびvalue属性、min属性、max属性の値は、次の書式で記述する必要があります。 YYYY-MM-DDThh:mm:ss 2022-05-21T20:40:30 年は4桁、月・日と時・分・秒は各2桁で入力します。(時間は24時間表記) 年月日と
datalist要素は、入力欄(input要素)に対する入力候補のリストを表します。入力候補の選択肢は、この要素内に配置するoption要素で示すことになります。 <datalist id="example"> <option value="選択肢1"></option> <option value="選択肢2"></option> <option value="選択肢3"></option> </datalist> 入力候補の設定方法 入力候補のリストは、他の入力欄に組み込む形で使用することになります。 具体的な設定方法は次のようになります。 datalist要素で入力候補のリストを作成します。 そのdatalist要素にID名を指定します。 対象となる入力欄(input要素)にlist属性を指定して、その値にdatalist要素に指定したID名を記述します。 このID名によって、入力候
thead要素は、表のヘッダ部分となる行のグループを表します。この要素は、table要素の子要素として使用します。 <thead></thead> thead要素、tbody要素、tfoot要素は、表の行を意味的なまとまりとしてグループ化します。このうちthead要素は、表のヘッダ部分を表すことになります。 thead要素は、1つの表の中に1つだけ配置することができます。 次の例では、1つの行をヘッダ部分としてグループ化しています。 <thead> <tr> <th>ヘッダ</th> <th>ヘッダ</th> <th>ヘッダ</th> </tr> </thead> 次のように、複数の行をグループ化することもできます。(1行目を見出しとし、2行目に説明を入れています) <thead> <tr> <th>Aタイプ</th> <th>Bタイプ</th> <th>Cタイプ</th> </tr> <
method="dialog" は、form要素がdialog要素の中に置かれている場合に指定することができます。 enctypec属性は、method="post" の場合に指定することができます。 HTML Living Standardの仕様に準拠する場合は、accept-charset属性の値には UTF-8 しか指定できません。(大文字と小文字は区別されません) form要素におけるrel属性の値は、実質的には noreferrer、noopener、opener の3つが効果をもたらすようです。 action属性、method属性、enctype属性、target属性、autocomplete属性、novalidate属性の詳細については、下記のページを参考にしてください。 フォームの送信先を指定する フォームの送信方法を指定する 送信時のデータ形式を指定する 送信結果の表示方
この要素に定義されていたautofocus属性は、グローバル属性として再定義されました。 name属性について name属性は、フォーム部品を識別するための名前を指定します。 この属性の値は、選択されたoption要素の値とセットで送信されます。 <select name="pref"> <option value="Tokyo">東京</option> <option value="Osaka">大阪</option> <option value="Fukuoka">福岡</option> </select> 例えば、上記のメニューで東京が選択された場合は、pref=Tokyo といった感じで送信されることになります。 size属性について size属性は、表示される選択肢の数を指定します。 この属性の既定値は、multiple属性が指定されている場合は 4、指定されていない場合は 1
インラインフレームを使用している場合の例 form要素のtarget属性は、次のようなケースで使用することがあります。 親文書にフォームを配置して、送信結果をインラインフレーム内に表示する場合 指定方法:インラインフレームにフレーム名を付けておき、form要素の target="" にそのフレーム名を指定します。 インラインフレーム内にフォームを配置して、送信結果をウィンドウ全体に表示する場合 指定方法:form要素に target="_top" を指定します。
各部品タイプの詳細は、上記表のリンク先をご覧ください。 年月日・週・時間や数値・色に関連する部品は、ブラウザにより表示内容が異なります。 name属性について 有効な部品タイプ 全て name属性は、フォーム部品を識別するための名前を指定します。 この属性の値は、入力されたデータ(またはvalue属性の値)とセットで送信されることになります。 <input type="text" name="name" value="Taro"> 上記の場合は、name=Taro といった感じで送信されます。 value属性について 有効な部品タイプ 全て(ただし、file と image ではvalue属性を省略しなければならない) value属性は、送信される値を指定します。 この属性の値は、name属性の値とセットで送信されることになります。ただし、部品の種類により次のような違いがあります。 入力欄
リンク先(到達点)の設定 まず、リンクの到達点となる任意の要素に、ID(識別名)を付けておきます。 次の例では、h2要素に abc というID名を指定しています。 <h2 id="abc">ここがABCの位置</h2> リンク元(出発点)の設定 リンク元の href="" には、到達点のID名をハッシュ( # )に続けて記述します。 同じ文書内にリンクする場合は次のように指定します。 <a href="#abc">ABCの位置へジャンプ</a> 別文書の特定部分へリンクする場合は、ファイル名の後にハッシュ( # )を入れ、続いて到達点のID名を記述します。 <a href="example.html#abc">ABCの位置へジャンプ</a> 使用例 同じ文書内にリンクした例 <article> <header> <h2>記事のタイトル</h2> <nav id="menu_test"> <
HTML Living Standardの仕様に準拠する場合は、UTF-8 でHTML文書を作成する必要があります。 エンコーディング名(UTF-8 等)は、大文字と小文字は区別されません。 この文字エンコーディングの指定は、文書で使用している実際の文字コードに合わせる必要があります。 例えば、UTF-8で保存された文書の場合は、content="text/html; charset=UTF-8" を指定することになります。(異なるエンコーディング名を指定すると、その文書が文字化けしてしまう場合があります) 文字エンコーディングの指定例 content属性の値には、text/html、セミコロン( ; )、charset=、エンコーディング名、を記述します。 UTF-8を指定する場合 <meta http-equiv="content-type" content="text/html; c
各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています) どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。 属性と部品タイプの対応表 この部品タイプの特徴 テキストを入力するための入力欄です。 (実際の表示例) input要素では、この部品タイプがデフォルトになります。 入力内容が電話番号、URL、メールアドレスなどの場合は、それぞれ専用の部品タイプが用意されているのでそちらを使用することをおすすめします。 電話番号の入力欄を表す URLの入力欄を表す メールアドレスの入力欄を表す pattern属性の指定例 この部品タイプにおけるpattern属性の指定例です。 次の例では、郵便番号の入力パターンを指定しています。 郵便番号:<input type="text" name="post" pattern="\d{3}-\d
content属性の値には、秒数、セミコロン( ; )、URL=、リダイレクト先のURL、を記述します。具体的な書式は次のようになります。 URL=の記述は、大文字と小文字は区別されません。 content="秒数; URL=リダイレクト先のURL" 例えば、次のように指定すると、そのページを開いてから60秒後に https://www.example.com/ へリダイレクトすることになります。 content="60; URL=https://www.example.com/"
form属性は、object要素とform要素とを関連付ける際に使用します。 name属性の詳細については、下記のページを参考にしてください。 埋め込む領域に名前を付ける コンテンツの埋め込み方法 コンテンツのURLを、data属性で指定します。例えば次のように記述した場合は、example.mpg がその場所に埋め込まれることになります。 <p><object data="example.mpg" type="video/mpeg"></object></p> パラメータの指定について パラメータを指定する場合は、object要素内の最初の部分(代替コンテンツよりも前)にparam要素を配置します。 <object data="example.swf" type="application/x-shockwave-flash" width="300" height="150"> <para
各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています) どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。 属性と部品タイプの対応表 この部品タイプの特徴 メールアドレスを入力するための入力欄です。 (実際の表示例) この部品タイプに対応しているブラウザでは、メールアドレスとして正しくない値を送信しようとすると、エラーメッセージが表示される場合があります。(ただし、それほど厳密にチェックしているわけではないようです) Chrome、Edge、Firefoxの場合 文字 + @ + 文字で送信可能になるようです。この形式に合わない場合はエラーメッセージが表示されます。 pattern属性の指定例 この部品タイプにおけるpattern属性の指定例です。 メールアドレス:<input type="email" name="mai
グローバル属性のitemprop属性を指定する場合は、src属性も指定しなければなりません。 autoplay属性の指定は、preload属性の指定よりも優先されます。 crossorigin属性の値を省略した場合は anonymous になります。属性そのものを省略した場合はCORSリクエストを行いません。 動画ファイルの指定方法 動画ファイルは、video要素のsrc属性で指定することができます。 <video src="example.mp4"></video> 複数の再生候補(形式の異なる動画データ)を用意する場合は、video要素内にsource要素を配置して、そのsrc属性で動画ファイルを指定します。 <video> <source src="example.mp4"> <source src="example.webm"> <source src="example.ogv">
HTML5では、以下の要素が廃止されました。 HTML 4.01のページにリンクしています。 下記の一覧には、独自拡張要素も掲載されています。
fixedを指定する際の注意点 ボックスに対する固定表示ではなく、ウィンドウに対する固定表示であるという点に注意してください。(ただし、IE 6以下ではボックスに対する固定表示になってしまうようです) また、fixed を指定している場合は、背景画像の表示位置がウィンドウを基準とした位置になるので注意が必要です。例えば、垂直に並ぶ画像を右側に配置した場合、それはボックス内の右側に配置されるのではなく、ウィンドウ内の右側に配置されることになります。(状況によっては、ボックス内に背景画像が表示されなくなってしまいます)
ジャンル別にさがせるHTML5リファレンス HTMLタグ HTML5 スタイルシート テンプレート JavaScript Webツール カラーチャート Home HTML5 ページ全般 スクリプトの実行方法を指定する スクリプトの実行方法を指定する <script src="" async defer></script> 分類 メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ 利用場所 メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 内容 空 / スクリプトの説明(コメント) script要素に async や defer を追加すると、スクリプトの実行方法を指定することができます。この2つの属性は、外部スクリプトを読み込む際に使用することができます。 async属性はHTML5で追加された属性です。 <script src="ex
ruby要素は、ルビ(ふりがな)を振るテキストの範囲を表します。 <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby> <ruby>今日<rt>きょう</rt></ruby> <ruby> <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby> <rt>Kanji</rt> </ruby> ruby要素は、テキストにルビを振りたい場合に使用します。この要素内にベーステキストを配置して、rt要素でルビテキストを記述します。必要に応じてrp要素も使用することができます。 ruby要素 … ルビを振るテキストの範囲 ベーステキスト … ルビの対象となるテキスト rt要素 … ルビテキスト(ふりがなの文字列) rp要素 … 未対応ブラウザで表示される記号(括弧など) 次の例では、太郎にルビを振っています。 <p>私の名前は<ruby>太<rt>た</rt>郎<
href属性の値には、tel: に続けて発信先の電話番号を指定します。(ハイフンは含めません) 次の例では、発信先として 0312345678 を指定しています。 href="tel:0312345678" 使用例 0312345678 という電話番号に発信する場合 <address> 連絡先:<a href="tel:0312345678">03-1234-5678</a> </address> 表示例 連絡先:03-1234-5678 上記の電話番号はダミーです。タップしないようお願いいたします。 PC向けのブラウザからは発信できません。
href属性を指定しない場合は、その他の任意属性(hreflang属性、type属性、rel属性、target属性、download属性、ping属性、referrerpolicy属性)も指定できません。 a要素にitemprop属性(グローバル属性)が指定されている場合は、href属性も指定する必要があります。 各属性の詳細については、下記のページを参考にしてください。 リンク先の表示方法を指定する ダウンロード用のリンクを指定する リンク先にアクセスする際のリファラーポリシーを指定する リンクのクリック時にpingを送信する リンクの設定方法 リンクを設定したい場合は、リンク先のURLをhref属性で指定します。 <p><a href="example.html">リンクテキスト</a></p> a要素の内容について HTML5以降、a要素の内容に(従来で言う)ブロックレベル要素も配置
type属性は、以下の要素に指定することができます。(MIMEタイプが指定可能なtype属性のみ) <a> <embed> <link> <object> <script> <source> また、accept属性は以下の要素に指定できます。 <input>(type="file"の場合)
IE8以下は、HTML5の新要素には対応していません。(そのため、スタイルが適用されなくなってしまいます) IE8以下にも対応させたい場合は、次のJavaScriptを使って新要素を認識させる必要があります。(新要素の部分には、認識させたい要素名を記述します) document.createElement('新要素'); よく分からない(または自分で設定するのが面倒な)場合は、Google Codeで公開されているhtml5shiv(html5.js)を読み込ませることで、HTML5の新要素を認識させることが可能になります。 このスクリプトを読み込ませる場合は、head要素内に以下の内容を記述しておきます。(if lt IE 9という部分は、IE9未満にのみ読み込ませるという指定です) <!--[if lt IE 9]> <script src="http://html5shiv.goog
sandbox属性の値(キーワード)は、大文字と小文字は区別されません。また、半角スペースで区切って複数のキーワードを指定することができます。 allow-top-navigation と allow-top-navigation-by-user-activation は内容が重複するため、同時に指定することはできません。(同時に指定した場合は allow-top-navigation のみが適用されます) allow-top-navigation または allow-popups を指定している場合は、allow-top-navigation-to-custom-protocols を指定することはできません。(内容が重複するため:allow-top-navigation または allow-popups を指定した場合もカスタムプロトコルを開けるようになるため) 値を持たないsandb
相対URLの基準URLやリンクの表示方法を指定する <base href=""> href="URL" target="_blank | _self | _parent | _top | ブラウジング・コンテキスト名" 文書を別のリソースと関連付ける <link rel="" href=""> rel="リンクタイプ" href="URL" hreflang="言語コード" type="MIMEタイプ" media="メディアクエリ" sizes="any | 横幅x高さ" crossorigin="anonymous | use-credentials | 空" integrity="文字列" referrerpolicy="no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin |
iPhoneのSafariには、文書内の電話番号を検出して自動的にリンクする機能が備わっています。(電話番号以外の番号もリンクされてしまう場合があります) この自動リンク機能を無効にしたい場合は、name属性の値に format-detection、content属性の値に telephone=no を指定しておきます。 <meta name="format-detection" content="telephone=no"> 電話番号にリンクを設定したい場合は、a要素の tel: (スマートフォン向け)を使用した方が確実です。(Androidでもリンクされるようになります) その他の自動リンクも無効にする Androidでは、メールアドレスや住所が自動的にリンクされてしまう場合があるそうです(自分の端末では確認できず)。これらも含めて自動リンク機能を無効にしたい場合は、次のように指定して
tabindex属性は、Tabキーによるフォーカスの移動順序、および要素がフォーカス可能かどうかを指定します。 <a href="index.html" tabindex="1">リンクテキスト</a>
コメント宣言(<!-- -->)を使用すると、文書内にコメントを挿入することができます。 <!-- これはコメントです --> <!-- これは 複数行にまたがる コメントです。 --> <!-- と --> で囲まれた部分は、ブラウザ上には表示されません。 例えば、作者用の覚え書きや、ソースコード内の目印として使用すると便利です。 <!-- お知らせ開始 --> <h3>お知らせ</h3> <dl> <dt>2008年12月20日</dt><dd>商品の一覧を更新しました。</dd> <dt>2008年12月15日</dt><dd>トピックスのページを更新しました。</dd> <dt>2008年12月10日</dt><dd>スタッフの募集を開始しました。</dd> </dl> <!-- お知らせ終了 --> また、特定の要素を非表示にしておきたい場合にも使用できます。 <!-- 一時的に
colgroup要素は、表の列をグループ化します。この要素は、table要素の子要素として使用します。 <colgroup span="3"></colgroup> <colgroup> <col span="1"> <col span="2"> </colgroup> span属性は、colgroup要素内にcol要素がない場合にのみ、指定することができます。 colgroup要素を使用すると、1つ以上の列を意味的なまとまりとしてグループ化することができます。 次の例では、5列の表を3つのグループ(1列:2列:2列)に分けています。 <colgroup span="1"></colgroup> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> グループ化の指定を行なうと、グループ単位でスタイルを設定できるようになり
次のページ
このページを最初にブックマークしてみませんか?
『【HTMLタグの簡単検索】TAG index - ホームページ作成情報』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く