HTML5
概要 追加要件 MarkdownString#bold 追加 詳細 追加要件 MarkdownString#bold 仕様 ・Markdownのboldを出力します ※より詳細についてはGitHubのREADMEおよびテストケース参照 GitHub https://github.com/tbpgr/tbpgr_utils Rubygems http://rubygems.org/gem…
概要 chart.jsでLine Chartを表示する 詳細 chart.jsでLine Chartを表示する サンプル <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="Chart.min.js"></script> <script language="JavaScript"></meta></head></html>
概要 chart.jsで棒グラフを表示する 詳細 chart.jsで棒グラフを表示します 仕様 ・CodeIQで出題しているデスマコロシアムの言語の分布を表示 ・前日、当日の差分を確認できるようにする サンプル <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="Chart.min.js"></script> <script language="JavaScript"></meta></head></html>
概要 chart.jsでPolar Area Chartを表示する 詳細 chart.jsでPolar Area Chartを表示する 仕様 ・CodeIQで出題しているデスマコロシアムのTEAMの参加分布を表示 ・テキストボックスの値をグラフに反映 ・テキストの内容を変更するとグラフも変更される サン…
概要 chart.jsでPie Chartを表示する 詳細 chart.jsでPie Chartを表示する 仕様 ・CodeIQで出題しているデスマコロシアムのTEAMの参加分布を表示 ・テキストボックスの値をグラフに反映 ・テキストの内容を変更するとグラフも変更される サンプル <html lang="ja"> <head> <meta charset="UTF-8"> <title>Docume</title></meta></head></html>…
概要 chart.jsの設定 詳細 JavaScript + HTML5のcanvasでグラフを操作できるchart.jsの設定をします。 設定 ・https://github.com/nnnick/Chart.js から ZIPをダウンロード ・ZIPを解凍 ・Chart.min.jsを任意のディレクトリにコピーし、HTML内にcanvsを配置…
概要 Canvasで交差点を描く 内容 CodeIQの結城先生の問題のクロッシング問題をやろうかな、 と思って気がついたら図を描画する方に手が動いていたという謎。 HTML5+canvasで実装しました。 ソース <html> <head> <script type="text/javascript"> function draw(list) { var canvas = document.getEleme</head></html>…
概要 meterタグについて説明します。 内容 meterは規定範囲内の測定値を表示します。属性として以下の利用が可能です min = 最小値を設定 max = 最大値を設定 low = 低いとされる値 optimum = 適正とされる値 high = 高いとされる値 value = 現在の測定値 サ…
概要 progressタグについて説明します。 内容 progressは進行状況の表示します。属性として以下の利用が可能です max = 最大値を設定 value = 現在の進捗状況 form = どのフォームに関わっているか サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>progress</title> </head> <body> <form action=""> progress:<progress id="range" value="20" max="100" >現在20%…</progress></form></body></html>
概要 input type="color"タグについて説明します。 内容 input type="color"は色入力欄です。 サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>input type="color"</title> </head> <body> <form action=""> color:<input type="color" name="color" id="color" value="#55ff55" /> </form></body></html>
概要 input type="number"タグについて説明します。 内容 input type="number"は数値入力欄です。属性として以下の利用が可能です max = 最大値を設定 min = 最小値を設定 list = 入力候補を設定 ※2012/03/19現在 Operaのみ使用可能 step = ステップ幅を設定…
概要 input type="range"タグについて説明します。 内容 input type="range"は範囲入力欄です。属性として以下の利用が可能です max = 最大値を設定 min = 最小値を設定 step = ステップ幅を設定。 サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>input type="range"</title> </head> <body> <form action=""> range:</form></body></html>
概要 HTML5の新要素をまとめます 新規追加タグ タグ名 内容 section セクション nav ナビゲーション article 記事 aside 補足的内容 hgroup セクション見出し header,footer ヘッダー、フッダー figure 図表 time 時間 mark 強調 meter 規定範囲内の測定値 r…
概要 input type="email"タグについて説明します。 内容 input type="email"はemail入力欄です。 @を含まないアドレスを入力するとエラーになります。 また@の前後に半角英数文字が1文字以上ない場合もエラーになります。 サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>input type="email"</title> </head> <body> <form action=""></form></body></html>…
概要 input type="time"タグについて説明します。 内容 input type="time"は時間の入力欄です。属性として以下の利用が可能です max = 最大値を設定 min = 最小値を設定 step = 秒単位でのステップ幅を設定 サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>input type="time"</title> </head> <body> <form action=""> time:</form></body></html>
概要 input type="week"タグについて説明します。 内容 input type="week"は週入力欄です。属性として以下の利用が可能です max = 最大値を設定 min = 最小値を設定 step = ステップ幅を設定。デフォルトは1週単位 サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>input type="week"</title> </head> <body> <form action=""> week:</form></body></html>
概要 input type="month"タグについて説明します。 内容 input type="month"は月入力欄です。属性として以下の利用が可能です max = 最大値を設定 min = 最小値を設定 step = ステップ幅を設定。デフォルトは1月単位 サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>input type="month"</title> </head> <body> <form action=""> mon</form></body></html>…
概要 input type="date"タグについて説明します。 内容 input type="date"は日付入力欄です。 サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>input type="date"</title> </head> <body> <form action=""> date:<input type="date" name="date" id="date" value=""style="width:200px;" required /> </form></body></html>
概要 input type="datetime"タグについて説明します。 内容 input type="datetime"は UTC(協定世界時)による日付入力欄です。書式はYYYY-MM-DDThh:mm:ssTZDです YYYY 年 MM 月(01〜12) DD 日(01〜31) T ここから時間が始まることを表す文字(大文字のT…
概要 input type="url"タグについて説明します。 内容 input type="url"はURL入力欄です。 http://、https://などではじまらないアドレスを入力すると エラーになります サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>input type="url"</title> </head> <body> <form action=""> url:</form></body></html>
概要 input type="tel"タグについて説明します。 内容 input type="tel"は電話番号入力欄です。 入力、表示上はinput type="text"と変わらりません。 サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>input type="tel"</title> <script type="text/javascript"> function setInputText(input_id,output_id) { document.getElementByI…</meta></head></html>
概要 input type="search"タグについて説明します。 内容 input type="search"は検索入力欄です。 通常にinput="text"に、クリアボタン(テキストの右端に×マークが表示され入力内容をクリアできる) 属性 pattern="正規表現" submit時に正規表現による入力…
概要 rubyタグについて説明します。 内容 rubyはテキストにルビをふるためのタグです。 サンプル 「不運と踊っちまったんだよ」という文に 「ハードラックとダンスっちまった」というルビをふります。 <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>ruby tag sample</title> <style type="text/css"> header,article { background-col</meta></head></html>…
概要 markタグについて説明します。 内容 markは特定のテキストをハイライトして目立たせる機能です。 ページの作成者が目立たせたい箇所に適用するのではなく、 ユーザーがページ内を検索して、検索結果をハイライト表示させて目立たせる るようなケースを…
概要 timeタグについて説明します。 内容 timeは正確な日時を表すのに利用します。 サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>time tag sample</title> </head> <body> <time datetime="2012-03-13">2012年3月13日</time><br /> <time>2012-03-13</time><br /> <time>18:00</time><br /> <time>18:00:30</time><br /> <…</body></html>
概要 figureタグについて説明します。 内容 figureは挿絵、図表、写真、コードなどに注釈を付けるために使われます。 図表にキャプションを付与したい場合はfigcaptionを使用します。 サンプル RubyでHello Worldするサンプルコードを掲載するページを想定し…
概要 header,footerタグについて説明します。 内容 headerはイントロダクションやナビゲーションの支援となるグループを表します。 footerはセクショニングコンテンツのフッターを表します。 よくある例としては、サイトのタイトルとナビゲーションが画面上…
概要 hgroupタグについて説明します。 内容 hgroupは見出し(h1〜h6)をグループかします。 これにより、1つのページに複数の見出し階層を設定できます。 サンプル 各言語の特徴をまとめた記事を想定します。 JavaとRubyの特徴を列挙します。 (asideで利用…
概要 asideタグについて説明します。 内容 asideは文書の補足的内容や、サイドバーに表示するような内容に設定します。 サンプル 各言語の特徴をまとめた記事を想定します。 JavaとRubyの特徴を列挙します。 (articleで利用したサンプルをちょっとだけ改修…
概要 articleタグについて説明します。 内容 文書の意味のまとまりを表す。 より具体性があり、articleなど他のセクション要素を適用できる場合はそちらを利用すること。 具体的にはブログの記事などのように、他のサイトに記事部分だけを持って行って流用し…