IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ：IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi

Facebook Wall - a jQuery Social Media Plugin デザインそのままにfacebookのウォールをサイトに埋め込めるjQueryプラグイン「fb.wall」 facebookのウォールとはTwitterのタイムラインのようなものですが、それを簡単にサイトの特定エレメント内に埋め込めるプラグインです。 Twitterのタイムラインを表示している方もおおいですが、facebookのタイムラインも表示させたいという場合はこれが便利に使えそうです。 デザインは次のようにそのままのデザインでページに埋め込むことが可能。 Live Demo として動作デモをカスタマイズして動かせるので試してみましょう。 コード例は次のようにIDなどをオプションしてあげればOK $('#live-demo').fbWall({ id:'pehpspot', showGuestEnt

iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 2011年02月17日- Skinkers Labs : TouchSwipe iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。 タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。 1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます（それぞれ区別可能） ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。 demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです） 1本指スワイプのデモ 2本指スワイプのデモ スワイプを使った画像ギャラリー 実装はjQueryベースということでや

HTML5の要素や属性、美しいコードの書き方、各ブラウザの対応状況などをまとめたチートシートやリファレンスを紹介します。 HTML 5 Visual Cheat Sheet（配布終了） HTML5のタグリファレンス、以前紹介した時から背景が白に変わり、目に優しくなりました。

(追記) 2/16 23時 いくつかのライブラリを追記しました。 WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ。 本家pearには560程のモジュールがあります(2011/2月現在)が、WEBサービスを作る上でよく使う物をまとめてみました。 これからPHPを使ってサービスを作ろうと思っている方は代替を使うことになると思うので参考にしてみて下さい。 php はインストール時点で既に多くの機能が備わっており、大体のことができてしまいますが、PEARを使うことで面倒なことがより簡単にできるようになります。 PEAR以外にも便利なライブラリはあるのですが、今回はあえて殆どをPEARサイトで公開されている物に絞ってご紹介します。 基本的なパッケージ まず、汎用に使える便利なパッケージのご紹介です。 HTTP_Request2 url を渡してリモートのテキストを取って

CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング

テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 2011年02月18日- Градиенты для текста. Плагин для jQuery テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」。 １文字づつ文字色をかえてグラデーションをかける昔はやったテクニックですが、これをjQueryプラグインでHTMLは汚さずに色を配列で定義しておくことで実現できます。 実装コードは次のようにすればよくて、指定したエレメントをターゲットに実装出来ます。 colors に変化させたい色を配列で定義します。 <script type="text/javascript"> $(".text").pxgradient({ step: 10, colors: ["#fc0","#0fc","#00f"

Facebookのニュースフィードの使い方(初心者編)に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。nanapiでライフレシピ生活！ あなたのライフレシピを待っている人たちがいます あなたが生活でちょっとうまくやっていること、 それを知りたがっている人たちがいます！ あなたの投稿で、 みんなの生活をハッピーにしてみませんか？ nanapiに参加する（無料） はじめに 映画の公開や日本での利用者の増加などで注目されているfacebook。本稿ではfacebookのニュースフィードを使いこなす方法をご紹介します。ぜひ参考になさってください。 ニュースフィードとは？ facebookにログインするとニュースフィードというタイトルのページが表示されます。このページがfacebookの大きな特徴になります。 ニュースフィードの役割 ニュースフ

How to Create a jQuery Confirm Dialog Replacement | Tutorialzine 超カッコいい確認ダイアログをjQueryで実装するチュートリアル 普通、ダイアログというと javascript の confirm とか、その他 jquery プラグインを使って実装されるものが多いですが、これまで見たなかでもかなりのカッコよさのダイアログ実装チュートリアルです。 サンプルのダウンロードも可能。 一見全て画像のようにも見えますが、CSS3を使って綺麗にデザインされています。 ここら辺もこだわりたいという方は参考にしてみるとよさそう。 関連エントリ 効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」 その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAc

IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラｰビリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用

映画「ソーシャルネットワーク」、先週の週刊ダイヤモンドの特集などで、Facebookへの注目が集まっているようです。しかし、Facebookをはじめたいんだけれどもよくわからない、はじめたけれども楽しくない、という声がありますので、ちょっとこれまで、学んできたことをステップでまとめていきたいと思います。最初は、とりあえず楽しくなるまでの5ステップです。 ステップ1　とりあえず、アカウントを取得しよう Facebookは紹介制でないので、さくさくと取得をすることができます。この時の注意点としては、「実名制SNSである」ということをよく理解して、自分の名刺を作る感じで、正確な情報を入れていくことです。 例えば、氏名は本名で入れましょう。ローマ字にしておいた方が、のちのち、海外の人ともつながりやすくなります。漢字の方は別名で括弧書きでいれることができます。 出身地、生年月日、学校、勤め先、メール

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Apple Effect サイトをApple風に打ち出しコンテンツからフェードインで表示。 ModalPop ValidなHTML5

株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 昨年にかけてWebサービスで収益を得ることの大変さとなかなか成功するサービスをつくるのは難しいという記事を書きましたが、とはいえWebサービスもヒットさせている企業や個人の方もいるわけで、今回はWebサービスを作るうえで希望になる記事を紹介します。 何が当たるかわからず、閉鎖していくwebサービスもある中、続けていけば良い結果が生まれることもありますので、希望を持ってWebサービスを作りたいという思いを込めて集めてみました。 ソーシャルゲームの記事なども入っていますが、当たるかどうかわからないWebの中の話しなので一緒にしています。 Webサービスを作ったのになかなかうまくいかないという方にモチベーションアップのために読んでもらえると幸いです。 個人的に読んでいていてもたってもいられなくなるほど、モノ