はてなブックマーク

各属性の概要は、上記表のリンク先をご覧ください。（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> <

この要素に定義されていた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

グローバル属性の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">

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>

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> グループ化の指定を行なうと、グループ単位でスタイルを設定できるようになり