Movatterモバイル変換

[0]ホーム
URL:

Tbpgr Blog

Organization Development Engineer tbpgr（てぃーびー） のブログ

はてなブックマーク数
トップ>HTML5

HTML5

概要 追加要件 MarkdownString#bold 追加 詳細 追加要件 MarkdownString#bold 仕様 ・Markdownのboldを出力します ※より詳細についてはGitHubのREADMEおよびテストケース参照 GitHub https://github.com/tbpgr/tbpgr_utils Rubygems http://rubygems.org/gem…

はてなブックマーク - TbpgrUtils | 追加要件 MarkdownString#bold 追加

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

はてなブックマーク - JavaScript | chart.jsでLine Chartを表示する

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

はてなブックマーク - JavaScript | chart.jsで棒グラフを表示する

概要 chart.jsでPolar Area Chartを表示する 詳細 chart.jsでPolar Area Chartを表示する 仕様 ・CodeIQで出題しているデスマコロシアムのTEAMの参加分布を表示 ・テキストボックスの値をグラフに反映 ・テキストの内容を変更するとグラフも変更される サン…

はてなブックマーク - JavaScript | chart.jsでPolar Area Chartを表示する

概要 chart.jsでPie Chartを表示する 詳細 chart.jsでPie Chartを表示する 仕様 ・CodeIQで出題しているデスマコロシアムのTEAMの参加分布を表示 ・テキストボックスの値をグラフに反映 ・テキストの内容を変更するとグラフも変更される サンプル <html lang="ja"> <head> <meta charset="UTF-8"> <title>Docume</title></meta></head></html>…

はてなブックマーク - JavaScript | chart.jsでPie Chartを表示する

概要 chart.jsの設定 詳細 JavaScript + HTML5のcanvasでグラフを操作できるchart.jsの設定をします。 設定 ・https://github.com/nnnick/Chart.js から ZIPをダウンロード ・ZIPを解凍 ・Chart.min.jsを任意のディレクトリにコピーし、HTML内にcanvsを配置…

はてなブックマーク - JavaScript | chart.jsの設定

