Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

HTML5

「HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) 」に行ってきた(その2「HTML5 IDE としての Visual Studio 2013」by 日本マイクロソフト株式会社 Webエバンジェリスト物江修さん)

6/9に「HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) 」に行ってきました。途中で帰らなければならなかったので、2つのセッションしか聞けなかったのですが、2回に分けて勉強会の内容を紹介します。 HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏…

「ヒカ☆ラボ HTML5で翻訳アプリを作ろう!」(by Microsoft MVP山崎大助さん)に行ってきた

5/16に、「ヒカ☆ラボ HTML5で翻訳アプリを作ろう!」のセミナーに行ってきたので、セッションの内容を紹介します。講師は、Microsoft MVP(Bing Maps Development)の山崎大助さんでした。 【ヒカ☆ラボ】【大人気講師が今度もHTML5を教えます!!】 MicrosoftM…

HTML5、CSS3、JavaScript API、SVGの各ブラウザのサポート状況がわかるサイト「Can I Use」

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…

rel属性 nofollowキーワード

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>

rel属性 iconキーワード

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>

rel属性 authorキーワード

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属性

contenteditable属性は、この要素が編集できることを表します。この属性はすべてのHTML要素で指定できます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <p contenteditable="true">この行は編集できます。</p> </body> レンダリング 初期表示 要素にフォーカス 編集後 関連エントリー HTML5エントリーのまとめ - </html>…

details要素 open属性

追加の詳細情報を表示した状態で、ページを表示することを指定します。 使用例 <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要素

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>

meter要素 low属性 high属性 optimum属性

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要素

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要素

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>

datalist要素

テキストフィールドの入力候補を表します。 使用例 <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>

select要素 required属性

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要素 autofocus属性

ページが表示された時に、該当の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属性

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属性

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属性

button要素のformenctype属性は、form要素のenctype属性と同じ意味をもちますが、form要素よりも優先されます。 使用例 ボタンによってフォームの送信データ形式を変えたいケースというのはどんな場合でしょうか?私には適切な使用例が思いつきませんでした…

button要素 formaction属性

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>

input要素 form属性

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要素

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>

rel属性 sidebarキーワード

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>

rel属性 licenseキーワード

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>

rel属性 externalキーワード

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属性

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>

input要素 autofocus属性

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>

input要素 placeholder属性

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>

input要素 step属性

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>

input要素 min属性、max属性

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>

input要素 pattern属性

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>