Photoshop関連のフリーのリソースを収集しているサイト「i am Photoshop」を紹介します。

iGoogleのように、パネルをドラッグ&ドロップで移動できるスクリプト「Easy Widgets」を紹介します。 Easy Widgets ※ホスト先が変なことになっていたので、リンク先を変更。 デモファイルを含むスクリプトはダウンロードできました。 各パネルはdivで実装されており、デザイン変更やクローズボタンなどの設置ができます。 オプションでは、クッキーの設定（パネルの配置）、パネル移動のタイミング・不透明度などが調整できます。 Easy WidgetsはjQueryのプラグインのため、実装にはjquery.jsが必要です。

<textarea name="code" class="html" cols="60" rows="5"> <li> <div class="content_block"> <a href="#"><img src="sample.gif" alt="" /></a> <h2><a href="#">Image Name</a></h2> <p><!—Description here--></p> </div> </li> </textarea>

SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 既報のとおり、IE6のシェアは純減を続けている。2009年2月のNet Applications調査によればIE6のシェアはFirefox 3に抜かれて3位に落ちた。今後も下落の傾向は続くとみる向きが多い。しかし、依然として19%を越えるシェアはその次のシェアを獲得している4.5%弱のSafari 3.2を大きく上回る。IE8のリリースが控えている状況ではあるが、WebデベロッパやWebデザイナは依然としてIE6対応を継続しなければならない。 IE6固有の問題を回避する方法はいくつもあるが、それらテクニックをまとめたドキュメントがSitePoint: 10 Fixes That Solve IE6 Problemsとして公開されたので注目しておき

テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 2009年03月10日- jQuery plugin: ‘autoResize’ - James Padolsey テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 改行を入れると、textareaが自動でズイズイとアニメーションで伸張します。 「textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ 」というのがありましたがアニメーションできる＆jQueryプラグイン＆オプション指定可能という点があります。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 設置サンプル 設置のサンプルです。 設置のサンプルです。 設置のサンプルです。 以下のようなオプションが指定出来ます。 ・onResize でコールバック関数を指定 ・animate

Splashy Icons 小さくてかわいいWEBサイト用462アイコンのセット「Splashy Icons」 famfamfam みたいな可愛くて使い勝手がよさそうなアイコンパックが公開されています。 色々あります。 ライセンスは Creative Commons 3.0 とのことです。 関連エントリ WEB開発に活用できる、２００９年初お目見えアイコンセット集 高品質なベクターアイコンセットいっぱい フリーのプロフェッショナル矢印アイコン集

Checkbox alignment in IE and Firefox | Xinotes チェックボックスを綺麗に並べるCSSサンプル。 次のように、チェックボックスの横に、改行入りのテキストを入れても綺麗に配置するサンプルです。 簡単そうでなかなか難しいテクニックかもしれないので覚えておくとよいかも。 サンプル IEでもFirefoxでも動作。Chromeでも試してみたところ動作しました。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CSSでクールなINPUTフォームを作成するサンプル CSSベースのクールなフォーム、サンプル集 CSSでフォームデザインをする際のチュートリアル

ColorBox - customizable lightbox plugin for jQuery クールにデザインされた多機能LightBox「ColorBox」 もう成熟してきたこの分野ですが、ColorBoxはなかなか多機能かつクールなようなのでご紹介。 単一の写真表示 写真をグループ化してページ送り機能 AjaxでHTML取得 インラインＨＴＭＬも可能 ビデオ埋め込み IFRAMEで外部ページの埋め込み 機能も勿論多機能でいいのですが、デザインが色々と選べるところがいいです。 以下、３つのテーマが基本テーマ以外に用意されているみたいです。 シンプル調 Apple風(?) シンプル調2 カスタマイズして簡単にデザイン変更もできそうです。 jQueryプラグインで、MITライセンスとのこと。 関連エントリ カスタマイズできる多機能LightBox「Lightview」 表示法が新しく

jQuery treeTable 2.0 - Cubicphuse エクスプローラー風のツリー型テーブルを実現できるjQueryプラグイン「treeTable」。 次のようなツリー型のウィジェットをページ内に簡単に埋め込みできるようです。 限られたスペースに、折りたたみ可能な状態で情報を表示するといった用途にも使えそう。 HTML的には、次のような、tableタグで定義されていて、jQueryを使ってインタラクティブに動作する模様。 <table class="example" id="dnd-example"> <caption>Example 3: Dragging and dropping example.</caption> <thead> <tr> <th>Title</th> <th>Size</th> <th>Kind</th> </tr> </thead> <tbody>

これまで実践メモではフォームを設計する際に注意すべき点をいくつかご紹介してきました。 フォーム設計についての記事一覧 今回はフォームによく出現する「進む（次へ）ボタン」と「戻るボタン」を配置する際に気をつける点を纏めました。 ウェブサイトにおいては「進む（次へ）」ボタンなど前進するものを右側に、「戻る」ボタンなど後退するものを左側に置くことが一般的になっています。 ユーザは多くのサイトを利用している中でこの配置に慣れていますので、配置が逆になっていると次へ進むつもりがうっかり「戻るボタン」を押してしまうことになりかねません。最悪の場合、これまで入力したものがクリアされてしまい、入力を一からやり直すはめになります。 そういう訳ですから、フォームのボタンを配置する際は「進む（次へ）」ボタンを右側に、 「戻る」ボタンを左側へと一般的な慣習に従う方がユーザに対して親切と言えるでしょう。 2.「進む

