HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート
HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低
［速報］HTML5、ついにW3Cの勧告となる
W3Cが発表したプレスリリース（日本語）の冒頭を引用します。 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の
Firefox Nightly が input type="color" に対応
現在、Firefox Nightly としてリリースされている、Firefox 28 で、input 要素の type 属性値として 「color」 がサポートされました。「color」 は HTML5 から追加された type 属性値です。 現在、Firefox Nightly としてリリースされている、Firefox 28 で、HTML5 から追加された input 要素における type 属性値、「color」 がサポートされました。 input type="color" が指定された入力コントロールは、RGB カラーの入力欄となります。対応するブラウザでは、多くの場合、色を選択するためのユーザインタフェースが表示され、それを操作することで数値 （16進数カラーコード） を入力できます。HTML5 仕様書の該当箇所は下記。 4.10.7.1 States of the type at
W3C が HTML5 仕様策定完了を発表
日本時間では昨日の深夜でしたが、W3C が HTML5 （および、Canvas 2D） に関する仕様策定完了を発表いたしました。両仕様とも、勧告候補 （Candidate Recommendation） となり、実装、運用テストによる検証段階に入ります。 また、同時に HTML 5.1、HTML Canvas 2D Context, Level 2 の草稿も公開され、次バージョンの仕様策定がスタートします。この辺は以前から発表されていた予定 （こっちも参照） に則っています。 W3CがHTML5仕様策定完了を発表、相互運用性テストおよびパフォーマンス向上へ ： W3C プレスリリース なお、勧告候補になっても、以前から続いている、例えば hgroup 要素どうすんの？的な議論は継続していますが、こういう個々の機能の話が全体の仕様策定を遅延させないように、仕様をモジュール化する、拡張仕様 （
Webkit に最適化されたサイトを IE10 に適応させるためのガイド
スラッシュドットで 「Microsoft、「WebKitはWeb標準を破壊している」と主張」 なんてストーリーが上がってて、なんぞやと思って大本の記事を見に行ったんですけど、そしたらそれが 「Webkit しか対象にしてない Web サイトを IE10 でもきちんと動作させるためにやっといた方がいいことガイド」 っていうお役立ちコンテンツだったってことで、がんばって最後まで読んだ手前、ついでなので翻訳して掲載してみようかなと思います。 Microsoft、「WebKitはWeb標準を破壊している」と主張 ： スラッシュドット・ジャパン ちなみに翻訳元の記事は 「Windows Phone Developer Blog」 で書かれた内容なので、「Windows Phone 8 で動作する IE10」 っていう書き方になっている部分や、すべて Webkit と対比して書かれているなど、モバイル
HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
いったん、水を差されたHTML5の現状と、将来について
藤川真一（えふしん） FA装置メーカー、Web制作のベンチャーを経て、2006年にpaperboy&co.へ。ショッピングモールサービスにプロデューサーとして携わるかたわら、2007年からモバイル端末向けのTwitterウェブサービス型クライアント『モバツイ』の開発・運営を個人で開始。2010年、想創社（現・マインドスコープ）を設立。2012年4月30日まで代表取締役社長を務める Facebookが、HTML5をベースにしたアプリから、ネイティブアプリに舵を切った時に、「HTML5に賭けたのは失敗」という話が業界を駆け巡った。 それまでHTML5は、新しいWeb技術の希望の星のように言われており、将来を渇望されていたところに水を差された形になった。 そこで、改めて冷静に「HTMLとは何なのか？」ということを考え直してみた方が良いと思う。 HTMLとWebブラウザの技術的メリットは、 画像な
iOS6のSafariでサポートされるHTML5の機能 | DevelopersIO
以前、HTML5でカメラやGPSなどスマートフォンならではの機能がどこまで使えるのか調べました。 最近、iPhone5を買ったので今度はiOS6のSafariでサポートされたHTML5の機能を試して見ようと思います。 試したのは以下の5つです。iPhoneで確認できるようにサンプルを作ったので試してみて下さい。 ファイルアクセス(File API)とカメラ(HTML Media Capture) 音声処理・合成(Web Audio API) アニメーション(Animation Timing API) CSS Filter Effects Remote Debugger ■ファイルアクセス(File API)とカメラ(HTML Media Capture) ファイルアクセスとカメラ連携のサンプルです。iOS6ではFile APIの書き方でカメラも使えました。 [ファイルを選択]ボタンを押すと
ドラッグ＆ドロップでファイルをアップできるHTML5のデモ:phpspot開発日誌
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ＆ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築
iframe 要素の seamless 属性を試してみた
WebKit Nightly Buildsが iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。 Last week in WebKit: Inspector's sources panel and private names ： Surfin' Safari Add seamless layout code (and pass most of the remaining seamless tests) ： Changeset 118291 WebKit 現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド （Dev channel） の最新版 「21.0.1155.2」 で動作しているのが確認できました。インストール済みの方は下記にデモページ
HTML5ベースのモバイルアプリが作れる「Sencha Touch 2.0」公開。性能向上とiOS/Androidネイティブ変換機能が目玉
Senchaは、HTML5/CSS3とJavaScripプログラミングでiOSやAndroidなどに対応したモバイルアプリケーションを構築できるフレームワークの最新版、「Sencha Touch 2.0」を公開しました。 Sencha Touchは、jQuery MobileのようにHTML5をベースにしたアプリケーションフレームワークです。jQuery MobileがHTML5のタグのみで基本的なアプリケーションを開発できるのに対し、Sench TouchではJavaScriptプログラミングが必要になります。その分、アプリケーションの細かい作り込みや、サーバと連係したアプリケーションなどが可能になっています。 関連ソフトウェアとしてSencha DesignerやSencha Touch Charts、Sencha Animatorなどが揃っており、Sencha自身による有償でのトレー
ローカルストレージに簡単な解決策はない
原文：“There is no simple solution for local storage” (on March 5, 2012 by Chris Heilmann) 要約：私たちは良いデータストアとして localStorage を推奨するのをやめなければならない。パフォーマンスがひどく損なわれるからだ。しかし残念なことに、代わりとなるものはまだ完全にサポートされておらず、また簡単に実装できるものでもない。 Web 開発において、うますぎる話に出くわすことは常々だ。そういったもののいくつかは良いもので、だからこそそれが「すべて」として目立ってしまい、開発者を使うように仕向けてしまう。しかし、多くの場合、良いと思われていたものはそこまで良いものではない。また、しばらく使ってみてはじめて「間違っていた」と気づかされるものなのだ。 そんなもののひとつに、localStorage がある
HTML5で作られた「Clear」のサンプルが超スゴい件 - もとまか日記乙
以下を読んで。 kouseipapa.net/i » 「Clear」をまだ購入してない人はチェックしてみては？HTML5でサンプルが作られてますぞ！ おぉ、最近話題のiOSアプリ「Clear」のHTML5版サンプルだそうです。以下がそのサイト。 HTML5 Clear ちなみにこのサンプル、Safariで表示してアクションボタンから「ホーム画面に追加」してWebクリップ化し、Webクリップから起動すると、以下のように全画面表示になります。 おぉ、なんだかアプリっぽい感じ！面白い！ 最近のHTML5はすごいですねぇ。以前、調べるだけ調べてまだ何も出来てない以下とか、そろそろ何かやりたいなぁ、とも思う次第。 前から気になってたHTML5について色々調べてみました最近気になってきたjQueryについて色々調べてみました - もとまか日記乙 てことで。 ツイートする
HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」:phpspot開発日誌
Flotr2 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 次のような綺麗で多様なグラフを描画できるライブラリです。 グラフをクリックするとグラフのサンプル付きでjavascriptのサンプルコードが出てとっても使いやすい iOSでグラフが必要な際に１つの選択肢として。 関連エントリ 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
Posted: 2011.06.20 / Category: javascript / Tag: Ajax, HTML5 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 pushStateを使用していないサンプル jQueryのloadメソッドを使用したコンテンツ切り替えの簡単なサンプルです。 page1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>page1</title> <link rel="stylesheet" href="style.css"> <script type="text
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
避けるべきHTML5機能をまとめたティップサイト「HTML5 Please」登場
HTML5やCSS3といった最新の技術を活用したWebページの制作は開発者にとっては魅力的な選択肢だが、そこには常に「どの機能ならば使っても良いか」という判断が必要になる。最新のブラウザがある機能に対応していたとしても、それがすべての主要ブラウザでサポートされていないことがあったり、あるバージョンでは特定の問題を引き起こすこともある。「どの機能ならば使っても良いか」という調査にかかるコストを考えると、従来の古い技術のみでWebサイトを構築する、といった選択肢も捨てがたいものとなってしまう。 こうした際に役立つサイト「HTML5 Please」が登場した。HTML5やCSS3、JavaScript APIに関して利用が推奨されるかどうか、どのブラウザのどのバージョンがサポートし、全体としてどの程度の対応状況にあるかをまとめたサイトだ。どの機能を利用すべきかといった判断をするのに役立てることが
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
http://html5please.us/