jQuery, CSS3, HTML5を使用して、CSS3グラデーション・角丸を生成するCSS3ジェネレーターを作成するチュートリアルを紹介します。 Creating a CSS3 Generator with CSS3, HTML5 and jQuery デモページ ※デモはWebkit系ブラウザ(Chrome, Safari)で動作します。 [ad#ad-2] 上記デモでは、CSS3グラデショーン(上のキャプチャ)、角丸(下のキャプチャ)のCSS3をブラウザで表示確認しながらコードを生成できます。 チュートリアルでは、HTML5のDOCTYPEの解説から、各要素へのスタイルシートの適用まで詳しく解説されています。 時間がない方は、とりあえずページ下のファイル一式をダウンロードすると、上記のデモがそのまま楽しめます。
「HTML5 ★ Boilerplate」はHTML5とCSS3で作られてテンプレートです。 基本構造の勉強や、汎用的なテンプレートとしてかなり使い道がありそうです。 と言うもの、iPhone、iPadなどのモバイル端末に対応している事。また、HTML5未対応ブラウザへの対応もされているため、汎用的に使えるのではないかと思っています。 業務案件にも使えそう 実際にHTML5が業務案件として使われるには一昔前のブラウザにも対応する必要があります。 その点、HTML5 ★ BoilerplateはIE6から最新のブラウザまで対応しているので、業務案件でも使えそうです。 PNG対応などの基本的なものから、CSS3、JavaScriptの実装対応など多岐に渡って対応されているようです。 興味ある方はぜひ使っても見てください!
W3Cが「HTML5 Test Suite Conformance Results」を発表した。これは各ブラウザがHTML5をどれだけサポートしているかを調査したもので、232のテストから構成されている。Internet Explorer 9 Platform Preview 6とChromium 9.0.571.0、Firefox 4.0b8pre、Opera 11.00 alpha、WebKit Nightly Build r70732を対象としてテストが行われ、全体としてはIE9がもっとも好成績を残す結果となった。 テスト結果を見ると、IE9はattributeやaudio、video、xhtml5といったテストを100%パスしている。いっぽう、canvasやgetElemetnsByClassNameについてはほかのブラウザよりも劣る結果となっている。
来週開催されるW3C TPAC (Technical Plenary/Advisory Committee Meeting)でのミーティングで議論するためか、今月はいつも以上に公開される草案が多くなっています。 10/19日付で、HTML5仕様と関連仕様がHTML WGから公開されています。 HTML5 HTML5 differences from HTML4 HTML: The Markup Language HTML+RDFa 1.1 HTML Microdata HTML Canvas 2D Context HTML5: Techniques for providing useful text alternatives Polyglot Markup: HTML-Compatible XHTML Documents 変更点の翻訳も、いつもどおり更新しています。 HTML5 における
Node.jsで動作しブラウザから使用できるJavaScript IDEである「Cloud9 IDE」 alpha版が公開されました。 ブラウザから使用できるので、クラウドとかありきたりな名前が付いてる気がします。(+Plan9?) Win/Linux/Macで動作するようです。 インストール方法(Windows) 詳しい使い方はajaxorg’s cloud9 at master – GitHubに書いてあるので読むといいです。 まずはダウンロードですが、githubではzipでソースをダウンロードできますが、それではなくgit cloneしてダウンロードする必要があるみたいです。 というわけで、gitをインストールした状態でコマンドプロンプトから $ git clone git://github.com/ajaxorg/cloud9.git するとcloud9のディレクトリができるので
数ヶ月ぶりになってしまいました・・・。 (と、毎回書いている気が) 最近Web制作とは別の趣味に注力してしまい、勉強がおろそかになりがちです・・・。 よく、仕事とは別の趣味を持って、週末はリフレッシュ!などということが聞かれますが、 私は向いていないみたいです・・・。 ・土日に仕事が入ると、好きなことができない!と若干ストレス ・好きなことが仕事中に気になりだすと、仕事中ももやもや このあたりの切り替えができるようになれば、もう少しうまくいくんだろうな。 ということで、前置きが長くなりましたが。 あんまり記事数は無いのですが、HTML5で検索していただいてアクセスしていただいている方が多いので、 今回は、『HTML5で、使用するタグを選ぶためのフローチャート』をご紹介します。(もう有名かもしれませんが。) ▽こちらのPDFから引用させていただきました。 Methods to Select
Web Storage を使用して、クライアントサイドにデータを保存する簡単なメモアプリのサンプルを作成してみた。 尚、メモの編集部分の動作には、リッチテキスト編集用APIを使用している。 DEMO1 - localStorage DEMO2 - sessionStorage また、上記サンプルと前回紹介した アプリケーションキャッシュ を組み合わせたVerも作成した。 DEMO1 - localStorage DEMO2 - sessionStorage 2010年10月時点で、IE8.0、Firefox3.6、Safari5.0、Chrome6.0にて動作確認 あまり作りこんでいないので、Firefoxではリッチテキスト編集用APIの動作が少しおかしくなることがある Web Storage とは、クライアントサイド(ブラウザ側)にデータを永続的に保存するための仕様で、オフラインWebア
アプリケーションキャッシュを使用して、オフライン(ネットワークに接続されていない)環境でも閲覧ができるページのサンプルを作成してみた。 DEMO1 DEMO2 2010年10月時点で、Firefox3.6、Safari5.0、Chrome6.0にて動作確認 アプリケーションキャッシュとは、Webアプリケーション を構成しているすべてのリソース(HTML/CSS/JavaScript/画像ファイル)をローカルにキャッシュしておくことで、ユーザがネットワークに接続していなくても Webアプリケーション を利用できるようにするための仕様である。 demo1 は、アプリケーションキャッシュの最もスタンダードとなる使用方法の例で、オンラインの状態で1度 demo1ページ へアクセスすれば、(この時、Firefoxの場合はページ上部に「このサイトはオフライン作業用データの保存を求めています」というメッ
第7回のHTML5とか勉強会で、羽田野さんにAudio Data APIを教えていただいて依頼、やりたかったことがあります。それは、AudioをWebSocketを使ってストリーミング配信すること。これが出来たので紹介します。 音声ストリーミングは、リアルタイム系のサービスの中では難しい部類の一つ。遅延がひどいと、自然なコミュニケーションが難しく、またネットワーク転送中にジッタ(データ到達間隔が揺らぐこと)が起きると、音がプツプツ切れたり間延びしたりと明らかに違和感が生じます。インターネットでは、厳密な意味でのQoS制御は困難ですので、どうしても遅延やジッタが生じますし、これらのパラメータはネットワーク転送だけでなく、サーバーークライアントでの実装ももろに効いてきます。 といったわけで、音声ストリーミングみたいなサービスがブラウザ+Javascriptだけで出来たら、結構嬉しいよな〜やりた
ドラッグ&ドロップ(DnD)API と ファイルAPI を利用して、ローカルPC上にある画像ファイルをブラウザの特定領域にドロップすると、その内容をサイト上に表示する簡単なdemoを作成してみた。 DEMO 2010年10月時点で、Firefox3.6、Chrome6.0にて動作確認 DnD API ドラッグ&ドロップという操作自体は、JavaScript を駆使することで既に Webアプリケーション 上で実現されているが、あくまで擬似的に実現しているに過ぎず、よりデスクトップアプリケーションに近い UI を提供するには限界があると思われる。そのため、HTML5 では、ドラッグ&ドロップに特化したイベントや API を新たに仕様として規定している。 File API また、ドラッグ&ドロップAPI と深く関連する API として ファイルAPI がある。 ファイルAPI を使用することで、
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
ふと、HTML5を実際に使用しているサイトの 現状が気になって調べ物をしたので、ついで にシェアします。HTML5を使っているWebサ イトのギャラリーを5つほどご紹介します。 実例からIEへの対応なども学べるので導入 予定の方はチェックしてみては如何でしょう。 日本でもHTML5で作られたサイトを稀に見かけるようになってきました例えばローソンのサイトはHTML5ですね。Twitterでも一部のユーザーに人気のie6botのサイトもHTML5です。 海外では結構な数になってきているようですので実例を見て学びたいと思い、ギャラリーから探しました。 101 Best HTML5 Sites HTML5で出来たサイトのベスト100を掲載しているサイトです。サムネイルも中くらいのサイズで見やすいのでお勧め。 このサイトはシリーズ化していて、他にもTwitterアプリ、iPhoneアプリサイト、An
Updated 2010.08.02 / Published 2010.08.02 latest logさんでエントリーされていたコードを削る方法がすごく勉強になったので、練習がてらに早速IE8以下でHTML5の新要素をCSSセレクタで使う際にdocument.createElement()で事前に書き出しておく必要があるコードをMinify化してみました。 書き出す必要のあるHTML5の新要素 まず最初に、IE8以下では未知の要素となるために書き出す必要のあるHTML5の新要素名を列挙しておきます。 article要素 aside要素 nav要素 section要素 hgroup要素 header要素 footer要素 figure要素 figcaption要素 time要素 mark要素 この他にも、HTML5の新要素にはcanvas要素, audio要素, embed要素, vide
Updated 2013.09.05 / Published 2010.08.19 HTML5についてのおさらい続編です。前回の内容を受けて読者の方から質問があったことに対する回答のまとめであったり、前回紹介しきれなかったセクション関連の新要素として見出しをグループ化するhgroup要素による効果、およびheader, footer要素を用いたセクションといった前回から一歩踏み込んだ内容をまとめました。 前回のHTML5についてのおさらいの前提を含みます。先に参照しておくとより理解が進むかと思います。また、今回取り上げている要素はコンテンツ・モデルも関係してくるのでこの点も抑えておく必要があります。 hgroup要素 - 見出しのグループ化 hgroup要素は、HTML5の勧告候補から除外されました。各ブラウザは互換性のためにhgroup要素のサポートをいますぐやめるわけではありません。h
Updated 2010.07.26 / Published 2010.07.26 jQueryのprepend(), append(), appendTo(), before(), after(), html(), wrap(), wrapInner(), wrapAll()など、指定のセレクタに対してオブジェクトを操作できるメソッドを用いてHTML5の新要素を操作する際は、現行MicrosoftからリリースされているIE8までのバージョンでは、HTML5の新要素が認識できないので注意が必要です。 この罠に嵌ることが想定される事態 HTML5でリニューアルされているサイトが散見されるようになってきた今日この頃ですが、表題の問題で混乱が起こることが想定される事態としては、事前にHTML5の新要素群をdocument.createElement()で作成済みなので、「よし、これでjQuery
開発者の間では次世代の規格として注目を集めているHTML5。様々な可能性を示してくれていますが、今日紹介するのはPCようでは無く、モバイル用のモバイル用のHTML5フレームワーク「Sencha Touch」です。 このフレームワークはWEBアプリに、iphoneアプリやアンドロイドアプリ並みのデザインと、操作感を可能にするフレームワークで、HTML5とCSS3を使って構築されています。 詳しくは以下 ほとんど、現在のアプリで実装されているようなことは、可能で、タップ、ダブルタップ、スワイプ、ピンチなどといった基本的な操作からAJAX、YQL、JSONP経由でデータを取得など、といったデータ連携も可能です。 フレームワークはオープンソースライセンスで提供されています。アンドロイドの動向もありますが、Appstoreは審査なども厳しくコンテンツによっては公開が難しいものが多々ありますが、こうし
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く