カスタムシーンの作り方 カスタムシーンについてはサンプルのEasingCastingSheneとMurakenSceneを参考。 ということなんだけど、EasingCastingSheneについてはよくわからんかった。コアのコンポーネントなんじゃ？（このへん、集中力が落ちてた）。。。 MurakenSceneは理解。確かに親からきたか子から来たかに応じてエフェクトや表示を切り替えたい場合は多いので、ソース確認しとくこと。 まあここまで聞いて（あと書きながら）、要するに拡張機能ってコマンド・シーン・コンポーネントのカスタムのことなのかーとようやく理解。ん？jsflとかはどうなるんだろう。 コマンドに比べシーンの説明についてはさらっとでした。 カスタムコンポーネントの作り方 サンプルのHandMagicEffectを参考。 ユーザーがコンポーネントインスペクタで入力する変数の処理などにつ

先週の金曜日にProgression 勉強会 in MTLに行ってきました。100人ほどのFlasherが集まって拡張機能について話を聞きました。ひさぶりの勉強会でしたが、ちょっと前は何を話されてるか分からないような状態だったのですがそういう状態は少なくとも脱出している自分も確認できてよかった。あとこれは関係ないけど、いつも自由が丘にいるので銀座とか新橋とかひさしぶりな感じで新鮮だったなー。 もう一昨日の話ですが、まとめるためにメモ。...しようと思ったらすっごく詳しくまとめられてるサイトがあったので（3/6 Progression 機能拡張コンテスト 勉強会 IN MTL）このエントリーよりそちらをご覧くださいな、と断った上で以下勉強会でとったノートとサンプルを確認しながら自分メモ。覚えときたいところや注意点は太字や色つき。 勉強会の資料データはProgression公式ブログからダウン

Drive Test（要：FlashPlayer9） [←] [→] キー … ハンドル [z] キー … アクセル [x] キー … ブレーキ [↓] … バック 描画周りのチューニングは置いといて、操作系とJigLib組み込んでみた。 JigLibは、手続きが簡単でわかりやすいんだけど、各パラメータの意味がさっぱりわかんねーのが参る。ちゃんと詰めの調整するために簡易エディタとか作らなきゃだなぁ。 とりあえず、アンダー傾向の強いセッティングに。このほうが実車っぽく見える気がする。おもいっきりオーバーステアにするとラジコン挙動になって、それはそれで面白かった。 まだまだ先は長い。

前回は実装におけるGraceful DegradationとProgressice Enhancementの違いについて説明しました。もうひとつ、Progressive Enhancementな例をお見せして、このシリーズを終わらせたいと思います。 Flashの埋め込みもProgressive Enhancementなやり方で Flashの埋め込みについても、JavaScriptを用いた方法が盛んに行われているように思います。しかし、このやり方ではスクリプトが無効な環境でFlashが表示されません。また代替内容があったとしても「Flashプレーヤーが必要です」というメッセージがでるものが多く、適切な使われ方がされていないように思います。 動きを与えるムービーや動画など、代替となるコンテンツがそもそも存在し得ないものであれば仕方が無いかもしれません。しかし、サイトのナビゲーションがFlash

なんかここにWEB関係のこと書くのは久々な気がするんですが、 これは忘れぬうちに書いておかねば！と思ったので、メモメモ。 IE6で透過PNGを表示するライブラリ IE PNG FIX 2 これ、超イイ！！ ＊この記事、数日前に書いて後日公開しようと思ってたんですが、 今日本屋で「Web Designing ９月号」を立ち読みしたら、 ”透過PNG+CSSデザインがやってきた！”という特集が組まれていて、 しかもIE PNG FIXもことも掲載されていて。 「なに？！おれのギャリック砲にそっくりだ！」ばりに衝撃で、 なんかこの記事見て書いたって思われるのもしゃくなので、 公開は見送ろうかと思ったんですが、IE PNG FIXに関しては 紹介だけで使い方は書いてなかったのでやっぱり公開することに。 なんか後出しで寂しい感じですが、自分のやってることも 割とタイムリーだったってことにちょっ

既存のテーブルにソート、ハイライト表示、データ分割、ページネーション機能を追加できる、高性能な超軽量（2.5KB）スクリプトをLeigeberから紹介します。 TinyTable JavaScript Table Sorter demo このスクリプトは、以前紹介した「設置も簡単なテーブルのデータをソートする超軽量のスクリプト」のバージョンアップ版で、主な機能は下記の通りです。 既存のテーブルに簡単に設置が可能。 2.5KBの超軽量スクリプト（他のスクリプトへの依存無し）。 列を交互に自動ハイライト。 選択した行のハイライト。 データの表示件数をコントロール。 分割したデータのページネーションを設置。

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jquery.scrollable ホイール・クリック・キーボード操作にも対応した、パネルをスクロールする高性能なスクリプト。 Fi

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.