サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
www.tagindex.com
各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています) どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。 属性と部品タイプの対応表 この部品タイプの特徴 大まかな数値を入力するための入力欄です。 (実際の表示例) この部品タイプに対応しているブラウザでは、スライダーバーを使って数値を入力することができます。 数値の書式 入力する数値、およびvalue属性、min属性、max属性の値は、次の書式で記述する必要があります。 浮動小数点数 7、-7、0.7、0.7E-2 負数の数値も入力することができます。(マイナス( - )を付けます) 小数点以下の数値も入力することができます。(ピリオド( . )に続けて記述します) 指数表記も使えます。(E または e を付けます) <input type="range" name="e
同時にid属性を指定する場合は、name属性とid属性の値は同一である必要があります。 イメージマップを使用することで、1つの画像内に複数のリンク領域を設定できるようになります。 次の例では、四角、丸、三角の図形と、それ以外の領域の部分にリンクが設定されています。 古いブラウザでは、それ以外の領域に設定されたリンクが機能しない場合があります。 イメージマップ作成の流れ イメージマップは、画像を埋め込むimg要素、マップを定義するmap要素、リンク領域を設定するarea要素、この3種類の要素で構成されています。 まず、イメージマップに使用する画像を用意して、それをimg要素で埋め込みます。 <img src="menu.gif" alt="メニュー"> map要素に name="" を追加して、任意のマップ名を指定します。次の例では map という名前を指定しています。(他のマップ名と重複し
Webクリップとは、Webサイトへのショートカットをホーム画面上に追加できる機能のことです。(iPhoneやiPadだけでなく、Android搭載の端末でも機能します) iPhoneの場合は、ブックマーク追加のメニューで を選択するとショートカットアイコンを作成できます。 Androidの場合は、登録したブックマークを長押し → の操作でショートカットアイコンを作成できます。 機種により操作方法が異なる場合があります。 ショートカットをホーム画面に追加すると、通常はそのページのキャプチャ(またはファビコン)がアイコンとして使用されますが、Webクリップ用のアイコン画像を用意しておくことで、その画像がショートカットアイコン(タッチアイコン)として使用されるようになります。 アイコンの設定方法 iPhoneの場合は、ルートディレクトリにアイコン画像をアップロードするだけで、オリジナルのタッチア
HTML・CSSサンプルコード集 HTML&CSS Web制作リファレンス - ホームページの構築・運用 - HTML5 HTMLタグ CSS カラーチャート Web便利ツール テンプレート JavaScript
各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています) どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。 属性と部品タイプの対応表 この部品タイプの特徴 数値を入力するための入力欄です。 (実際の表示例) この部品タイプに対応しているブラウザでは、スピナー(上下ボタン)を使って数値を入力することができます。 このタイプの入力欄は、数量等の入力を想定したものになります。カード番号等の入力には type="text" を使うのが適切です。 数値の書式 入力する数値、およびvalue属性、min属性、max属性の値は、次の書式で記述する必要があります。 浮動小数点数 7、-7、0.7、0.7E-2 負数の数値も入力することができます。(マイナス( - )を付けます) 小数点以下の数値も入力することができます。(ピリオド( .
autoplay属性の指定は、preload属性の指定よりも優先されます。 crossorigin属性の値を省略した場合は anonymous になります。属性そのものを省略した場合はCORSリクエストを行いません。 オーディオファイルの指定方法 オーディオファイルは、audio要素のsrc属性で指定することができます。 <audio src="example.mp3"></audio> 複数の再生候補(形式の異なるオーディオデータ)を用意する場合は、audio要素内にsource要素を配置して、そのsrc属性でオーディオファイルを指定します。 <audio> <source src="example.mp3"> <source src="example.aac"> <source src="example.oga"> </audio> 上記の例では、3タイプのオーディオファイルを指定して
★この属性は廃止されました★ 参考情報としてこのページはしばらく残しておきます。 この属性はHTML5.2までは定義されていましたが、現行のHTMLでは廃止されました。 table要素に border="1" を追加すると、その表がレイアウト目的でないことを示すことができます。 この属性を指定すると、一般的なブラウザでは表に境界線が表示されます。 <table border="1"> <tr> <th>見出しセル</th> </tr> <tr> <td>データセル</td> </tr> </table>
各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています) どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。 属性と部品タイプの対応表 この部品タイプの特徴 日付(年月日)を入力するための入力欄です。 (実際の表示例) この部品タイプに対応しているブラウザでは、カレンダーを使って日付を入力することができます。 value属性(初期値)を指定しない場合は次のように表示されます。(ブラウザにより表示内容は異なります) (実際の表示例) 日付の書式 入力する日付、およびvalue属性、min属性、max属性の値は、次の書式で記述する必要があります。 YYYY-MM-DD 2022-05-20 年は4桁、月・日は各2桁で入力します。 <input type="date" name="example" value="2022-05-2
このタイプの入力欄では、value属性は省略しなければなりません。 各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています) どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。 属性と部品タイプの対応表 この部品タイプの特徴 ファイルをアップロードするための入力欄です。 (実際の表示例) このタイプの入力欄では、ファイルを選択するための参照ボタンが表示されます。(ボタン上のテキストはブラウザにより異なります) 参照ボタンをクリックすると、ファイルを選択するためのダイアログが表示されます。選択を完了してダイアログを閉じると、ファイル名が参照ボタンの横に表示されます。 ファイルを送信するフォームでは、form要素に method="post" と enctype="multipart/form-data" を指定しておく必要があ
フォーカスの移動順序は、小さい数字(1以上)から大きい数字に向かいます。 値に 0 が指定されている要素は、tabindex属性が指定されていない場合と同じ扱いになります。(出現する順序でフォーカスが移動します) 例えば、4つの要素に 0 ~ 3 の値を指定した場合は、次の順序でフォーカスが移動することになります。 1 → 2 → 3 → (これ以降は出現順序) → 0 値の指定について この属性の値は、連番である必要はありません。また、任意の数字で開始することができます。 3 → 5 → 6 → 9 複数の要素に同じ数字が指定されている場合は、それらは出現順序でフォーカスが移動することになります。 1 → 2 → 2 → 3 指定できる要素 この属性は、以下の要素で使用することができます。 a要素 area要素 button要素 input要素 object要素 select要素 tex
width の既定値は、ブラウザにより異なる場合があるようです。 複数のプロパティを指定する場合は、カンマ( , )で区切って記述します。 content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2" widthプロパティについて width は、ビューポートの幅を設定します。値にはピクセル数、または device-width (端末画面の幅に合わせる)を指定します。 <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> device-width を指定するのが一般的です。 device-width を指定した場合は、初期のズーム倍率が 1 になります。(
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> ul.example li { display: inline; margin-right: 10px; } </style> </head> <body> <ul class="example"> <li>項目A</li> <li>項目B</li> <li>項目C</li> </ul> </body> </html> 表示例 項目A 項目B 項目C
ページ全般 宣言、ルート要素、タイトル、文書のメタデータ、スタイルシート、アイコン ... セクション 文書の本体、セクショニング、ナビゲーション、見出し、ヘッダ、フッタ ... グループ化 段落、引用セクション、順序付きリスト、順不同のリスト、整形済み、図版 ... テキスト リンク、改行、強調、引用文、用語、日時、ソースコード、ルビ、訂正 ... 埋め込み 画像、インラインフレーム、動画、オーディオ、イメージマップ ... テーブル 表の作成、表のキャプション、列と行のグループ化、見出しセル ... フォーム 入力フォーム、送信方法、各種入力欄、送信ボタン、部品のグループ化、 ... アクション インタラクティブ、スクリプティング、キャンバス、ダイアログ ... グローバル属性 クラス名、ID、補足情報、言語情報、アクセスキー、スタイル ...
タイプ別に分類された色見本。HTMLカラーコードとカラーネームの一覧。
この要素がform要素内に配置されている場合は、name属性の有効範囲はそのform要素内に限られます。 name属性の値は、入力されたデータ(またはvalue属性の値)とセットで送信されることになります。 type属性の値がtextまたはpasswordの場合は、value属性の値が入力欄に表示されます。 type属性の値がsubmit reset buttonの場合は、value属性の値がボタン上に表示されます。 type属性の値がradioまたはcheckboxの場合は、value属性が必須となります。 type属性の値がtextまたはpasswordの場合は、size属性の値を文字数で指定します。(それ以外の部品に対してはピクセル数で指定しますが、実際にはその指定の効果はないようです) maxlength属性の指定は、type属性の値がtextまたはpasswordの場合に有効とな
<html> <head> <title>TAG index Webサイト</title> </head> <body> <script type="text/javascript"> <!-- // 設定開始(メッセージの内容を設定してください) var msg1 = '<b>5:00 ~ 8:59</b> … おはようございます!'; // 時間帯1 var msg2 = '<b>9:00 ~ 11:59</b> … 午前中はやる気出ないです。。'; // 時間帯2 var msg3 = '<b>12:00 ~ 13:59</b> … お昼はもう食べた?'; // 時間帯3 var msg4 = '<b>14:00 ~ 17:59</b> … とりあえず午後も頑張りますか'; // 時間帯4 var msg5 = '<b>18:00 ~ 23:59</b> … 風呂入ったかー?'; /
ページを表示してからの経過時間を表示するスクリプトです。(時・分・秒を別々のテキストフィールドに表示するタイプ) <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- var start = new Date(); // 初期化 var hour = 0; var min = 0; var sec = 0; var now = 0; var datet = 0; function disp(){ now = new Date(); datet = parseInt((now.getTime() - start.getTime()) / 1000); hour = parseInt(datet / 3600); min = parseInt((datet / 60) % 60);
リスト内のマークについて B … 全体の背景色 H … ヘッダの背景色 M … メニューバーの背景色 L … 左サイドバーの背景色 C … 中央カラムの背景色 R … 右サイドバーの背景色 F … フッタの背景色 A … アクセント色 シンプルな配色 クセの少ない、シンプルですっきりとした配色パターン。 B H M L C R F A 配色パターン081 B H M L C R F A 配色パターン076 B H M L C R F A 配色パターン061 B H M L C R F A 配色パターン057 B H M L C R F A 配色パターン054 B H M L C R F A 配色パターン053 B H M L C R F A 配色パターン049 B H M L C R F A 配色パターン038 B H M L C R F A 配色パターン036 B H M L C R F
値には auto(自動)を指定することもできます。 マーカーを背景画像で表示している場合は、margin-bottom ではなく padding-bottom で指定した方がいいかもしれません。(マーカーが欠けてしまうのを避けるため) 使用例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> ul.example li { margin-bottom: 10px; } </style> </head> <body> <ul> <li>リスト項目A</li> <li>リスト項目B</li> <li>リスト項目C</li
ジャンル別にさがせるHTMLタグリスト HTML&CSS Web制作リファレンス - ホームページの構築・運用 - HTMLタグ スタイルシート テンプレート JavaScript Webツール カラーチャート Home HTMLタグ 疑似HTML5 疑似HTML5について 疑似HTML5について 疑似HTML5とは? まずはじめに、「疑似HTML5」という名のHTMLは正式には存在しません。 ※TAG indexが勝手にそう呼んでいるだけですので… (ご注意ください) ここでは、「HTML5的なマークアップをHTML 4.01にて行うこと」を指してそう呼んでいます。 下記のように、HTML5で追加された要素の代わりに、div要素やspan要素を使って疑似的にHTML5のマークアップを行っています。 HTML5 article要素のマークアップ例 <article> <h1>記事の見出し<
HTML&CSS Web制作リファレンス - ホームページの構築・運用 -
要素の多くは、ブロックレベル要素とインライン要素に分類されます。 ブロックレベル要素 文書の骨組みとなる要素です(例えば見出しや段落など)。このタイプの要素は、body要素の直接の子要素として配置することができます。 インライン要素 文章中の一部として扱われる要素です(例えばリンクや文字の強調など)。このタイプの要素は、通常はブロックレベル要素内で使用します。 また、インライン要素の中には置換要素というタイプの要素が存在します。 置換要素 テキスト以外のものに置き換えられる要素です(例えば画像や入力欄など)。一般的なインライン要素とは異なり、このタイプの要素は横幅と高さを持ちます。(置換要素以外のインライン要素は、非置換インライン要素といいます)
このフレーム名は、リンクにtarget属性を指定する場合や、formの送信でtarget属性を指定する場合などに使用されます。 フレーム名について フレーム名を付ける際には、以下の点に注意してください。 フレーム名は、アルファベットで始めなければなりません。(数字や記号で始めてはならない) 上記以外にも、以下のid属性の規則に従って指定しておくことをお勧めします。 使用できる文字は、半角の英数字、ハイフン( - )、アンダーバー( _ )、コロン( : )、ピリオド( . )、です。(ハイフン以外の記号は使わない方が無難です) XHTMLでは、フレーム名はid属性で指定することになります(name属性との併用も可能)。
初期値は auto(切り抜かない)です。 値の指定方法 rect( ) … ( ) 内に、上、右、下、左の順で4つの値を指定します。それぞれの値は半角スペースで区切って記述します。 CSS 2.1の仕様に従う場合は、半角スペースではなくカンマ( , )で区切る必要があります。(ただし、カンマ区切りはIEでは対応していません) 領域の指定方法 表示される領域を、画像(実際の領域)の上端と左端からの距離で指定します。 rect(上辺の距離 右辺の距離 下辺の距離 左辺の距離) 上辺の距離 … 画像の上端から上辺までの距離を指定 右辺の距離 … 画像の左端から右辺までの距離を指定 下辺の距離 … 画像の上端から下辺までの距離を指定 左辺の距離 … 画像の左端から左辺までの距離を指定 例えば次のように指定されている場合は、表示される領域の大きさは 400px×250px になります。 rect(5
色の調整幅について 色合い、鮮やかさ、明るさの各調整幅を 0~240 とした場合、それぞれ次のような内容でグラデーションを作成しています。 グレー 明るさ … 0(黒)~240(白) の範囲を27分割しています。0~220 までは10単位で、225~240 までは5単位で明るくしています。 その他の色 色合い … 20単位で12分割(赤色~赤紫・桃色)しています。 鮮やかさ … 80、160、240 で3分割しています。上記の表では、左列が 80、中列が 160、右列が 240 の鮮やかさになります。 明るさ … 40~235 の範囲で12分割しています。40~220までは20単位で明るくし、その後に 230、235 と続きます。
次のページ
このページを最初にブックマークしてみませんか?
『【HTMLタグの簡単検索】TAG index - ホームページ作成情報』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く