読者です 読者をやめる 読者になる 読者になる

プログラマーな日々

プログラマーをやっています。好きなツール:WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

「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>

input要素 multiple属性

multiple属性は、その入力フィールドに複数の値を入力できることを表します。type属性の値がemail、fileの場合に指定できます。 使用例 <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" size="30" multiple="multiple" /> </p></form></body></html>

input要素 required属性

required属性は、その入力フィールドに値が必須であることを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 名前:<input type="text" id="text" required="required" /> <input type="submit" value="送信" /> </p> </form> </body></html>

input要素 list属性

list属性は、datalistでマークアップされた要素を入力候補として表示します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 名前:<input type="text" id="text" list="namelist" /> <input type="submit" value="送信" /> </p> </form></body></html>

input要素 autocomplete属性

オートコンプリート機能を有効にするか無効にするかを指定します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 名前:<input type="text" id="text" autocomplete="on" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリン…</html>

input要素(type属性 = file)

ファイルアップロード用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> ファイル:<input type="file" id="file" multiple="multiple" size="50" /> <input type="submit" value="送信" /> </p> </form> </body></html>

input要素(type属性 = color)

色を指定するための入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 色:<input type="color" id="color" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング 初期表示 クリックでカラーピッカー表示 カラーピ…</html>

input要素(type属性 = range)

範囲を制限された数値用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 範囲:<input type="range" id="range" min="20" max="80" step="10" oninput="this.form.elements.output.value = this.value;" />…</p></form></body></html>

input要素(type属性 = number)

数値用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 数値:<input type="number" id="number" step="0.1" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング 初期表示 上(下)ボタンクリッ…</html>

input要素(type属性 = datetime-local)

タイムゾーンなしの日時用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 日時:<input type="datetime-local" id="datetime" step="1800" /> <input type="submit" value="送信" /> </p> </form> </body> レン…</html>

input要素(type属性 = time)

時刻用の入力フィールドを表します。 使用例 <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" /> <input type="submit" value="送信" /> </p> </form> </body></html>

input要素(type属性 = week)

週用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = month)

年月用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = date)

日付用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = datetime)

タイムゾーンが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>

input要素(type属性 = email)

メールアドレス用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = url)

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>

input要素(type属性 = tel)

電話番号用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = search)

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

source要素

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>

audio要素

オーディオを表します。 使用例 <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>