スマホ用JavaScriptフレームワーク5つ＋1を徹底研究（1/5） - ＠IT
スマホ用JavaScriptフレームワーク5つ ＋1を徹底研究 jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは アシアル株式会社 鴨田健次 2011/6/22 スマートフォン向けJavaScriptフレームワーク／ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI（ユーザーインターフェイス）パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。 本稿では、jQuery Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。 ■ PCサイト向けJavaScriptフレームワークについて PCサイト向けJavaScriptフレー
レガシーなブラウザでもCSS3の新技術を活用する·Selectivizr MOONGIFT
SelectivizrはCSS3の機能をIE6〜8でもサポートできるようにするライブラリ。 SelectivizrはJavaScript製のオープンソース・ソフトウェア。CSS3ではIDやclassによる指定の他にもセレクタが追加されている。例えば属性値による指定でスタイルを設定することもできる。機能が追加されれば、より自由度の高いWebデザインができるようになる。 使い方 しかし足を引っ張る要素も存在する。それがレガシーブラウザだ。CSS3に対応していないWebブラウザであるIE6〜8においてセレクタを使えるようにするのがSelectivizrだ。 SelectivizrをIE6〜8において読み込めば、多様なセレクタが利用できるようになる。面白いのはjQuery、dojo、prototype.js、YUI、DOM Assistant、MooTools、NWMatcherといった有名なJa
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー
EPUB日本語拡張仕様策定により、WebKitの縦書き表示進展
イースト、一般社団法人日本電子出版協会（JEPA）、アンテナハウスは、総務省より受諾した「新ICT利活用サービス創出支援事業」（平成22年度／電子出版の環境整備）の「EPUB日本語拡張仕様策定」によって、Safari、ChromeなどのWebKit系ブラウザー、iBooksなどの電子書籍ビューワー、Android OSで、日本語組版の実装が進んでいることを発表した。 EPUBは電子出版物の事実上の世界標準フォーマットで、最新版のEPUB 3.0において縦書き／ルビ／縦中横／禁則などの日本語組版仕様の策定が進められている。WebKitは、AppleのSafari、iBooks、Google ChromeやAndroid OSなどで採用されているオープンソースHTML描画エンジンで、年内に日本語組版がこれらに実装される見通しとなった。 「Webkit、Chrome 日本語縦書き表示」にて、CS
超カッコいい確認ダイアログをjQueryで実装するチュートリアル:phpspot開発日誌
How to Create a jQuery Confirm Dialog Replacement | Tutorialzine 超カッコいい確認ダイアログをjQueryで実装するチュートリアル 普通、ダイアログというと javascript の confirm とか、その他 jquery プラグインを使って実装されるものが多いですが、これまで見たなかでもかなりのカッコよさのダイアログ実装チュートリアルです。 サンプルのダウンロードも可能。 一見全て画像のようにも見えますが、CSS3を使って綺麗にデザインされています。 ここら辺もこだわりたいという方は参考にしてみるとよさそう。 関連エントリ 効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」 その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAc
text-shadowで作る「見出し」デザインのアイデア (1/4)
text-shadowプロパティはテキストとtext-decorationに対して影を1つもしくは複数つけられるプロパティだ。もともとはCSS2で定義されたものの、ブラウザーの実装が進まなかったためCSS 2.1でいったん削除され、CSS3のtext-moduleとして復活した。 text-shadowはCSS3の中でもっとも基本的なプロパティの1つと考えられているが、アイデア次第で大きな効果を得られるプロパティでもある。今回のCSS3道場は、text-shadowを使ってリッチな「見出し」をデザインしてみよう。なお、text-shadowはほとんどのモダンブラウザーに実装されているが、残念ながらInternet Explorer 9 ベータ版ではサポートされていない。 今回のお手本
「Canvas」と「CSS3」を使う
今回はThe Shodo（注1）で活用している技術の中から、CanvasとCSS3の活用例を紹介します。これまでできなかった表現や装飾を実装したり、これまでできたことをより簡単に行ったりするのに役立ちます。 Canvas：ブラウザ上で描画する Canvasは、HTML5で新たに追加される要素の一つです。HTML内にcanvas要素のタグを記述し、width（幅）やheigt（高さ）などの属性を指定するだけで、ブラウザ上で描画できるようになります。 The Shodoでは2カ所でCanvasを利用しています。一つはWriteページで「書」を書くために、もう一つはGalleryページの作品を一覧するために利用しています。WriteとGalleryでの実際の利用方法を具体的に解説します。 まずはThe Shodoの肝とも言える「書」を書くWriteと呼ぶページです（画面1）。半紙の部分をマウスや
覚えておくときっと役立つ。Webアプリケーション用のリッチなUIフレームワーク·Alloy UI MOONGIFT
Alloy UIは数多くのウィジェットを提供するUIフレームワーク。 [/s2If] Alloy UIはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア。Webの役割は大きく変わってきている。シンプルなホームページと言われた時代は終わり、Webアプリケーションやソーシャルサービスのようにオンライン上でやり取りされるデータが増している。 入力補完 それに伴ってWebベースでもリッチなUIが求められるようになってきた。日付をカレンダー入力したり、ソートやドラッグアンドドロップなどを実装して欲しいと言われることも多い。そのようなニーズに幅広く答えられるライブラリがAlloy UIだ。 Alloy UIは実に多くのコンポーネントを提供する。入力補完、グラフィカルなボタン、カレンダー、画像が定期的に切り替わるスライダー、カラーピッカー、グラフ、ダイアログ、インラインエディタ
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
【レビュー】HTML5/CSS3対応のデザインテンプレート集「Free HTML5 Templates」 | エンタープライズ | マイコミジャーナル
170を越えるテンプレートからお気に入りを見つけて参考に - Free HTML5 Templates Free HTML5 Templatesにおいて、HTML5/CSS3を駆使したデザインテンプレートが数多く公開されている。このWebサイトは今年の2月11日(米国時間)に掲載されたテンプレートをはじめ、執筆時点で176のテンプレートが公開されている。掲載されている全テンプレートをサムネイルとして確認できる「Template Portfolio」はまさに圧巻だ。 Template Portfolioで登録されているデザインテンプレートを一望できる。画像クリックで拡大、more infoリンクをクリックしてテンプレート詳細画面に移動する これらのテンプレートはGoogle Chrome 5.0以上とFirefox 3.6以上に最適化されており、Creative Commons Attrib
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
jsdo.it
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
WEBデザイナの為のHTML5とCSS3のツール完全版 | しぶりび通信
Appleが、iPad/iPhoneでも見られるHTML5ショーケースを公開しました。スティーブ・ジョブズはかねてより「技術は移り変わるもので、最盛期を過ぎれば墓場行きだ。」と発言しています。 FLAHを切り捨て、HTML5に賭けるその意気込みは、多くのWEB制作者にも伝わった事でしょう。 トレンドに乗ってiPad/iPhone用に最適化すべきか、まだまだシェアの高い既存ブラウザ用に最適化するのか悩むところです。 Ultimate List of HTML5 and CSS3 Tools Admix Webにて、Ultimate List of HTML5 and CSS3 Toolsと題して、Teylor Felizさんが吟味したHTML5とCSS3のツールが紹介されています。 1.HTML5 & CSS3 Readiness 各ブラウザのHTML5とCSS3対応状況とその進捗がわかりま
CSSでグラデーションを実現する方法、主要ブラウザ全対応 | エンタープライズ | マイコミジャーナル
Robert’s talk Firefox 3.6 / Gecko 1.9.2のCSSにはグラデーション機能が実装されている。この機能を利用すると背景のみならず要素ごとにグラデーションをかけることが可能になり、画像を使うことなく手軽に美しいUIを実現することができる。 CSSグラデーションを使ってクールなボタンをつくる方法 Firefox 3.6でCSSグラデーションを使う方法 グラデーション実装はFirefox以外のブラウザでも実現されている。Operaはまだ正式サポートしていないが、近いうちにサポートが実現するとみられる。IEではIE 5.5のころからサポートしており、WebKitを採用しているChromeとSafariでもサポートされている。IE8から名前が変わっているが指定する内容は同じまま。 CSSグラデーションは便利な機能だが、現状ではIE、Firefox、WebKit (Ch
CSS3だけでアクションを実現するフレームワーク·CSS3 Action Framework MOONGIFT
CSS3 Action FrameworkはCSS3製のオープンソース・ソフトウェア。HTML5に注目が集まっているが、同時に見逃せないのがCSS3だ。良く角丸やドロップシャドーがCSSだけでできるようになると言われているが、他にも様々な効果がCSSのみで可能になる。 CSSだけでオブジェクトの回転 これまでは同様の効果を出すためにはJavaScriptの利用が必須だった。だがこれからは簡単なアクションであればCSSだけで実現できるようになる。そのサンプルとして注目したいのがCSS3 Action Frameworkだ。 CSS3 Action FrameworkはJavaScriptを使わずCSSのみで作られている。だがマウスをオブジェクトの上に載せたり、クリックによって効果を出せるようになっている。効果はサイズの変更や回転とその組み合わせ、ドロップシャドー、さらに消失などだ。 Goog
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
“Gecko”ベースのHTML5/CSS3対応HTMLエディター「BlueGriffon」v1.0が公開
グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ～HTML5、CSS3を採用したポイントとは
https://arandomurl.com/2010/07/25/html5-pacman.html
http://www.designwalker.com/2010/05/css3.html
