2012-07-01から1ヶ月間の記事一覧
週用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 週:<input type="week" id="week" min="2012-W2" max="2012-W20" step="2" /> <input type="submit" value="送信" /> </p> </form> </body> レ…</html>
年月用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 年月:<input type="month" id="month" min="2011-04" max="2013-04" step="12" /> <input type="submit" value="送信" /> </p> </form> </body></html>
日付用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 日付:<input type="date" id="date" min="2012-07-05" max="2012-07-25" step="7" /> <input type="submit" value="送信" /> </p> </form> </body></html>
タイムゾーンがUTCの日時用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 日時:<input type="datetime" id="datetime" step="1800" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング…</html>
メールアドレス用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> Mail:<input type="email" id="email" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング メールアドレス以外を送信しようとすると、検…</html>
URL用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> url:<input type="url" id="url" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング 絶対URL以外を送信しようとすると、検証エラーになります。 …</html>
電話番号用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 電話番号:<input type="tel" id="tel" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング レンダリングも機能上もtextタイプのinput要素と変…</html>
検索用のテキスト入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 検索:<input type="search" id="word" /> <input type="submit" value="検索" /> </p> </form> </body> レンダリング Safariの例です。入力するとクリアボタンが表…</html>
video要素やaudio要素で再生するメディアファイルを表します。source要素を使うことで複数のメディアファイルを指定できます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5 Audio></title> <meta charset="UTF-8"> </head> <body> <p>HTML5 Audio</p> <audio controls="controls"> </audio></body></html>
オーディオを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5 Audio></title> <meta charset="UTF-8"> </head> <body> <p>HTML5 Audio</p> <audio src="http://gitarrenmanufaktur.com/images/blogkonzert/asturias.mp3" controls="controls" autoplay="autoplay" loop="loop" muted="muted"> <p>ご使用のブラウ…</p></audio></body></html>
動画を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5 Video></title> <meta charset="UTF-8"> </head> <body> <p>HTML5 Video</p> </body></html>
wbr要素は、折り返し表示可能なテキストを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <p>1_1234567890_2_1234567890_3_1234567890_4_1234567890_<wbr>5_1234567890</wbr>_6_1234567890_7_1234567890</p> </body> レンダリング wbr要素なし wbr要素あり 関連エントリー HTML5エントリーの</html>…
rp要素は、rupy要素非対応のブラウザ用に表示する括弧を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <p> 私は <ruby> 山田<rp>(</rp><rt>やまだ</rt><rp>)</rp> 太郎<rp>(</rp><rt>たろう</rt><rp>)</rp> </ruby> です。 </p> </body> レンダリング Firefox Chrome 関連エントリー 2012-07-18 - プロ…</html>
ruby要素はルビを伴うテキストを表します。 rt要素はルビを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <p> 私は <ruby> 山田<rt>やまだ</rt> 太郎<rt>たろう</rt> </ruby> です。 </p> </body> レンダリング 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
u要素は、はっきりと伝わりにくいテキストの範囲を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>HTML5について</h1> <p>WikipediaのHTML5のページからの引用に間違いがありました。</p> <p>誤:<q>HTML5 は WHATWG によって<u>2003</u>年に定められた Web Applications 1.0 に Web Forms 2.0</q></p></body></html>…
i要素は、質の異なるテキストを表します。 HTML4では、イタリック体を表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>HTML5について</h1> <p> WikipediaのHTML5のページより引用する。<q><i>HTML5</i> （エイチティーエムエル・ファイブ）とは HTML の 5 回目に当たる大幅な改定</q></p></body></html>…
b要素は、他と区別するテキストを表します。 HTML4では、太字を表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>HTML5について</h1> <p> WikipediaのHTML5のページより引用する。<q><b>HTML5</b> （エイチティーエムエル・ファイブ）とは HTML の 5 回目に当たる大幅な改定版であ</q></p></body></html>…
mark要素はハイライトされるテキストを表します。mark要素でマークアップされたテキストは、他の箇所から参照されることが想定されます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> <style> th, td { border: 1px Black solid; } </style> </head> <body> <table> <thead> <tr> <th>MHK</th> <th>富士テレビ</th> </tr> </thead> </table></body></html>
cite要素は、引用元のタイトルや作品名を表します。 q要素は、引用文を表します。cite属性は、引用元の参照ページを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>HTML5について</h1> <p> Wikipediaの<cite>HTML5</cite>のページより引用する。 <q cite="http://ja.wikipedia.org/wiki/HTML5">HTML5 （エイチティーエムエ…</q></p></body></html>
s要素は既に正確ではなくなった、既に関係なくなったとことを表します。HTML4では取り消し線を引くために用いられていました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> <footer> <address>このサイトの連絡先: new@example.jp<s>old@example.jp</s></address> </footer> </body> …</html>
small要素は細目のような注釈を表します。HTML4では小さなフォントを表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> <footer> <small>© copyright 2012 J.Hashimoto</small> </footer> </body> 外観 関連エントリー HTML5エントリーのまとめ - プログラマー…</html>
strong要素は重要性を表します。HTML4では強調を表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは！<strong>HTML5</strong></p> </body> 外観 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
figure要素は、図表や図画を表します。 figcaption要素は、figure要素のキャプションを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <p> <figure> <img src="Winter.jpg" /> <figcaption>冬の森</figcaption> </figure> </p> </body> 外観 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
dl要素は名前と値がセットになったリストを表します。dt要素は名前を表します。dd要素は値を表します。 HTML4では、dl要素は定義リストを表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <dl> <dt>開発言語</dt> <dd>VB.NET</dd> <dd>C#</dd> <dt>開発環境</dt> <dd>Visual Studio 2003</dd> <dd>Visual Studio 20…</dd></dl></body></html>
hr要素は、段落の区切れをを表します。 HTML4では罫線を表す要素でした。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> <hr /> <p>HTML5を始めました。</p> </body> 外観 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
address要素は、サイト管理者や記事の著者の連絡先を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> <footer> <address>当サイトの連絡先: mail@example.jp</address> </footer> </body> 外観 連絡先が斜体で表示されてますね。 関連エントリー HTML5エントリーのまとめ - プログラ</html>…
footer要素は、ページやセクションのフッターを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <article> <header> <h1>2012/07/01の記事</h1> </header> <p>こんにちは！HTML5</p> <footer> <p>投稿者: J.Hashimoto</p> </footer> </article> </body> </html> 外観 関連エントリー HTML5…
header要素はページやセクションのヘッダーを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <article> <header> <h1>2012/07/01の記事</h1> </header> <p>こんにちは！HTML5</p> </article> </body> </html> 外観 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
hgroup要素は、見出しとそれに付随する小見出しをグルーピングします。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <article> <header> <hgroup> <h1>2012/07/01の記事</h1> <h2>初めてのHTML5</h2> </hgroup> </header> <p>こんにちは！HTML5</p> </article> </body> </html> 外観 関連エントリー HTML…
aside要素はコンテンツには関連しているものの比較的関連の薄い部分を表します。例えば補足記事やブログのコメント欄が挙げられます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <article> <header> <h1>2012/07/01の記事</h1> </header> <p>こんにちは！HTML5</p> <aside> <h2>コメント</h2> <p>私もHTML5に興味があります。</p> </aside></article></body></html>
