サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
www.tagindex.com
各属性の概要は、上記表のリンク先をご覧ください。(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名によって、入力候
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属性の詳細については、下記のページを参考にしてください。 フォームの送信先を指定する フォームの送信方法を指定する 送信時のデータ形式を指定する 送信結果の表示方
各部品タイプの詳細は、上記表のリンク先をご覧ください。 年月日・週・時間や数値・色に関連する部品は、ブラウザにより表示内容が異なります。 name属性について 有効な部品タイプ 全て name属性は、フォーム部品を識別するための名前を指定します。 この属性の値は、入力されたデータ(またはvalue属性の値)とセットで送信されることになります。 <input type="text" name="name" value="Taro"> 上記の場合は、name=Taro といった感じで送信されます。 value属性について 有効な部品タイプ 全て(ただし、file と image ではvalue属性を省略しなければならない) value属性は、送信される値を指定します。 この属性の値は、name属性の値とセットで送信されることになります。ただし、部品の種類により次のような違いがあります。 入力欄
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/"
各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています) どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。 属性と部品タイプの対応表 この部品タイプの特徴 メールアドレスを入力するための入力欄です。 (実際の表示例) この部品タイプに対応しているブラウザでは、メールアドレスとして正しくない値を送信しようとすると、エラーメッセージが表示される場合があります。(ただし、それほど厳密にチェックしているわけではないようです) Chrome、Edge、Firefoxの場合 文字 + @ + 文字で送信可能になるようです。この形式に合わない場合はエラーメッセージが表示されます。 pattern属性の指定例 この部品タイプにおけるpattern属性の指定例です。 メールアドレス:<input type="email" name="mai
ジャンル別にさがせる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>郎<
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
相対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> <!-- お知らせ終了 --> また、特定の要素を非表示にしておきたい場合にも使用できます。 <!-- 一時的に
次のページ
このページを最初にブックマークしてみませんか?
『【HTMLタグの簡単検索】TAG index - ホームページ作成情報』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く