HTML5
6/9に「HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) 」に行ってきました。途中で帰らなければならなかったので、2つのセッションしか聞けなかったのですが、2回に分けて勉強会の内容を紹介します。 HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏…
5/16に、「ヒカ☆ラボ HTML5で翻訳アプリを作ろう!」のセミナーに行ってきたので、セッションの内容を紹介します。講師は、Microsoft MVP(Bing Maps Development)の山崎大助さんでした。 【ヒカ☆ラボ】【大人気講師が今度もHTML5を教えます!!】 MicrosoftM…
HTML5、CSS3、JavaScript API、SVGの各ブラウザのサポート状況がわかるサイト「Can I Use」を紹介します。 Can I use... Support tables for HTML5, CSS3, etcCompatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browser…
nofollowキーワードは、リンク先の内容について保証できない、責任を持てないことを意味します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <p><a href="http://hoge.example.jp" rel="nofollow">[広告]おすすめサプリメントがお試し特化!</a></p> </body> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
iconキーワードはそのドキュメントのアイコンを表します。このキーワードはlink要素でしか使えません。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> <link rel="icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDttg4Ia384TCee7LIPE8y8qFWAKscrRHXW-z-GaX3iSQ8xFDP" /> </head> <body> <p>HT…</p></body></html>
authorキーワードは、そのページの著者を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form action="./regeister.html"> <p>著者:<a href="mailto:hoge@example.jp" rel="author">佐藤太郎</a></p> </form> </body> レンダリング 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
contenteditable属性は、この要素が編集できることを表します。この属性はすべてのHTML要素で指定できます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <p contenteditable="true">この行は編集できます。</p> </body> レンダリング 初期表示 要素にフォーカス 編集後 関連エントリー HTML5エントリーのまとめ - </html>…
追加の詳細情報を表示した状態で、ページを表示することを指定します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form> <p> <details open="open"> <summary>処理中です。しばらくお待ちください。<br /> <progress value="30" max="100" /></summary> <p>100件中、31件目を処理しています。</p> </details> </p> </form></body></html>
details要素は、表示したり非表示にしたりできる追加の詳細情報を表します。summary要素は、その詳細情報のサマリーを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form> <p> <details> <summary>処理中です。しばらくお待ちください。<br /> <progress value="30" max="100" /></summary> <p>100件中、31件目を処理しています。<…</p></details></p></form></body></html>
low属性は、低領域の閾値を表します。 high属性は、高領域の閾値を表します。 optimum属性は、最適値を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form> <p> A:20点<meter value="20" min="0" low="30" high="80" max="100" optimum="100"></meter><br /> B:50点</p></form></body></html>
progress要素は、進捗を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form> <p> 進捗:<progress value="50" max="100" /> </p> </form> </body> レンダリング 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
output要素は、計算結果を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form action="./regeister.html" method="post" id="order"> <p> 音量:<input type="range" id="volume" onchange="form.elements.op.value = this.value;" /> </p></form></body></html>
テキストフィールドの入力候補を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form action="./regeister.html" method="post" id="order"> <datalist id="suggest"> <option>apple</option> <option>orange</option> <option>grape</option> </datalist> <p> <…</p></form></body></html>
required属性は、入力が必須であることを意味します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form action="./regeister.html" method="post" id="order"> <p> <select required="required"> <option></option> <option>りんご</option> <option>みかん</option> <option>ぶ…</option></select></p></form></body></html>
ページが表示された時に、該当のselect要素にフォーカスすることを指示します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form action="./regeister.html" method="post" id="order"> <p> <select autofocus="autofocus"> <option>りんご</option> <option>みかん</option> <option>ぶどう</option></select></p></form></body></html>
button要素のformtarget属性は、form要素のtarget属性と同じ意味をもちますが、form要素よりも優先されます。 使用例 start.html <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form action="./regeister.html" method="post" enctype="text/plain" id="order" target="_blank"> <p> 名前:</p></form></body></html>
button要素のformnovalidate属性は、form要素のnovalidate属性と同じで、入力値の妥当性を検証しないことを意味します。form要素のnovalidate属性よりも優先されます。 使用例 start.html <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> </body></html>
button要素のformenctype属性は、form要素のenctype属性と同じ意味をもちますが、form要素よりも優先されます。 使用例 ボタンによってフォームの送信データ形式を変えたいケースというのはどんな場合でしょうか?私には適切な使用例が思いつきませんでした…
button要素のformaction属性は、form要素のaction属性と同じ意味をもちますが、form要素よりも優先されます。 使用例 start.html <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="./regeister.html" method="post" id="order"> <p> 名前:<input type="text" id="name" /> </p> <p> </p></form></body></html>
form属性は、そのフィールドの属するフォームを示します。この属性により、フィールドをフォームの外に配置することができるようになりました。 使用例 start.html <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="./next.html" method="post" id="order"> <p> ユーザーID:<input type="text" id="userid" /> </p> </form></body></html>
meter要素は、ある範囲における値を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form> <p> テストの点数:<meter value="50" min="0" max="100" /> </p> </form> </body> レンダリング 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
sidebarキーワードは、サイドバーに表示するドキュメントを表します。 使用例 start.html <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <p><a href="./html5top.html" rel="sidebar">サイドバーにHTML5トップページを登録</a></p> </body> html5top.html <html lang="ja"> <head> <title>H…</head></html></html>
licenseキーワードは、著作権情報を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <p>当サイトのライブラリは、<a href="http://opensource.org/licenses/mit-license.php" rel="license">MITライセンス</a>で公開します。</p> </body> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
externalキーワードは、外部サイトへのリンクを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <p>参考サイト:<a href="http://www.jfa.or.jp/" rel="external">日本サッカー協会公式サイト</a></p> </body> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
spellcheck属性は、入力可能な要素にスペルチェックを有効にするかどうかを指定します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form action="./regeister.html"> <input type="text" name="username" spellcheck="true" /> </form> </body> レンダリング スペルチェック有効 スペルチェック無効 関連エントリー HTM…</html>
autofocus属性は、ページ表示時にその入力フィールドにフォーカスを当てることを指示します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> ユーザーID:<input type="text" id="userid" autofocus="autofocus" /> <input type="submit" value="送信" />…</p></form></body></html>
placeholder属性は、その入力フィールドのウォーターマークを表します。 使用例 <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="booktitle" placeholder="書籍名" /> <input type="submit" value="検索" /> </p> </form></body></html>
step属性は、その入力フィールドの入力単位を表します。 使用例 <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>
min属性、max属性は、その入力フィールドに入力可能な値の範囲を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 時刻:<input type="time" id="time" min="10:10:20" max="11:10:20" step="1" /> </p></form></body></html>
pattern属性は、その入力フィールドに入力可能な値の正規表現を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> TEL:<input type="text" id="tel" pattern="\d{2,4}-\d{2,4}-\d{4}" title="[半角数字2〜4桁]-[半角数字2〜4桁]-[半角数字4桁]" /> <…</p></form></body></html>