GetTemplate - Free HTML5/CSS3 Bootstrap templates for rapid web development
Subscribe to my newsletter to be notified about each new template released, or simply follow me on Twitter. Progressus PRO This is an extended version of my most popular template "Progressus" (you'll find it below). Featuring 7 additional individual page templates, radically improved codebase and overall quality, this template will surely save you a lot of time and effort when starting a new proje
HTML5 × Chart.jsで円グラフを描く | ビジュアルシンキング
ビジュアライゼーション、データ・ジャーナリズムに活用できそうなツールの使い方を紹介します。今回はChart.jsの第1回。 第1回目なので「Chart.js」の概略から、円グラフを描くまでを。 [完成イメージの確認はこちら] Chart.jsとは Chart.js Javascriptのライブラリ。 HTML5ドキュメント内で使うと、6つのグラフを描けます。 Chart.jsで描画できるグラフ 線グラフ 棒グラフ レーダーチャート 鶏頭図（円グラフの一種） ドーナツグラフ Chart.jsの入手 ライブラリは下記リンク先より入手します。 [ダウンロード] インクルード ライブラリの機能を利用するには、HTMLファイルにインクルード設定します。 <!doctype html> <html> <head> <title>Chart.jsで描く円グラフ</title> <!-- インクルード -
実直なHTML5/CSS3でつくられたモバイルファーストのフレームワーク -Markup Framework
商用利用も無料、変更もコピーも再配布もOK、汎用性に優れたレイアウトやUIエレメントをスタンダードなHTML5/CSS3で実装したフレームワークを紹介します。 ウェブサイトを構築する際に、ベースとして利用するのによさそうです。 Markup Framework Markup Frameworkの特徴 Markup Frameworkのサポートブラウザ Markup Frameworkのデモ Markup Frameworkの特徴 レスポンシブ対応、モバイルファーストのレイアウト。 再利用可能なUIエレメントのライブラリ。 最新のスタンダードなHTML5/CSS3を使用。 ピュアなHTMLとCSSで、Hackなし、JavaScriptなしです。 ミニマルなマークアップ。 ページの容量は小さめ。 サーチエンジンにフレンドリー。 アクセシブル。 セマンティックスとスタイルの明確な分離。 モジュー
Form Follows Function
Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i
WEB制作のIE対策いろいろ チートシートやHTML5/CSS3対応方法など | DECONCEPTER
かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか | DevelopersIO
HTML5でinputタグのタイブが追加されましたが、現行のiPhone、Androidでどのくらい使えるのか調べてみました。 OSとブラウザに関しては以下の機種で調べています。 iPhone 5(iOS6)のSafari Galaxy S3(Android 4.04)のGoogle Chrome バージョン18 目次 テキスト入力 検索(search) 数値(number) 電話番号(tel) URL(url) メールアドレス(email) 日付・時間指定 時間(time) 日付(date) 日時(datetime) 日時(datetime-local) 週(week) 月(month) その他 範囲から指定(range) 色選択(color) テキスト入力 まずはテキスト入力系の属性を調べてみます。 見た目が変わったり、フォーカスインした際の入力モードが変わります。 検索(search
レスポンシブウェブデザインの為のフレームワークいろいろ | hijiriworld Web
1. Initializr 2. 320 and up 3. inuit.css 4. Skeleton 5. Foundation Initializr head要素 <!doctype html> <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--> <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--> <!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]--> <head> <meta c
HTML5 の新要素を使うための準備
HTML5から新しく使える要素が追加されましたが、古いブラウザ（IE8以下）は新要素に対応していない為、思ったように表示ができません。それを解決する為に、リセットCSSとJavascriptを読み込む必要があります。 HTML5のリセットCSS 古いブラウザでは、新要素のブロックレベル要素をインラインとして読み込んでしまう為あらかじめdisplay:block のスタイルを指定しなくてはいけません。 例） article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } こちらのページ「HTML5 Reset Stylesheet | HTML5 Doctor」で公開されているHTML5 のリセットスタイルシートを使わせて頂くと便利です。 HTML5を認識させる
HTML 5 Reset Stylesheet | HTML5 Doctor
We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects. The code Let’s start with the complete CSS stylesheet: /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Cl
HTML5の学習に役立つ(主に)日本語のサイトまとめ2012
webにあるHTML5の情報は英語のものが多い 当然のことですが、HTML5の情報は殆どが英語です。W3Cのサイトだって英語で書かれていますし、大抵の情報は英語さえ分かればアクセスできますね。 まあとはいえ、HTML5を勉強しようと考えるいきなり誰もが英語を読めなければならないとなるとちょっと難しいですよね。最初は先輩方の翻訳または日本語で書かれたオリジナルの文書から学びたい。そして情報の速度や判断の尺度のずれが気になってきてから、それから国外の情報で勉強しても遅くはないはずです。…そう思いたいですｗ HTML5に関する国内のサイトや情報源をまとめました と言う訳で、今回はwebcre8が認識しているHTML5に関する情報源やリソースサイト、参考になった記事、調べてたら出てきたものをざっくりとまとめてみます。サイト、ブログ記事、リファレンス、ツール等です。せっかくなので、知っているものは英
iOSプログラマへ。HTML5 Canvasがおもしろい！ | DOTAPON Blog
…という題で、発表してきました。 さいたま開発勉強会 vol5です。 iOSのCore Graphicsと共通点の多いHTML5 Canvas。 iOSプログラムの経験がまるごと活かせるぜ！面白いものつくろうぜ！ ということをお伝えしたく、実際に手を動かす場面を取り入れてみました。 実際に効果があったかどうかは…わかりません (^^;) 入門的な位置づけに仕上げてみましたので、iOSプログラマの方もそうでない方も、ぜひ触ってみてください。 iOSプログラマへ。HTML5 Canvasがおもしろい！ from cocopon 練習用の「HTML5 Canvas スターターキット」はこちらから。 マウス・タッチイベント両対応のInputManagerが付属していますので、ぜひご活用ください :) CanvasStarterKit_100.zip
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開 Motorola Mobilityが今月公開したHTML5オーサリングツール「Ninja」のバージョン0.7は、SVGやCanvas、WebGLなどを用いたHTML5でのアニメーション効果の開発を得意としたオーサリングツールです（それにしてもNinjaという名称は海外で人気がありますね……）。オープンソースソフトウェアとして開発されています。 Ninjaは、同じくMotorola MobilityがリリースしたHTML5対応のフレームワーク「Montage」をベースにしています。Montageは、Adobe Flash/Flexのような形でHTML5のアプリケーション開発ができるようにという意図で開発されたフレームワーク。 Ninjaの画面
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://clockmaker.jp/blog/2014/01/html5-webgl-away3d-typescript-samples/
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
HTML5KARUTA - 「HTML5カルタ」で覚える！HTML5の108つのタグ
HTML5 × CSS3 × jQueryを真面目に勉強してみる の記事一覧 | DevelopersIO
Initializr - HTML5 project - template
浜 俊太朗のHTML5マークアップ移行ガイド
html5-memo.com
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