HTML5やCSS3を使ってAndroidやiOSデバイス向けのモバイルアプリケーションを作成できるフレームワーク「Sencha Touch 2.0」が登場しました。
参考記事：HTML5ベースのモバイルアプリが作れる「Sencha Touch 2.0」公開。性能向上とiOS/Androidネイティブ変換機能が目玉 － Publickey
「jQuery Mobile」などのようにモバイル向けのアプリを作成できるフレームワークで、HTML5を使うことでサーバーと連携した複雑なアプリも開発できるそうです。
また、詳細は不明ということですが、「Sencha SDK Tools」を使うとAndroidやiOSに対応したネイティブ形式への変更も可能だということです。
HTML5やCSSを使って作られたブラウザ上で「Mac OS X Lion」が動作するWebページが登場しました。
参考記事：Try Mac OS X Lion Online In Your Web Browser | Redmond Pie
ウィンドウやデスクトップも高い再現度で作られていて、表示されているウィンドウは閉じたり最小化したりすることはできませんが、マウスでドラッグすると動かすことができます。また、上にあるメニューバーも表示だけのようです。
デモページが公開されていますので、是非とも触ってみてください。対応するブラウザは、「Firefox」、「Google Chrome」、「Safari」となっていますので、デモページを試す際にはいずれかのブラウザでアクセスしてください。
ログインに必要なパスワードは「admin」となっています。
2011年5月9日～5月15日までの間に見つけたHTML5、CSS3関連記事のまとめです。
デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。
IE6で見た場合でも、ツールチップとして動作するCSS3で実装するツールチップのチュートリアル紹介記事です。
IE6でツールチップを表示するのには、Javascriptを使用しています。
デモ：CSS3 tooltips demo – RedTeamDesign
マウスオーバーするとアニメーションするCSS3コードの紹介記事です。
デモ1：Design Shack Hover Effect Examples
デモ2：Design Shack Hover Effect Examples
デモ3：Design Shack Hover Effect Examples
デモ4：Design Shack Hover Effect Examples
デモ5：Design Shack Hover Effect Examples
スライドなどを使ってCSS3の影付き、角丸、グラデーションなどのエフェクトを設定できる「CSS3 Generator」というツールの紹介記事です。
CSS3 Generator – By Eric Hoffman & Peter Funk
Photoshopの設定画面ライクなインターフェイスのCSSコードジェネレーターの紹介記事です。
CSS3で角丸を実装するサンプル紹介記事です。
IE6～IE8のようなレガシーブラウザでもセレクタを利用可能になるスクリプトの紹介記事です。
HTML5やCSS3に対応したWYSIWYG編集可能なHTMLエディターの紹介記事です。
アドオンによる機能拡張にも対応しており、自由に機能を拡張できます。
BlueGriffon, The next-generation Web Editor based on the rendering engine of Firefox
iPhoneやiPad向けの電子書籍をjQueryやHTML5を使って作成する為のフレームワークの紹介記事です。
アニメーションするサイトマップを実装するスタイルシートの紹介記事です。
デモ：Sitemap
CSS3のMedia Queriesを使ったWordPressテーマの紹介記事です。
フレキシブルなボタンをCSS3を使って作るサンプルの紹介記事です。
CSS3を使ったiOS向けのナビゲーションボタンの紹介記事です。
デモを見る場合は、iPhoneやiPod touchなどiOS端末で見てください。
デモ：Buttons
HTML5の可能性を感じさせてくれるプレゼンテーション「HTML5 WOW」の紹介記事です。
HTML5だとこんなことができるの！？という新たな発見があるのではないでしょうか！
プレゼンテーションを見る場合には、Google Chromeが必要ですのでご注意ください。
2011年5月2日～5月8日までの間に見つけたHTML5、CSS3関連記事のまとめです。
デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。
「JSTouchController」は、HTML5やJavaScriptを使ったWebブラウザ上で動作するマルチタッチシステムです。
以下は、サンプルをiPadで動かしている動画です。
Flashを使わずに、音楽を再生したり音符を描き出したりできるライブラリの紹介記事です。
HTML5で使えるスニペットを投稿・共有できるサイト「HTML5 Snippets」の紹介記事です。
iPhoneやiPad向けの電子書籍をjQueryやHTML5を使って作成する為のフレームワークの紹介記事です。
2011年4月25日～5月1日までの間に見つけたHTML5、CSS3関連記事のまとめです。
デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。
HTML5、CSS3、JavaScriptを使ったプレゼンテーションライブラリの紹介記事です。
デモページでは、矢印キーやHOME、ENDキーでスライドの切り替え、Ctrlキーを使ったショートカットキーを使うことが可能です。
Ctrl + Hを押すとスライドのサムネイルを一覧で表示することができます。
お出かけや旅行に手軽にもっていく為の地図帳を作成するサービス「offchiz」の紹介記事です。
出かける前に作成しておくことで、インターネットに繋がらない環境下でも地図を確認できるようになります。
レイアウトがiPhone、iPadにも最適化されているHTML5で作られたWordPressテーマの紹介記事です。
iPhone、iPod touchで表示すると以下のような感じです。
画像を一切使わずに美しいグラデーションのフォーム「Glowform」の紹介記事です。
デモ：Glowform :: Image-less CSS3 Glowing Form Implementation
HTML5やCSS、jQueryの日本語スライドをスライド共有サイト、SlideShareで日本語のスライドのみを集めているサイト「SlideFinder」の紹介記事です。
MP3ファイル等を再生できるリッチなUIの音楽プレイヤー「Speakker」の紹介記事です。
音楽プレイヤーとしての基本機能はもちろん、FacebookやTwitterとも連携します。
デモ：Speakker | The new way of audio in HTML5 | Demo
画像を使わずに、紙がめくれたようなエフェクトを与えるスタイルシートの紹介記事です。
上の画像のように紙っぽい感じを演出できます。
デモ：Pure CSS3 Paper Curls Without Images
Visual Studio 2010のコードエディタ上で、CSS3のIntelliSenseを表示できるようにする方法の紹介記事です。
IntelliSense（インテリセンス）というのは、コードエディタ上で動作する補完機能のことです。
idとclassを使用しないで、HTML5、CSS3のみでWebページを構築しようという試みの記事です。
最終的には、「id, classを使わずにサイトを組むもんじゃない。」と締めくくられています。
2011年4月18日～4月24日までの間に見つけたHTML5、CSS3関連記事のまとめです。
デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。
HTML5やJavaScriptがベースになった、スマートフォン向けのゲームライブラリ「enchant.js」のリリース記事です。
青少年プログラマ育成を目指した「9leap(ナインリープ)」というコンテストプログラムが企画されています。
法人向けに有償ライセンスとサポートの提供も予定されているようです。
CSS3非対応のブラウザでも、CSS3のMedia Queriesを実現させるスクリプトの紹介記事です。このスクリプトは、IE6でも問題なく動作するようです。
Media Queriesとは、ユーザーの状態に合わせたスタイルシートを適用できるようにする機能です。例えば、大きなディスプレイ用のスタイルシート、携帯電話など小さいディスプレイ用のスタイルシートを指定することができます。
Macに搭載されている、Photo BoothというアプリをPHP、jQuery、CSS3を使ってWeb上で再現するチュートリアルの紹介記事です。
デモ：Photobooth with PHP, jQuery and CSS3 | Tutorialzine Demo
ゲーム用ライブラリの「enchant.js」を使って作られた簡単なゲームの紹介記事です。
くまのスタンドがくまを捕まえにいくという単純なゲームのようです。
ゲーム用ライブラリの「enchant.js」を勉強する為に参考になるサイトもまとめ記事です。
スマートフォン向けのフレームワーク「ChocolateChip-UI」の紹介記事です。
「ChocolateChip-UI」は、jQuery Mobileのような、Webサイト向けのユーザーインターフェイス、機能を統合的に提供するフレームワークです。
CSS3のbox-shadowを使ってWebデザインにエフェクトを加えるテクニックの紹介記事です。
デモ：How to create slick effects with CSS3 box-shadow – RedTeamDesign demo
国産ブラウザ「Sleipnir」の開発元のフェンリルのロゴをCSS3で作っています。
CSS3でよく使いそうな10個のテクニックを紹介した記事です。
- font-face によってマシンに入ってないフォントを使うCSS例
- opacity による要素の透明度指定
- rgbaでRGBと透明度を併せて指定
- border-radiusによる角丸
- box-shadowによるブロックに影を付ける効果
- text-shadowによる影付きテキスト効果
- ボックスのグラデーション
- 複数バックグラウンド指定
- transformによる変形
- transitionによるアニメーション
canvasフレームワークを使ってみたサンプル記事です。
フレームワークとサンプルのリンクは以下の通りです。
DreamweaverのようなHTMLオーサリングソフトウェアの紹介記事です。
「Magetta」はWebベースで動作するソフトウェアで、HTML5のオーサリングを行うことができます。
Firefox 4のリリースに合わせて作られたデモアプリケーションの紹介記事です。
惑星をクリックするとアニメーションしながら惑星の情報が表示されます。
HTML5を使ったアイディアが盛りだくさんのサイトの紹介記事です。
HTML5アプリケーションフレームワークの「SproutCore」の新バージョン公開のニュース記事です。
HTML5、CSS3、jQuery、PHPを使って作られたデベロッパー向けのフレームワークの紹介記事です。
デモ：HTML5 Front-End Development Framework | G5 Framework
CSS3を使ったBox Shadowの紹介記事です。
かなり派手なBox Shadowが紹介されています。
CSS3を使った立体的な画像ギャラリーを作成するデモの紹介記事です。
カーソルを合わせると画像が立体的に表示されます。
デモ：CSS3 Image Gallery with a 3D Lightbox Animation
2011年4月11日～4月17日までの間に見つけたHTML5、CSS3関連記事のまとめです。
デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。
HTML5を使って動画を再生できるプレイヤーを紹介した記事です。
画像マウスオーバーすると、アニメーションでキャプションを表示できるスタイルシートの紹介記事です。
HTML5をベースに作られたWordPressテーマのまとめ記事です。
絵本のサムネイルで色々並んでいて、見たい絵本を選ぶとアニメーションと朗読が開始されるHTML5で作られたWebアプリの紹介記事です。絵本は、1本、10分～15分程度のものが中心となっています。
iPad専用となっているので、注意してください。
CSS3のMedia Queriesを使ってさまざまなサイズのビューポートを想定した、リセット用のスタイルシートを紹介します。
Visual Studio 2010で、HTML5タグを入力する方法の紹介記事です。
設定をちょこちょこっと変えるだけなので、簡単にHTML5に対応させることができます。
誰もが知ってる、ロゴやキャラクターをCSS3で表現したものの紹介記事です。
HTML5で作られたサイトのまとめ記事です。
HTML5では、こんなこともできるのか！？という発見があるのではないでしょうか。
Webページ上で、3Dオブジェクトを描画する軽量スクリプトの紹介記事です。
対応ブラウザは、Firefox4+, Chrome9+, Safari10.6+となっています。
デモ1：three.js canvas – camera – orthographic
デモ2：three.js canvas – particles – waves
デモ3：three.js + audio api
CSS3を使って作られたパターンを紹介しているギャラリーサイトの紹介記事です。
パターンをクリックするとWebページ全体に表示してくれます。
ソースも公開されているので、参考にできるのではないでしょうか。
2011年4月4日～4月10日までの間に見つけたHTML5、CSS3関連記事のまとめです。
デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。
仮想デスクトップアプリとして有名な「VMware」のクライアントをHTML5を使ってWebブラウザ上で動作できるようにする製品の紹介記事です。
HTML5が動作するWebブラウザがあれば、OSなどのプラットフォームに関係なく動作します。
-webkitや-mozなど、ブラウザごとのCSS3プレフィックスを自動で付けてくれるサービスの紹介記事です。
IE6やIE7でも動作するCSS3のドロップダウンメニューの作り方の紹介記事です。
FirefoxやGoogle Chromeでは、上のように見えますが、IE6、7では以下のように角丸が適用されません。
HTML5について分かりやすくまとめられた記事です。
内容は以下のとおり。
HTML5で作られたiPad2のシュミレーター紹介記事です。
デモ：iPad2 simulator /w Css3, Jquery and HTML5 | alexw.me
jQueryとCSS3を使って、セットアップ画面のようなフォームを実装するチュートリアルの紹介記事です。
フォームの下部に進捗状況のプログレスバーを表示できます。
デモ：http://webexpedition18.com/download/signup_form_WebExpedition18/
HTML5を使って作られたWordPressのテーマフレームワークの紹介記事です。
コピーアンドペーストで簡単に使えるCSS3で作られたボタンの紹介記事です。
2011年3月28日～4月3日までの間に見つけたHTML5、CSS3関連記事のまとめです。
デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。
JavaScriptを使わずに、CSS3だけでモーダルウィンドウを表示するサンプルです。
デモ：Paul R. Hayes: Experiment: CSS Modal with Animation
角丸、ドロップシャドウ、罫線などをスライドバーなどを使って簡単に設定できるサービスの紹介記事です。
表記は英語ですが、直感的に使えるインターフェイスとなっているので、英語の分からない人でも十分使えると思います。
デモ：i2Style
CSS3のプロパティを使って、テキストを画像に置き換える方法の紹介記事です。ソースコードは、テキストで表示は画像にしたい場合のテクニックです。
WebKit（Safari、Google Chrome等）、Opera、Firefoxに対応しているようです。IEは、別途「ie7-js – Google Project Hosting」のようなライブラリを使うことで対応できるようです。
ちなみに、CSS3未対応の場合は、画像ではなくテキストが表示されます。
HTML5 WebSockets APIの使い方を紹介した記事です。
ホバー時のエフェクトをホバーしている要素以外にも適用する方法の紹介記事です。
JavaScriptを使わずに、スライドショーを作るサンプルです。
デモは、タブキーを押すと次のスライドに移ります。対応しているブラウザはWebKit系（Safari、Google Chrome等）のみですので、見る場合は、WebKit系のブラウザを使用してください。
デモ：http://lab.klab.org/young/wp-content/uploads/data/onlymycss3slide/
3Dアニメーションと言えば、FlashやJavaScriptを使わないとできないというイメージですが、それをCSS3だけで実現したものの紹介記事です。
対応しているブラウザは、WebKit系（Safari、Google Chrome等）のみのようです。
デモ：Spinning spiraling cube using CSS3 3D animation and 3D transforms.
WordPressをiPadに最適化するプラグインの紹介記事です。
HTML5を使って最適化しているそうです。
HTML5で標準実装されているプレースホルダ機能をHTML5未対応ブラウザで実装する方法の紹介記事です。
プレースホルダがなにか分からない人は以下のサイトを見てください。
web用語辞典 – プレースホルダ
デモ：Demo: HTML5 Placeholder Text
jQuery UI向けのテーマを紹介した記事です。
機能面でなく、ユーザーインターフェイスを変更する為のものです。
HTMLCanvasとJavaScriptを使って、画像に電子透かしを入れることができるJavaScriptの紹介記事です。
デモ1：watermark.js basic demo
デモ2：watermark.js special demo
2011年3月7日～3月27日までの間に見つけたHTML5、CSS3関連記事のまとめです。
デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。
CSS3の勉強を始めようと思っている人向けのサイトの紹介記事です。
ただし、外国の記事なので、すべて英語で記述されています。
IBMによるHTML5とCSS3でクロスブラウザ機能を実現するための説明記事です。
IE、Safari、Firefox、Google Chromeなど主要ブラウザすべてで今すぐに使える具体的な方法が説明されています。
動画の内容とコンテンツを連動させることが出来るフレームワーク「Popcorn.js」の紹介記事です。
GoogleマップやTwitterと連動させたりといった使い方もできるようです。
デモ：Popcorn.js | The HTML5 Video Framework
お絵かきアプリを使ったHTML5のプログラミング解説記事です。
サンプルソースもあり、説明もかなり細かいので勉強する上ではオススメです。
HTML5では、フォームまわりがかなり便利になっています。
ただし、すべてのブラウザですべての機能が実装されているわけではありませんので、現時点での各ブラウザの対応状況まとめ記事です。
CSS3を使ったアニメーションをインタラクティブに設計できるツールの紹介記事です。
デモ：Ceaser – CSS Easing Animation Tool – Matthew
ブラウザ毎に先行実装されている機能を使う場合には、プロパティの前にプレフィックスを付ける必要があるそうですが、そのプレフィックスを自動で付けてくれるサービスの紹介記事です。
ちなみに、プロパティの前に付けるプレフィックスですが、SafariやGoogle Chromeの場合は「-webkit-」、Firefoxの場合は「-moz-」を付けます。
デモ：CSSPrefixer
AppleのMac用キーボードをCSS3で再現したサイトの紹介記事です。
キーボードでキーを入力するとタイプしたキーが押されるようになっています。
デモ：http://dl.dropbox.com/u/921159/Keyboard/page.html
CSS3で画像を使わずに、吹き出しを表示するサンプルの紹介記事です。
以下のような吹き出しを作ることができます。
デモ：Pure CSS3 Speech Bubbles Without Images
