jQueryで読み込み時とリサイズ時の処理を合わせて書くには、以下のようにします。 $(window).bind(“load resize”, function(){ // code here }); ※はてぶでコメントを頂いたので追記（2013.2.19） jQuery 1.7以上では「.bind」は非推奨になったため、以下のように「.on」を使います。 $(window).on(“load resize”, function(){ // code here });

レスポンシブWebデザインで使用するメディアクエリーはIE8以下では使用できないため、以下いずれかのjsを使って対応させます。 Respond.js css-mediaqueries.js 実装上の注意点、うまく動作しない場合は以下URLを参照。 IE8以下でレスポンシブWebデザインを実現するRespond.js css3-mediaqueries.jsが効かなくて困った時のまとめ

CSS ARROW PLEASE!は、CSSで吹き出しを作るジェネレータです。 結構いい感じ。 CSS ARROW PLEASE! is a generator that makes a balloon with CSS. it looks good. CSS ARROW PLEASE!

mixiやTwitter等をやっていると、いつの間にか住所や本名を知らない友達が増えてしまうもの。 そういった友人に何かプレゼントを送りたい、といった時「事前に住所を聞くのもちょっと。。。」という人も中にはいるのではないかと。 そこで、そんな時に役立つ住所を知らない相手にプレゼントや手紙を送ることが出来るサービスをまとめてみました。 ウェブポ 私も去年試しに使ってみた年賀状作成・送付サービス。「かもめ?る」なども受け付けています ギフトナウ Twitterのフォロワー等にもギフトが贈れるサービス。別に自分で買ったアイテムを送ってもらうことも出来ます メルアド宅配便 メールアドレスだけで5kg以下の商品を全国一律990円で送ることが出来る配送サービス ポチッとギフト 携帯やPCから送れるギフトサービス。セブンイレブンやHMVで受け取ることが出来るのも便利ですね メルプレ 楽天ギフトの商品をメ

CSS3で表現できることを知っておきたい。 そんなときに参考になるのが、『Button Maker』。CSS3を使ったボタンジェネレータです。 スライダーでボタンの大きさやfont-size、角丸の度合いを設定できたり、ボーダーやグラデーションの色を設定できますね。 「View the CSS」をクリックすると、CSS3で実装するためのソースを見ることができます。 なかなか使いやすいので、一度見てみてください。 Button Maker コーポレートサイトに一部制作実績を追加しました。よろしければご覧ください。 制作実績 | 株式会社クリーム 少し前にコーポレートのドメインを取って、creamu.comからcreamu.co.jpに移行しています。Google Appsにメール設定も終わっていい感じになりました。 今月号のWeb Designingから、CSS Lab.の特集記事を担当して

96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプル集です。 なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubbles CSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed

91831729/ iStockphoto/ Thinkstock サイトをさっと作りたい。 そんなときにおすすめなのが、『Top 10 Html/CSS Web Templates Of March 2010 For Free Download』。フリーのXHTML / CSSテンプレート集です。 いい感じのものが揃っています。 Photographer Enterprise Solutions Corporate 使いやすいものが揃っていると思うので、ぜひ見てみてください。 Top 10 Html/CSS Web Templates Of March 2010 For Free Download また遅れてしもうたすんまへんm(_ _)m今日は天気よくて気持ちいいですね〜。 いろいろ詰まっているので進めます。

CSS3で何ができるかを知りたい。 そんなときにおすすめなのが、『CSS3 Generator』。CSS3で何が実現できるかがわかるジェネレータです。 border-radiusやbox-shadowなど、CSS3の様々なプロパティーをセレクトボックスから選んで、プレビューすることができます。 数値を変えられるのと、コード表示、ブラウザ対応表示もあるので、とても便利ですね。 ぜひ見てみてください。 CSS3 Generator 申告を無事終えました。やっと解放された。。 今年は帳簿付けは自分でやって、決算のときだけ税理士に頼もうかな。

Google Chromeを使っている（アドオンがあるなら使いたい）。 そんなあなたにおすすめなのが、『30 Irreplaceable Chrome Extensions』。Google Chromeのエクステンション集です。 便利そうなのをざっとご紹介しますね。 Aviary Screen Capture キャプチャ（スクリーンショット）が撮れる Xmarks Bookmarks Sync Firefox、Safari、IEとブックマークを同期 Evernote Web Clipper Evernoteに簡単に投稿できる Chrome Gestures マウスの動きで「戻る」「進む」などを制御できる Google Similar Pages beta (by Google) よく似たページを探してくれる Feedly 雑誌のようなスタートページにできる。Google ReaderやTw

オリジナルのアイコンを手軽に作りたい。 そんなときに使えそうなのが、『ICONIZER』。カスタマイズできるアイコンジェネレータです。 まずアイコンのデザインを選んで、ファイル形式を選択、描画色や背景色を指定してサイズを指定、という風に、結構カスタマイズしたアイコンを作ることができます。 All images are completely free to use in all projects (web and desktop applications, freeware and commercial projects) ライセンスは上記のようにあって、自由に使えそうですね。 一度見てみてください。 ICONIZER まったりRSSとか本が読みたいけど時間がない。。週末までがんばろう。

CSS3でできることをいち早く知っておきたい。 そんなあなたにおすすめなのが、『Stronger, Better, Faster Design with CSS3』。CSS３を使った、強くて速いデザイン例です。 以下の例が紹介されています。 Inline Form Labels inputのフィールドに透かしテキストを入れる方法。MobileMeで使われていますね。フォーカスした時にopacityで透明度を変化。デモはこちら Fast, Easy Drop-in Modals 綺麗なグラデーションの背景と、ドロップシャドウのついたモーダルダイアログ。美しい。デモはこちら Newspaper Layouts with Columns and Image Masks 新聞紙のような綺麗なカラムレイアウトと、グラデーションによるイメージマスクの例。デモはこちら CSSのコーディングで表現力が増え

Photoshopをもっと使いこなしたい。そんなあなたにおすすめなのが、『10 Photoshop Interface Features you Didn’t Know Existed』。あなたが知らないかもしれないPhotoshopの使い方です。 なかなかいい感じのが揃っていますよ。 背景色をグレー以外の色に変更する グレーがぼんやりしているなら、ウィンドウの背景色を黒に変えてみよう。右クリックで可能だ。他の色も選べる 描画色と背景色を簡単に変更する スポイトツールで、altを押しながら色を選択すると、背景色を変更できる シェイプや選択範囲の位置を変更する シェイプや選択範囲を描いている途中で、位置を変更したい場合、スペースバーを押しながら描いたり選択範囲を作成することで移動できる 選択範囲を復活させる 選択範囲を失ってしまった場合、「Ctrl + Shift + D」でもう一度選択範囲

web anthologyで、ピュアCSSで作る効果的なエフェクトが紹介されています。 ざっといくつかご紹介。 3-state Button using CSS 通常時、マウスオーバー時、クリック時の3種類のボタンをCSSスプライトで作るチュートリアル Pure CSS Polaroid Photo Gallery 重なり合ったポラロイド写真をCSSを使ってデザインする Bubble Effect with CSS マウスオーバーで拡大するMacのDockのようなバブルエフェクト Pure CSS Lightbox CSSで作るlightbox系画像拡大表示 Change Text Selection Color With CSS テキストハイライト時の背景色を変更する それぞれデモがわかりやすいので、一度見てみてください。 23 Pure CSS Effects/Solutions to

Leah Culver’s Blogで、ログインフォームとサインアップフォームを一体化するテクニックが紹介されています。 ↑の画像を見てもらうとわかるんですが、 メールアドレス（ユーザー名）とパスワードは共通 「I have an account」にチェックを入れると「Log in」ボタンに切り替わり、パスワード忘れのリンクを表示 「I’m new!」にチェックを入れると「Sign up!」ボタンに切り替わり、利用規約へのリンクを表示 といった仕組みになっています。 ログインフォームとサインアップフォームを分けなくていいので、シンプルで使いやすそうですね。 参考に、HurlとAmazonの例が載っています。見てみると、確かにAmazonもこういうインターフェースになっていることに気づきますね。 フォーム作成の参考にしてみてはいかがでしょうか？ Log in or sign up? 昨日はま

ExtraTutsというサイトで、デベロッパーなら知っておきたいCSSテクニックが紹介されています。 いくつかご紹介しますね。 CSS Browser Selector OS・ブラウザごとにCSSを切り替えられる1行のJavaScript adding a CSS StyleSheet to your RSS feeds RSSフィードにCSSを適用させる方法 CSS Watermark Effect CSSで作るウォーターマーク（透かしテキスト） Forming Tooltip using CSS3 JavaScriptで作る必要があったツールチップをCSS3で簡単に実装する方法 ソースが載っているので、一度見てみてください。 CSS techniques web developer should use 中目で飲みまくり。ある方と会えたし楽しかったぞ。CREAMUをiGoogleに入れ

CSS TRICKSで、高さが可変するタブ型コンテンツの作り方が紹介されています。 タブをクリックすると、フェードイン&アウトでコンテンツが切り替わって、高さもコンテンツの量に合わせて可変しますね。 デモは以下から。CSS TRICKSのサイドバーに実装されています。 View Demo HTML、CSS、jQueryのソースがダウンロードできますね。jQueryのソースにはコメントがついているので、どこで何をしているのかがわかるようになっています。 一度見てみてください。 Organic Tabs 今日も天気いいですねー。いろいろ進めるぞ。

Smashing Magazineで、DTPデザインのチュートリアルがまとまっています。 いくつかご紹介しますね。 » プリントできる名刺の作成（Photoshop） ・CMYKのドキュメントをPhotoshopで作成。裁ち落とし ・背景をかっこよくするためにテクスチャを使用 ・多角形選択ツールでカスタムシェイプを作成 » 雑誌のカバーデザイン（inDesign） ・inDesignで時間節約のため、 オブジェクトサイズの調整 / フレームに均等に流し込む を使用して写真をめいいっぱいに使う ・ペンツールでカスタムシェイプを作成 » 10のステップで超クールなレトロポスターを作成（Photoshop） ・illustratorでカスタムのファイルを作成 ・アートワークに深みを与えるためにテクスチャを使用 » メタリックを使った5色の雑誌カバーデザイン（Photoshop,illustrat

遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。 2. ユーザーの視線は人の顔に向く Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いて

Balkhisというサイトで、デザイナーのための便利なジェネレータがまとまっています。 ざっといくつかご紹介。 » Pattern Cooler » Dotted Background Generator » ColourLovers　↑のキャプチャはこちら » Stripe Designer » Create a Graph 他にも、カラージェネレータ、Flashジェネレータ、CSSジェネレータ、フォームジェネレータ、テキストジェネレータ、バーコードラベルジェネレータなど、たくさんありますね。 一度見てみてください。 » 55+ Extremely Useful Online Generators for Designers emobile修理中。早く戻ってきてほしーなー。mobilepointでがんばっております。

MyPHPDuniaというサイトで、jQueryのサンプルTOP10がまとまっています。 かなり使えるものばかりな感じですね。 » スライドタブボックス » Appleのサイトで使われているようなメニュー » 画像をズーム » 画像の上にスライドするキャプション » メニューの背景にスライドする画像 » タブで画像を切り替える » メニューにフェード効果 » アコーディオンメニュー » タブによるコンテンツ切り替え » タブメニュー 詳しくは以下からどうぞ。ソースコードもダウンロードできますね。 » Top 10 Jquery Examples with Live Demos わいわいと飲み会。超たのしかったぞ。