概要 Canvasで交差点を描く 内容 CodeIQの結城先生の問題のクロッシング問題をやろうかな、 と思って気がついたら図を描画する方に手が動いていたという謎。 HTML5＋canvasで実装しました。 ソース <html> <head> <script type="text/javascript"> function draw(list) { var canvas = document.getEleme</head></html>…

はてなブックマーク - HTML5 | Canvasで交差点を描く

概要 meterタグについて説明します。 内容 meterは規定範囲内の測定値を表示します。属性として以下の利用が可能です min = 最小値を設定 max = 最大値を設定 low = 低いとされる値 optimum = 適正とされる値 high = 高いとされる値 value = 現在の測定値 サ…

はてなブックマーク - HTML5新要素 | meter

概要 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" >現在２０％…</progress></form></body></html>

はてなブックマーク - HTML5新要素 progress

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

はてなブックマーク - HTML5新要素 input type="color"

概要 input type="number"タグについて説明します。 内容 input type="number"は数値入力欄です。属性として以下の利用が可能です max = 最大値を設定 min = 最小値を設定 list = 入力候補を設定 ※2012/03/19現在 Operaのみ使用可能 step = ステップ幅を設定…

はてなブックマーク - HTML5新要素 input type="number"

概要 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新要素 input type="range"

概要 HTML5の新要素をまとめます 新規追加タグ タグ名 内容 section セクション nav ナビゲーション article 記事 aside 補足的内容 hgroup セクション見出し header,footer ヘッダー、フッダー figure 図表 time 時間 mark 強調 meter 規定範囲内の測定値 r…

はてなブックマーク - HTML5の新要素

概要 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>…

はてなブックマーク - HTML5新要素 input type="email"

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

はてなブックマーク - HTML5新要素 input type="time"

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

はてなブックマーク - HTML5新要素 input type="week" カレンダーUIで週の入力

概要 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>…

はてなブックマーク - HTML5新要素 input type="month" カレンダーUIで年月の入力

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

はてなブックマーク - HTML5新要素 input type="date" カレンダーUIで日付の入力

概要 input type="datetime"タグについて説明します。 内容 input type="datetime"は UTC（協定世界時）による日付入力欄です。書式はYYYY-MM-DDThh:mm:ssTZDです YYYY 年 MM 月（01〜12） DD 日（01〜31） T ここから時間が始まることを表す文字（大文字のT…

はてなブックマーク - HTML5新要素 input type="datetime" カレンダーUIで日時の入力

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

はてなブックマーク - HTML5新要素 input type="url"

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

はてなブックマーク - HTML5新要素 input type="tel"

概要 input type="search"タグについて説明します。 内容 input type="search"は検索入力欄です。 通常にinput="text"に、クリアボタン（テキストの右端に×マークが表示され入力内容をクリアできる） 属性 pattern="正規表現" submit時に正規表現による入力…

はてなブックマーク - HTML5新要素 input type="search"

概要 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>…

はてなブックマーク - HTML5新要素 rubyタグ

概要 markタグについて説明します。 内容 markは特定のテキストをハイライトして目立たせる機能です。 ページの作成者が目立たせたい箇所に適用するのではなく、 ユーザーがページ内を検索して、検索結果をハイライト表示させて目立たせる るようなケースを…

はてなブックマーク - HTML5新要素 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>

はてなブックマーク - HTML5新要素 timeタグ

概要 figureタグについて説明します。 内容 figureは挿絵、図表、写真、コードなどに注釈を付けるために使われます。 図表にキャプションを付与したい場合はfigcaptionを使用します。 サンプル RubyでHello Worldするサンプルコードを掲載するページを想定し…

はてなブックマーク - HTML5新要素 figureタグ

概要 header,footerタグについて説明します。 内容 headerはイントロダクションやナビゲーションの支援となるグループを表します。 footerはセクショニングコンテンツのフッターを表します。 よくある例としては、サイトのタイトルとナビゲーションが画面上…

はてなブックマーク - HTML5新要素 header,footerタグ

概要 hgroupタグについて説明します。 内容 hgroupは見出し（h1〜h6）をグループかします。 これにより、1つのページに複数の見出し階層を設定できます。 サンプル 各言語の特徴をまとめた記事を想定します。 JavaとRubyの特徴を列挙します。 （asideで利用…

はてなブックマーク - HTML5新要素 hgroupタグ

概要 asideタグについて説明します。 内容 asideは文書の補足的内容や、サイドバーに表示するような内容に設定します。 サンプル 各言語の特徴をまとめた記事を想定します。 JavaとRubyの特徴を列挙します。 （articleで利用したサンプルをちょっとだけ改修…

はてなブックマーク - HTML5新要素 asideタグ

概要 articleタグについて説明します。 内容 文書の意味のまとまりを表す。 より具体性があり、articleなど他のセクション要素を適用できる場合はそちらを利用すること。 具体的にはブログの記事などのように、他のサイトに記事部分だけを持って行って流用し…

はてなブックマーク - HTML5新要素 articleタグ
Search
Profile
id:tbpgid:tbpg

元エンジニア 人事です。
「成長と充実を生み出す環境を設計する」

ハラククリカタってなに？
転職透明化らぼナレッジベース
挫折論への招待ってなに？
セイチョウ・ジャーニーってなに？
てぃーびーとは？
注目記事
Categories
参加グループ
最近のコメント
    Podcast

    自分の内からでるモチベーション「内発的動機づけ」を支援するためのブログを開設しました。

    sp.8a【ゲスト: tbpgr】楽しくない7次受けSIer

    引用をストックしました

    引用するにはまずログインしてください

    引用をストックできませんでした。再度お試しください

    限定公開記事のため引用できません。

    読者です読者をやめる読者になる読者になる
    [8]ページ先頭
    ©2009-2025 Movatter.jp