ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <

大日本印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権（見よ！ コレジャナーイアプリの数々を！）」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。本記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面

インターネットがこれまで以上に世界を繋ぐようになったことで、教育からエンターテイメントまで、あらゆるものがオンラインの世界でのニッチを確立しています。ギャンブルも例外ではありません。多くの人は、巨額の賞金を獲得できるチャンスよりも、ギャンブルそのもののスリルと興奮を求めてカジノを訪れることの方が多くなっています。そのため、実店舗のカジノのような雰囲気作りが、オンラインカジノの最大の課題となっています。多くのオンラインカジノは、長年にわたってその課題に取り組み、実現に成功しています。

愛知県名古屋市の大学向けシステムパッケージ販売、開発、導入をしている、IT企業で働く社員たちのお話です。 ブログやWEBサイトでコンテンツも充実し、さらにSEO対策を行っているけど、アクセス数が思うように伸びないことはありませんか？ そのような場合、タイトル(キャッチコピー)の改善を考えてみてはいかがでしょうか。 タイトルはSEO対策で最重要ポイントの１つにあげられますが、SEO以外の観点から見ても、とっても重要だったりします。 なぜならば、タイトルは最も露出の高い部分であり、人々はタイトルだけを見て、クリックするかどうか判断する傾向があるからです。 例えば、検索エンジン(google, Yahoo)の検索結果に表示されるのはタイトルであり、 ソーシャルネットの代表格「Twitter」もタイトルを引用してツイート(情報発信)され、 さらに爆発的なアクセスが期待できる「はてぶ」もタイトルがホ

HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio

ドットインストール代表のライフハックブログ

Sugar is a Javascript library for working with native objects. シンプルで直感的に扱える新しいJavaScriptライブラリが登場した。既存のJavaScriptフレームワークと衝突しないように開発されており、JavaScriptを使った開発効率を向上させるライブラリとして注目される。ライブラリは「Sugar」と呼ばれている。 SugarはJavaScriptのネイティブオブジェクトを拡張するためのライブラリ。一般的なJavaScriptライブラリのように多くの機能を提供するのではなく、ネイティブオブジェクトを拡張することだけに主眼が置かれている。最初からほかのフレームワークと併用することを想定して開発されているため、導入のための敷居が低いところもポイントとなる。 どのような機能がネイティブオブジェクトに追加されるのかは、Sug

jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。

他人のブックマークって気になりませんか？特に同じ業界の人のブックマークってすごく気になりますよね。 興味本位でWEB屋友人のブックマークしてるサイトを教えてもらうことも多いですが、なんだか狙いすましたように、いろんな人が同じようなサイトをブックマークしていることに気がついて、「あぁー、このサイトはみんな良く見てるのかも」って思ったサイトがいくつかあったんですね。 そこで、WEB屋のブックマークをまとめて、北米WEB屋ならこれはたぶん皆みてるんだろうなってサイトをまとめてみましたので（独断と偏見で）ご紹介。 海外でWEB屋をやる方、いち早く海外のWEBデザイン情報をゲットしたい方、知っていて損はないと思います。 Smashing Magazine まずは王道？Smashing Magazine。このサイトは日本でも有名かなと思います。よくWEBまとめ記事とかで取り上げられてますよね。WEBの

これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし

そのまま使うも良し、デザインの勉強をするも良し、のウェブデザイン用の高品質なPSD素材がダウンロードできるサイトを紹介します。 キャプチャ：「tutegate」から「Pretty little frame」 下記にPSD素材がダウンロードできる全8サイトと、それぞれからいくつかピックアップしました。 [ad#ad-2] tutegate Victor Sosea the Finished Box 365psd Premium Pixels Freebies Booth Themes Kingdom 素材をダウンロードして利用する際には、ライセンスを必ず確認してください。 tutegate

この記事ではオープンソースなオススメCMSを5個紹介します。 ※ブクマコメントやツイートでいくつか他CMSの名前が挙がっていたり、リプライ等頂いたので、下部にて別枠で紹介させて頂きます。 コーポレートサイトの制作に特化したCMS。 いわゆる、中小企業の自社紹介サイト系を作成する場合に、十分な機能が組み込まれている。 ・ユーザ管理 ・ページ管理 ・簡易ブログ（ニュースリリースなど複数設置可能） ・メールフォーム（複数設置可能） ・フィードリーダー ・携帯サイト ・Twitter連携機能 など。 また、対応しているDBが、SQLite、MySQL、PostgreSQLと幅広く、更にはCSVでの利用も可能な変り種。 殆どのレンタルサーバ上で動作すると思うので、導入の敷居は非常に低い。 ライセンスはGPLと商用ライセンスの2種類。 株式会社日本情報化農業研究所が提供している国産のCMS。 主に一般